[{"data":1,"prerenderedAt":11703},["ShallowReactive",2],{"docsNavigation":3,"blogNavigation":53,"index":95,"posts":130},[4,38],{"title":5,"path":6,"stem":7,"children":8,"icon":37},"常用网站","/docs/getting-started","1.docs/1.getting-started/1.index",[9,12,17,22,27,32],{"title":10,"path":6,"stem":7,"icon":11},"区块链相关(前端)","i-lucide-box",{"title":13,"path":14,"stem":15,"icon":16},"图片压缩","/docs/getting-started/photo-compression","1.docs/1.getting-started/2.photo-compression","i-lucide-image",{"title":18,"path":19,"stem":20,"icon":21},"组件库","/docs/getting-started/component-library","1.docs/1.getting-started/3.component-library","i-lucide-puzzle",{"title":23,"path":24,"stem":25,"icon":26},"图表库","/docs/getting-started/charts","1.docs/1.getting-started/4.charts","i-lucide-bar-chart-3",{"title":28,"path":29,"stem":30,"icon":31},"CSS","/docs/getting-started/css","1.docs/1.getting-started/5.css","i-lucide-palette",{"title":33,"path":34,"stem":35,"icon":36},"调试测试工具","/docs/getting-started/test","1.docs/1.getting-started/6.test","i-lucide-bug",false,{"title":39,"path":40,"stem":41,"children":42,"page":37},"常用工具","/docs/essentials","1.docs/2.essentials",[43,48],{"title":44,"path":45,"stem":46,"icon":47},"uni-helper","/docs/essentials/uni-helper","1.docs/2.essentials/1.uni-helper","i-lucide-settings",{"title":49,"path":50,"stem":51,"icon":52},"工作流可视化库","/docs/essentials/workflow-libraries","1.docs/2.essentials/2.workflow-libraries","i-lucide-workflow",[54],{"title":55,"path":56,"stem":57,"children":58,"page":37},"Blog","/blog","3.blog",[59,63,67,71,75,79,83,87,91],{"title":60,"path":61,"stem":62},"Vue 3 中 \u003CTransition> 报错：组件根节点无法被动画化的解决方案","/blog/asian-cuisine","3.blog/1.asian-cuisine",{"title":64,"path":65,"stem":66},"使用 openapi-ts-request 自动生成 API 请求代码","/blog/apifox-api-generation","3.blog/2.apifox-api-generation",{"title":68,"path":69,"stem":70},"解决 uni.upload 多文件上传限制：使用 fetch + FormData 实现 H5 环境下的多文件上传","/blog/file-upload-issue-solution","3.blog/3.file-upload-issue-solution",{"title":72,"path":73,"stem":74},"Wangeditor中被div包裹的img标签被过滤问题解决方案","/blog/wangeditor-img-filter-issue","3.blog/4.wangeditor-img-filter-issue",{"title":76,"path":77,"stem":78},"Nuxt项目部署后报错 “Cannot load payload /_payload.json” 的修复","/blog/nuxt-payload-extraction","3.blog/5.nuxt-payload-extraction",{"title":80,"path":81,"stem":82},"Nuxt项目导入nuxt-echarts实现图表渲染","/blog/nuxt-echarts-implementation","3.blog/6.nuxt-echarts-implementation",{"title":84,"path":85,"stem":86},"Reown+Wagmi 在 UniApp+Vite 项目中的问题与解决方案","/blog/reown-wagmi-uniapp-issues","3.blog/7.reown-wagmi-uniapp-issues",{"title":88,"path":89,"stem":90},"数字滚动动画组件 - Vue 动画最佳实践","/blog/number-scroll-animation","3.blog/8.number-scroll-animation",{"title":92,"path":93,"stem":94},"新电脑安装 nvm 卡住？无需修改配置文件，一行命令完美解决！","/blog/nvm-install-solution","3.blog/9.nvm-install-solution",{"id":96,"title":97,"body":98,"contact":118,"cta":119,"description":99,"extension":120,"features":119,"hero":121,"meta":125,"navigation":37,"path":126,"sections":119,"seo":127,"stem":128,"testimonials":119,"__hash__":129},"index/0.index.yml","qibmz 的博客",{"title":97,"description":99,"seo":100,"navigation":37,"hero":103,"contact":116},"事已至此,先干饭吧,活是干不完的",{"title":101,"description":102},"qibmz - Blog","qibmz - Blog.",{"links":104},[105,111],{"label":106,"icon":107,"trailing":108,"to":109,"size":110},"关于我","i-lucide-smile",true,"/about-us","xl",{"label":112,"icon":113,"color":114,"variant":115,"to":56,"size":110},"查看博客","i-lucide-file-text","neutral","subtle",{"email":117},"1583326640@qq.com",{"email":117},null,"yml",{"links":122},[123,124],{"label":106,"icon":107,"trailing":108,"to":109,"size":110},{"label":112,"icon":113,"color":114,"variant":115,"to":56,"size":110},{},"/",{"title":101,"description":102},"0.index","pUzZcP1yMtMHfl2CSqLAWoyqIZekGFTMdusw8NyYpJ4",[131,483,1616,3207,5431,5583,6495,9135,10241],{"id":132,"title":92,"authors":133,"badge":139,"body":141,"date":475,"description":476,"extension":477,"image":478,"meta":480,"navigation":108,"path":93,"seo":481,"stem":94,"__hash__":482},"posts/3.blog/9.nvm-install-solution.md",[134],{"name":135,"to":136,"avatar":137},"qibmz","https://github.com/qibmz",{"src":138},"/image/avatar.avif",{"label":140},"工具",{"type":142,"value":143,"toc":463},"minimark",[144,148,157,166,184,187,191,194,199,205,221,224,240,244,247,256,273,277,284,293,319,321,324,327,336,339,341,344,441,443,446,459],[145,146,147],"h2",{"id":147},"问题背景",[149,150,151,152,156],"p",{},"刚换新电脑，安装好 ",[153,154,155],"code",{},"nvm-windows"," 后，准备安装 Node.js 版本时却遇到了经典难题：",[158,159,160],"blockquote",{},[149,161,162],{},[163,164,165],"strong",{},"进度条一直卡在 \"Downloading node.js version...\"，无论是否开启梯子，最终都报错或无限等待。",[149,167,168,169,172,173,176,177,180,181,183],{},"网上大部分教程都让你去修改 ",[153,170,171],{},"nvm"," 安装目录下的 ",[153,174,175],{},"settings.txt"," 文件。",[163,178,179],{},"其实完全不需要！"," ",[153,182,171],{}," 官方命令行本身就提供了修改镜像源和代理的功能，既安全又方便。",[185,186],"hr",{},[145,188,190],{"id":189},"解决方案使用-nvm-内置命令","解决方案：使用 nvm 内置命令",[149,192,193],{},"只需在终端（PowerShell 或 CMD）中执行两条命令，即可瞬间解决网络问题。",[195,196,198],"h3",{"id":197},"第一步查看帮助可选","第一步：查看帮助（可选）",[149,200,201,202,204],{},"首先确认你的 ",[153,203,171],{}," 支持以下命令：",[206,207,212],"pre",{"className":208,"code":209,"language":210,"meta":211,"style":211},"language-powershell shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","nvm -h\n","powershell","",[153,213,214],{"__ignoreMap":211},[215,216,219],"span",{"class":217,"line":218},"line",1,[215,220,209],{},[149,222,223],{},"你会看到如下关键信息：",[206,225,227],{"className":208,"code":226,"language":210,"meta":211,"style":211},"nvm node_mirror [url]        : Set the node mirror. Defaults to https://nodejs.org/dist/\nnvm proxy [url]              : Set a proxy to use for downloads.\n",[153,228,229,234],{"__ignoreMap":211},[215,230,231],{"class":217,"line":218},[215,232,233],{},"nvm node_mirror [url]        : Set the node mirror. Defaults to https://nodejs.org/dist/\n",[215,235,237],{"class":217,"line":236},2,[215,238,239],{},"nvm proxy [url]              : Set a proxy to use for downloads.\n",[195,241,243],{"id":242},"第二步切换国内镜像源核心步骤","第二步：切换国内镜像源（核心步骤）",[149,245,246],{},"将 Node.js 的下载源修改为淘宝镜像（npmmirror），国内下载速度飞快。",[206,248,250],{"className":208,"code":249,"language":210,"meta":211,"style":211},"nvm node_mirror https://npmmirror.com/mirrors/node/\n",[153,251,252],{"__ignoreMap":211},[215,253,254],{"class":217,"line":218},[215,255,249],{},[158,257,258,264],{},[149,259,260,263],{},[163,261,262],{},"提示","：如果也需要加速 npm 包的下载，可以顺便设置：",[206,265,267],{"className":208,"code":266,"language":210,"meta":211,"style":211},"nvm npm_mirror https://npmmirror.com/mirrors/npm/\n",[153,268,269],{"__ignoreMap":211},[215,270,271],{"class":217,"line":218},[215,272,266],{},[195,274,276],{"id":275},"第三步配置代理如果你必须使用梯子","第三步：配置代理（如果你必须使用梯子）",[149,278,279,280,283],{},"如果你所在的网络环境必须通过代理才能访问外网，可以设置代理地址。以 Clash Verge 为例，默认 HTTP 端口通常为 ",[153,281,282],{},"7897","，请根据你实际软件的端口调整。",[206,285,287],{"className":208,"code":286,"language":210,"meta":211,"style":211},"nvm proxy http://127.0.0.1:7897\n",[153,288,289],{"__ignoreMap":211},[215,290,291],{"class":217,"line":218},[215,292,286],{},[158,294,295,301],{},[149,296,297,300],{},[163,298,299],{},"注意","：",[302,303,304,312],"ol",{},[305,306,307,308,311],"li",{},"如果你已经设置了淘宝镜像（第二步），通常",[163,309,310],{},"不需要","再设置代理，直接下载即可。",[305,313,314,315,318],{},"如果设置代理后反而报错，请尝试运行 ",[153,316,317],{},"nvm proxy none"," 关闭代理，仅使用淘宝镜像。",[185,320],{},[145,322,323],{"id":323},"最终结果",[149,325,326],{},"配置完成后，再次运行安装命令：",[206,328,330],{"className":208,"code":329,"language":210,"meta":211,"style":211},"nvm install 20  # 或者你要安装的具体版本，如 18, 22 等\n",[153,331,332],{"__ignoreMap":211},[215,333,334],{"class":217,"line":218},[215,335,329],{},[149,337,338],{},"下载速度瞬间跑满带宽，不再卡住！",[185,340],{},[145,342,343],{"id":343},"常用命令速查",[345,346,347,361],"table",{},[348,349,350],"thead",{},[351,352,353,358],"tr",{},[354,355,357],"th",{"align":356},"left","命令",[354,359,360],{"align":356},"说明",[362,363,364,375,385,399,411,421,431],"tbody",{},[351,365,366,372],{},[367,368,369],"td",{"align":356},[153,370,371],{},"nvm node_mirror \u003Curl>",[367,373,374],{"align":356},"设置 Node.js 下载镜像源",[351,376,377,382],{},[367,378,379],{"align":356},[153,380,381],{},"nvm npm_mirror \u003Curl>",[367,383,384],{"align":356},"设置 npm 下载镜像源",[351,386,387,392],{},[367,388,389],{"align":356},[153,390,391],{},"nvm proxy \u003Curl>",[367,393,394,395,398],{"align":356},"设置下载代理（例：",[153,396,397],{},"http://127.0.0.1:7890","）",[351,400,401,405],{},[367,402,403],{"align":356},[153,404,317],{},[367,406,407,410],{"align":356},[163,408,409],{},"取消代理","（切回直连时用）",[351,412,413,418],{},[367,414,415],{"align":356},[153,416,417],{},"nvm list available",[367,419,420],{"align":356},"查看可安装的 Node.js 版本",[351,422,423,428],{},[367,424,425],{"align":356},[153,426,427],{},"nvm install \u003Cversion>",[367,429,430],{"align":356},"安装指定版本",[351,432,433,438],{},[367,434,435],{"align":356},[153,436,437],{},"nvm use \u003Cversion>",[367,439,440],{"align":356},"切换使用该版本",[185,442],{},[145,444,445],{"id":445},"总结",[149,447,448,449,451,452,455,456,458],{},"遇到 ",[153,450,171],{}," 下载卡住的问题，",[163,453,454],{},"优先尝试修改镜像源","，其次再考虑配置代理。利用 ",[153,457,171],{}," 自带命令行的方式，避免了手动修改配置文件可能带来的路径错误或权限问题，优雅又高效！",[460,461,462],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":211,"searchDepth":236,"depth":236,"links":464},[465,466,472,473,474],{"id":147,"depth":236,"text":147},{"id":189,"depth":236,"text":190,"children":467},[468,470,471],{"id":197,"depth":469,"text":198},3,{"id":242,"depth":469,"text":243},{"id":275,"depth":469,"text":276},{"id":323,"depth":236,"text":323},{"id":343,"depth":236,"text":343},{"id":445,"depth":236,"text":445},"2026-03-19T00:00:00.000Z","安装 nvm-windows 后下载 Node.js 卡住？无需手动修改 settings.txt，使用 nvm 内置命令切换淘宝镜像或配置代理，一行命令即可解决。","md",{"src":479},"https://picsum.photos/id/0/640/360",{},{"title":92,"description":476},"1lCyYZIjs2m8Wf7GNrRuyRNBwjj81W95xo9GDpp0NGI",{"id":484,"title":88,"authors":485,"badge":488,"body":490,"date":1609,"description":1610,"extension":477,"image":1611,"meta":1613,"navigation":108,"path":89,"seo":1614,"stem":90,"__hash__":1615},"posts/3.blog/8.number-scroll-animation.md",[486],{"name":135,"avatar":487},{"src":138},{"label":489},"Vue3",{"type":142,"value":491,"toc":1589},[492,495,498,501,504,519,522,525,547,553,561,564,567,575,656,660,865,869,872,1165,1169,1224,1227,1241,1244,1254,1257,1268,1271,1291,1294,1361,1364,1372,1375,1389,1394,1397,1401,1466,1470,1515,1519,1552,1554,1559,1581,1586],[145,493,494],{"id":494},"概述",[149,496,497],{},"数字滚动动画常见于数据大屏、计数器、统计面板。本文按「需求 -> 原理 -> 实现 -> 性能 -> 实战」的顺序，带你完成一个高性能、可复用、内存友好的 Vue 3 数字滚动组件。",[145,499,500],{"id":500},"先明确目标",[149,502,503],{},"设计一个数字滚动组件，要求：",[505,506,507,510,513,516],"ul",{},[305,508,509],{},"📊 支持整数、小数、负数",[305,511,512],{},"⚡ 动画流畅，视觉反馈自然",[305,514,515],{},"🎯 高性能，避免频繁更新时卡顿",[305,517,518],{},"🔄 内存安全，杜绝定时器堆积与泄漏",[145,520,521],{"id":521},"实现原理",[149,523,524],{},"数字滚动的本质是「逐位滚动」：",[505,526,527,530,537],{},[305,528,529],{},"每一位数字都是 0-9 垂直排列",[305,531,532,533,536],{},"通过 ",[153,534,535],{},"translateY"," 改变可视窗口中的数字",[305,538,539,540,543,544],{},"数字 ",[153,541,542],{},"N"," 的偏移量是 ",[153,545,546],{},"N * -100%",[149,548,549,550,300],{},"例如显示数字 ",[153,551,552],{},"5",[206,554,559],{"className":555,"code":557,"language":558},[556],"language-text","0  ← translateY: 0%\n1\n2\n3\n4\n5  ← translateY: -500% (当前显示)\n6\n7\n8\n9\n","text",[153,560,557],{"__ignoreMap":211},[149,562,563],{},"理解这个映射关系后，再看代码会非常直接。",[145,565,566],{"id":566},"核心实现要点",[195,568,570,571,574],{"id":569},"_1-使用-transform-做位移动画","1. 使用 ",[153,572,573],{},"transform"," 做位移动画",[576,577,578,628],"code-group",{},[206,579,584],{"className":580,"code":581,"filename":582,"language":583,"meta":211,"style":211},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// 修改 margin 或 top 会触发布局重排\nstyle.marginTop = value;\nstyle.top = value;\n","❌ 不推荐","ts",[153,585,586,592,613],{"__ignoreMap":211},[215,587,588],{"class":217,"line":218},[215,589,591],{"class":590},"sHwdD","// 修改 margin 或 top 会触发布局重排\n",[215,593,594,597,601,604,607,610],{"class":217,"line":236},[215,595,460],{"class":596},"sTEyZ",[215,598,600],{"class":599},"sMK4o",".",[215,602,603],{"class":596},"marginTop ",[215,605,606],{"class":599},"=",[215,608,609],{"class":596}," value",[215,611,612],{"class":599},";\n",[215,614,615,617,619,622,624,626],{"class":217,"line":469},[215,616,460],{"class":596},[215,618,600],{"class":599},[215,620,621],{"class":596},"top ",[215,623,606],{"class":599},[215,625,609],{"class":596},[215,627,612],{"class":599},[206,629,632],{"className":580,"code":630,"filename":631,"language":583,"meta":211,"style":211},"// transform 更容易走 GPU 合成层，动画更稳定\n:style=\"{ transform: `translateY(${value}%)` }\"\n","✅ 推荐",[153,633,634,639],{"__ignoreMap":211},[215,635,636],{"class":217,"line":218},[215,637,638],{"class":590},"// transform 更容易走 GPU 合成层，动画更稳定\n",[215,640,641,644,646,649,653],{"class":217,"line":236},[215,642,643],{"class":596},":style",[215,645,606],{"class":599},[215,647,648],{"class":599},"\"",[215,650,652],{"class":651},"sfazB","{ transform: `translateY(${value}%)` }",[215,654,655],{"class":599},"\"\n",[195,657,659],{"id":658},"_2-用计算属性拆分字符并计算位移","2. 用计算属性拆分字符并计算位移",[206,661,663],{"className":580,"code":662,"language":583,"meta":211,"style":211},"// 字符串转数组，用于逐位显示\nconst displayedChars = computed(() => targetValue.value.split(\"\"));\n\n// 计算每一位的偏移距离\nconst getTranslateY = (char: string): string => {\n  if (char === \".\") return \"0\";\n  const digit = parseInt(char, 10);\n  return digit * -100 + \"%\";\n};\n",[153,664,665,670,717,722,728,762,799,830,859],{"__ignoreMap":211},[215,666,667],{"class":217,"line":218},[215,668,669],{"class":590},"// 字符串转数组，用于逐位显示\n",[215,671,672,676,679,681,685,688,691,694,697,699,702,704,707,709,712,715],{"class":217,"line":236},[215,673,675],{"class":674},"spNyl","const",[215,677,678],{"class":596}," displayedChars ",[215,680,606],{"class":599},[215,682,684],{"class":683},"s2Zo4"," computed",[215,686,687],{"class":596},"(",[215,689,690],{"class":599},"()",[215,692,693],{"class":674}," =>",[215,695,696],{"class":596}," targetValue",[215,698,600],{"class":599},[215,700,701],{"class":596},"value",[215,703,600],{"class":599},[215,705,706],{"class":683},"split",[215,708,687],{"class":596},[215,710,711],{"class":599},"\"\"",[215,713,714],{"class":596},"))",[215,716,612],{"class":599},[215,718,719],{"class":217,"line":469},[215,720,721],{"emptyLinePlaceholder":108},"\n",[215,723,725],{"class":217,"line":724},4,[215,726,727],{"class":590},"// 计算每一位的偏移距离\n",[215,729,731,733,736,738,741,745,748,752,755,757,759],{"class":217,"line":730},5,[215,732,675],{"class":674},[215,734,735],{"class":596}," getTranslateY ",[215,737,606],{"class":599},[215,739,740],{"class":599}," (",[215,742,744],{"class":743},"sHdIc","char",[215,746,747],{"class":599},":",[215,749,751],{"class":750},"sBMFI"," string",[215,753,754],{"class":599},"):",[215,756,751],{"class":750},[215,758,693],{"class":674},[215,760,761],{"class":599}," {\n",[215,763,765,769,772,774,777,780,782,784,787,790,792,795,797],{"class":217,"line":764},6,[215,766,768],{"class":767},"s7zQu","  if",[215,770,740],{"class":771},"swJcz",[215,773,744],{"class":596},[215,775,776],{"class":599}," ===",[215,778,779],{"class":599}," \"",[215,781,600],{"class":651},[215,783,648],{"class":599},[215,785,786],{"class":771},") ",[215,788,789],{"class":767},"return",[215,791,779],{"class":599},[215,793,794],{"class":651},"0",[215,796,648],{"class":599},[215,798,612],{"class":599},[215,800,802,805,808,811,814,816,818,821,825,828],{"class":217,"line":801},7,[215,803,804],{"class":674},"  const",[215,806,807],{"class":596}," digit",[215,809,810],{"class":599}," =",[215,812,813],{"class":683}," parseInt",[215,815,687],{"class":771},[215,817,744],{"class":596},[215,819,820],{"class":599},",",[215,822,824],{"class":823},"sbssI"," 10",[215,826,827],{"class":771},")",[215,829,612],{"class":599},[215,831,833,836,838,841,844,847,850,852,855,857],{"class":217,"line":832},8,[215,834,835],{"class":767},"  return",[215,837,807],{"class":596},[215,839,840],{"class":599}," *",[215,842,843],{"class":599}," -",[215,845,846],{"class":823},"100",[215,848,849],{"class":599}," +",[215,851,779],{"class":599},[215,853,854],{"class":651},"%",[215,856,648],{"class":599},[215,858,612],{"class":599},[215,860,862],{"class":217,"line":861},9,[215,863,864],{"class":599},"};\n",[195,866,868],{"id":867},"_3-管理定时器避免快速更新时堆积","3. 管理定时器，避免快速更新时堆积",[149,870,871],{},"定时器未清理是常见内存泄漏来源，尤其在高频数据更新场景中。",[206,873,875],{"className":580,"code":874,"language":583,"meta":211,"style":211},"// ❌ 问题代码\nwatch(\n  () => props.value,\n  () => {\n    setTimeout(() => updateValue(), 1000); // 快速更新时会堆积多个 timer\n  },\n);\n\n// ✅ 正确做法\nlet timerId: ReturnType\u003Ctypeof setTimeout> | null = null;\n\nconst clearTimer = () => {\n  if (timerId) clearTimeout(timerId);\n};\n\nwatch(\n  () => props.value,\n  () => {\n    clearTimer(); // 先清理旧 timer\n    timerId = setTimeout(() => updateValue(), 1000);\n  },\n);\n\nonUnmounted(() => clearTimer()); // 卸载时清理\n",[153,876,877,882,890,907,915,944,949,955,959,964,998,1003,1020,1043,1048,1053,1060,1075,1084,1097,1125,1130,1137,1142],{"__ignoreMap":211},[215,878,879],{"class":217,"line":218},[215,880,881],{"class":590},"// ❌ 问题代码\n",[215,883,884,887],{"class":217,"line":236},[215,885,886],{"class":683},"watch",[215,888,889],{"class":596},"(\n",[215,891,892,895,897,900,902,904],{"class":217,"line":469},[215,893,894],{"class":599},"  ()",[215,896,693],{"class":674},[215,898,899],{"class":596}," props",[215,901,600],{"class":599},[215,903,701],{"class":596},[215,905,906],{"class":599},",\n",[215,908,909,911,913],{"class":217,"line":724},[215,910,894],{"class":599},[215,912,693],{"class":674},[215,914,761],{"class":599},[215,916,917,920,922,924,926,929,931,933,936,938,941],{"class":217,"line":730},[215,918,919],{"class":683},"    setTimeout",[215,921,687],{"class":771},[215,923,690],{"class":599},[215,925,693],{"class":674},[215,927,928],{"class":683}," updateValue",[215,930,690],{"class":771},[215,932,820],{"class":599},[215,934,935],{"class":823}," 1000",[215,937,827],{"class":771},[215,939,940],{"class":599},";",[215,942,943],{"class":590}," // 快速更新时会堆积多个 timer\n",[215,945,946],{"class":217,"line":764},[215,947,948],{"class":599},"  },\n",[215,950,951,953],{"class":217,"line":801},[215,952,827],{"class":596},[215,954,612],{"class":599},[215,956,957],{"class":217,"line":832},[215,958,721],{"emptyLinePlaceholder":108},[215,960,961],{"class":217,"line":861},[215,962,963],{"class":590},"// ✅ 正确做法\n",[215,965,967,970,973,975,978,981,984,987,990,993,995],{"class":217,"line":966},10,[215,968,969],{"class":674},"let",[215,971,972],{"class":596}," timerId",[215,974,747],{"class":599},[215,976,977],{"class":750}," ReturnType",[215,979,980],{"class":599},"\u003Ctypeof",[215,982,983],{"class":596}," setTimeout",[215,985,986],{"class":599},">",[215,988,989],{"class":599}," |",[215,991,992],{"class":750}," null",[215,994,810],{"class":599},[215,996,997],{"class":599}," null;\n",[215,999,1001],{"class":217,"line":1000},11,[215,1002,721],{"emptyLinePlaceholder":108},[215,1004,1006,1008,1011,1013,1016,1018],{"class":217,"line":1005},12,[215,1007,675],{"class":674},[215,1009,1010],{"class":596}," clearTimer ",[215,1012,606],{"class":599},[215,1014,1015],{"class":599}," ()",[215,1017,693],{"class":674},[215,1019,761],{"class":599},[215,1021,1023,1025,1027,1030,1032,1035,1037,1039,1041],{"class":217,"line":1022},13,[215,1024,768],{"class":767},[215,1026,740],{"class":771},[215,1028,1029],{"class":596},"timerId",[215,1031,786],{"class":771},[215,1033,1034],{"class":683},"clearTimeout",[215,1036,687],{"class":771},[215,1038,1029],{"class":596},[215,1040,827],{"class":771},[215,1042,612],{"class":599},[215,1044,1046],{"class":217,"line":1045},14,[215,1047,864],{"class":599},[215,1049,1051],{"class":217,"line":1050},15,[215,1052,721],{"emptyLinePlaceholder":108},[215,1054,1056,1058],{"class":217,"line":1055},16,[215,1057,886],{"class":683},[215,1059,889],{"class":596},[215,1061,1063,1065,1067,1069,1071,1073],{"class":217,"line":1062},17,[215,1064,894],{"class":599},[215,1066,693],{"class":674},[215,1068,899],{"class":596},[215,1070,600],{"class":599},[215,1072,701],{"class":596},[215,1074,906],{"class":599},[215,1076,1078,1080,1082],{"class":217,"line":1077},18,[215,1079,894],{"class":599},[215,1081,693],{"class":674},[215,1083,761],{"class":599},[215,1085,1087,1090,1092,1094],{"class":217,"line":1086},19,[215,1088,1089],{"class":683},"    clearTimer",[215,1091,690],{"class":771},[215,1093,940],{"class":599},[215,1095,1096],{"class":590}," // 先清理旧 timer\n",[215,1098,1100,1103,1105,1107,1109,1111,1113,1115,1117,1119,1121,1123],{"class":217,"line":1099},20,[215,1101,1102],{"class":596},"    timerId",[215,1104,810],{"class":599},[215,1106,983],{"class":683},[215,1108,687],{"class":771},[215,1110,690],{"class":599},[215,1112,693],{"class":674},[215,1114,928],{"class":683},[215,1116,690],{"class":771},[215,1118,820],{"class":599},[215,1120,935],{"class":823},[215,1122,827],{"class":771},[215,1124,612],{"class":599},[215,1126,1128],{"class":217,"line":1127},21,[215,1129,948],{"class":599},[215,1131,1133,1135],{"class":217,"line":1132},22,[215,1134,827],{"class":596},[215,1136,612],{"class":599},[215,1138,1140],{"class":217,"line":1139},23,[215,1141,721],{"emptyLinePlaceholder":108},[215,1143,1145,1148,1150,1152,1154,1157,1160,1162],{"class":217,"line":1144},24,[215,1146,1147],{"class":683},"onUnmounted",[215,1149,687],{"class":596},[215,1151,690],{"class":599},[215,1153,693],{"class":674},[215,1155,1156],{"class":683}," clearTimer",[215,1158,1159],{"class":596},"())",[215,1161,940],{"class":599},[215,1163,1164],{"class":590}," // 卸载时清理\n",[195,1166,1168],{"id":1167},"_4-用贝塞尔曲线优化体感","4. 用贝塞尔曲线优化体感",[206,1170,1172],{"className":580,"code":1171,"language":583,"meta":211,"style":211},"// cubic-bezier(0.34, 1.56, 0.64, 1) 有轻微弹性回落效果\ntransition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n",[153,1173,1174,1179],{"__ignoreMap":211},[215,1175,1176],{"class":217,"line":218},[215,1177,1178],{"class":590},"// cubic-bezier(0.34, 1.56, 0.64, 1) 有轻微弹性回落效果\n",[215,1180,1181,1184,1186,1189,1191,1194,1197,1200,1202,1205,1207,1210,1212,1215,1217,1220,1222],{"class":217,"line":236},[215,1182,1183],{"class":750},"transition",[215,1185,747],{"class":599},[215,1187,1188],{"class":596}," transform 0",[215,1190,600],{"class":599},[215,1192,1193],{"class":596},"3s cubic",[215,1195,1196],{"class":599},"-",[215,1198,1199],{"class":683},"bezier",[215,1201,687],{"class":596},[215,1203,1204],{"class":823},"0.34",[215,1206,820],{"class":599},[215,1208,1209],{"class":823}," 1.56",[215,1211,820],{"class":599},[215,1213,1214],{"class":823}," 0.64",[215,1216,820],{"class":599},[215,1218,1219],{"class":823}," 1",[215,1221,827],{"class":596},[215,1223,612],{"class":599},[149,1225,1226],{},"参数含义：",[505,1228,1229,1235],{},[305,1230,1231,1234],{},[153,1232,1233],{},"0.34, 1.56","：前半段加速并略微超调",[305,1236,1237,1240],{},[153,1238,1239],{},"0.64, 1","：后半段回落并稳定停住",[145,1242,1243],{"id":1243},"完整组件与特性",[149,1245,1246,1253],{},[1247,1248,1252],"a",{"href":1249,"rel":1250},"https://github.com/qibmz/blog/blob/main/app/components/demo/NumberScroll.vue",[1251],"nofollow","NumberScroll.vue","：可复用的高性能数字滚动组件。",[149,1255,1256],{},"技术栈：",[505,1258,1259,1262,1265],{},[305,1260,1261],{},"Vue 3 Composition API",[305,1263,1264],{},"TypeScript",[305,1266,1267],{},"Tailwind CSS（无需 SCSS）",[149,1269,1270],{},"关键特性：",[505,1272,1273,1276,1279,1282,1285,1288],{},[305,1274,1275],{},"✅ 自动清理定时器，无内存泄漏",[305,1277,1278],{},"✅ 支持小数点和负数",[305,1280,1281],{},"✅ 使用 GPU 友好的 transform 动画",[305,1283,1284],{},"✅ 快速更新时自动取消旧动画",[305,1286,1287],{},"✅ 无外部依赖，样式可直接复用",[305,1289,1290],{},"✅ 支持自定义动画时长",[145,1292,1293],{"id":1293},"性能对比",[345,1295,1296,1312],{},[348,1297,1298],{},[351,1299,1300,1303,1306,1309],{},[354,1301,1302],{},"实现方式",[354,1304,1305],{},"FPS",[354,1307,1308],{},"内存泄漏",[354,1310,1311],{},"响应性",[362,1313,1314,1328,1340],{},[351,1315,1316,1319,1322,1325],{},[367,1317,1318],{},"margin 修改",[367,1320,1321],{},"30-45",[367,1323,1324],{},"有",[367,1326,1327],{},"⚠️ 中等",[351,1329,1330,1333,1336,1338],{},[367,1331,1332],{},"position 修改",[367,1334,1335],{},"45-55",[367,1337,1324],{},[367,1339,1327],{},[351,1341,1342,1346,1351,1356],{},[367,1343,1344],{},[163,1345,573],{},[367,1347,1348],{},[163,1349,1350],{},"55-60",[367,1352,1353],{},[163,1354,1355],{},"无",[367,1357,1358],{},[163,1359,1360],{},"✅ 优秀",[145,1362,1363],{"id":1363},"在线演示",[149,1365,1366,1367,1371],{},"完整交互式演示请访问 ",[1247,1368,1370],{"href":1369},"/playground/number-scroll","🎮 数字滚动动画试炼场","。",[149,1373,1374],{},"你可以在试炼场中：",[505,1376,1377,1380,1383,1386],{},[305,1378,1379],{},"📊 实时观察滚动效果",[305,1381,1382],{},"🎮 切换不同数据场景",[305,1384,1385],{},"📈 对比不同实现策略",[305,1387,1388],{},"🔧 体验组件配置项",[149,1390,1391],{},[1247,1392,1393],{"href":1369},"前往试炼场 →",[145,1395,1396],{"id":1396},"常见问题",[195,1398,1400],{"id":1399},"q1-如何处理负数","Q1: 如何处理负数？",[206,1402,1404],{"className":580,"code":1403,"language":583,"meta":211,"style":211},"// 可以在前面加符号\nconst displayValue = value \u003C 0 ? `-${Math.abs(value)}` : `${value}`;\n",[153,1405,1406,1411],{"__ignoreMap":211},[215,1407,1408],{"class":217,"line":218},[215,1409,1410],{"class":590},"// 可以在前面加符号\n",[215,1412,1413,1415,1418,1420,1423,1426,1429,1432,1435,1437,1440,1443,1445,1448,1451,1454,1457,1460,1462,1464],{"class":217,"line":236},[215,1414,675],{"class":674},[215,1416,1417],{"class":596}," displayValue ",[215,1419,606],{"class":599},[215,1421,1422],{"class":596}," value ",[215,1424,1425],{"class":599},"\u003C",[215,1427,1428],{"class":823}," 0",[215,1430,1431],{"class":599}," ?",[215,1433,1434],{"class":599}," `",[215,1436,1196],{"class":651},[215,1438,1439],{"class":599},"${",[215,1441,1442],{"class":596},"Math",[215,1444,600],{"class":599},[215,1446,1447],{"class":683},"abs",[215,1449,1450],{"class":596},"(value)",[215,1452,1453],{"class":599},"}`",[215,1455,1456],{"class":599}," :",[215,1458,1459],{"class":599}," `${",[215,1461,701],{"class":596},[215,1463,1453],{"class":599},[215,1465,612],{"class":599},[195,1467,1469],{"id":1468},"q2-动画总是要-03s-吗","Q2: 动画总是要 0.3s 吗？",[206,1471,1473],{"className":580,"code":1472,"language":583,"meta":211,"style":211},"// 可以通过 duration prop 自定义\n\u003CNumberScroll :value=\"num\" :duration=\"500\" />\n",[153,1474,1475,1480],{"__ignoreMap":211},[215,1476,1477],{"class":217,"line":218},[215,1478,1479],{"class":590},"// 可以通过 duration prop 自定义\n",[215,1481,1482,1484,1487,1489,1491,1493,1495,1498,1500,1503,1505,1507,1510,1512],{"class":217,"line":236},[215,1483,1425],{"class":599},[215,1485,1486],{"class":750},"NumberScroll",[215,1488,1456],{"class":599},[215,1490,701],{"class":596},[215,1492,606],{"class":599},[215,1494,648],{"class":599},[215,1496,1497],{"class":651},"num",[215,1499,648],{"class":599},[215,1501,1502],{"class":596}," :duration",[215,1504,606],{"class":599},[215,1506,648],{"class":599},[215,1508,1509],{"class":651},"500",[215,1511,648],{"class":599},[215,1513,1514],{"class":599}," />\n",[195,1516,1518],{"id":1517},"q3-如何添加千位分隔符","Q3: 如何添加千位分隔符？",[206,1520,1522],{"className":580,"code":1521,"language":583,"meta":211,"style":211},"const formatted = value.toLocaleString(); // 1,234,567\n// 然后显示格式化后的字符串\n",[153,1523,1524,1547],{"__ignoreMap":211},[215,1525,1526,1528,1531,1533,1535,1537,1540,1542,1544],{"class":217,"line":218},[215,1527,675],{"class":674},[215,1529,1530],{"class":596}," formatted ",[215,1532,606],{"class":599},[215,1534,609],{"class":596},[215,1536,600],{"class":599},[215,1538,1539],{"class":683},"toLocaleString",[215,1541,690],{"class":596},[215,1543,940],{"class":599},[215,1545,1546],{"class":590}," // 1,234,567\n",[215,1548,1549],{"class":217,"line":236},[215,1550,1551],{"class":590},"// 然后显示格式化后的字符串\n",[185,1553],{},[149,1555,1556],{},[163,1557,1558],{},"相关资源：",[505,1560,1561,1567,1574],{},[305,1562,1563],{},[1247,1564,1261],{"href":1565,"rel":1566},"https://vuejs.org/guide/extras/composition-api-faq.html",[1251],[305,1568,1569],{},[1247,1570,1573],{"href":1571,"rel":1572},"https://web.dev/animations-guide/",[1251],"CSS transform 性能",[305,1575,1576],{},[1247,1577,1580],{"href":1578,"rel":1579},"https://cubic-bezier.com/",[1251],"贝塞尔曲线可视化",[158,1582,1583],{},[149,1584,1585],{},"（注：文档内容由 Copilot 生成）",[460,1587,1588],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":211,"searchDepth":236,"depth":236,"links":1590},[1591,1592,1593,1594,1601,1602,1603,1604],{"id":494,"depth":236,"text":494},{"id":500,"depth":236,"text":500},{"id":521,"depth":236,"text":521},{"id":566,"depth":236,"text":566,"children":1595},[1596,1598,1599,1600],{"id":569,"depth":469,"text":1597},"1. 使用 transform 做位移动画",{"id":658,"depth":469,"text":659},{"id":867,"depth":469,"text":868},{"id":1167,"depth":469,"text":1168},{"id":1243,"depth":236,"text":1243},{"id":1293,"depth":236,"text":1293},{"id":1363,"depth":236,"text":1363},{"id":1396,"depth":236,"text":1396,"children":1605},[1606,1607,1608],{"id":1399,"depth":469,"text":1400},{"id":1468,"depth":469,"text":1469},{"id":1517,"depth":469,"text":1518},"2026-02-05T00:00:00.000Z","详解如何用 Vue 3 Composition API 实现高性能的数字滚动动画组件，包含内存优化、性能调优和完整代码实现。",{"src":1612},"https://picsum.photos/id/103/640/360",{},{"title":88,"description":1610},"_cxhunoSkiHU4oKCsGxXYdzaokT6ckWzDJrJvIPF-t0",{"id":1617,"title":84,"authors":1618,"badge":1621,"body":1623,"date":3200,"description":3201,"extension":477,"image":3202,"meta":3204,"navigation":108,"path":85,"seo":3205,"stem":86,"__hash__":3206},"posts/3.blog/7.reown-wagmi-uniapp-issues.md",[1619],{"name":135,"avatar":1620},{"src":138},{"label":1622},"Solution",{"type":142,"value":1624,"toc":3165},[1625,1628,1632,1635,1646,1649,1663,2003,2006,2010,2013,2016,2019,2027,2077,2081,2084,2087,2090,2093,2096,2103,2121,2131,2148,2151,2155,2158,2161,2164,2167,2170,2173,2352,2355,2424,2428,2431,2434,2437,2451,2616,2620,2623,2626,2629,2632,2635,2638,2853,2857,2860,2863,2866,2869,2910,2913,3015,3018,3025,3130,3132,3135,3158,3162],[149,1626,1627],{},"在 UniApp+Vite 项目中集成 Reown 和 Wagmi 实现 Web3 钱包连接时，会遇到一系列打包、兼容性和网络问题。本文总结了实际开发中遇到的问题及对应的解决方案。",[145,1629,1631],{"id":1630},"问题-1wagmi-打包后出现异常文件名","问题 1：Wagmi 打包后出现异常文件名",[195,1633,1634],{"id":1634},"现象",[149,1636,1637,1638,1641,1642,1645],{},"Wagmi 在本地开发环境运行一切正常，但执行 ",[153,1639,1640],{},"build"," 打包后，生成的文件中出现以 ",[153,1643,1644],{},"..node"," 开头的文件，导致引入时报错。",[195,1647,1648],{"id":1648},"解决方案",[149,1650,1651,1652,1655,1656,1658,1659,1662],{},"在 ",[153,1653,1654],{},"vite.config.ts"," 的 ",[153,1657,1640],{}," 配置中添加 ",[153,1660,1661],{},"rollupOptions","，手动控制代码分包策略：",[206,1664,1666],{"className":580,"code":1665,"language":583,"meta":211,"style":211},"export default defineConfig({\n  build: {\n    rollupOptions: {\n      output: {\n        manualChunks: (id) => {\n          if (!id || typeof id !== 'string')\n            return 'vendor'\n          \n          // 统一路径分隔符\n          const normalizedId = id.replace(/\\\\/g, '/')\n          if (!normalizedId.includes('node_modules'))\n            return\n          \n          // 处理 @scope/package 和普通包\n          const match = normalizedId.match(/node_modules\\/(@[^/]+\\/[^/]+|[^/]+)/)\n          return match ? `vendor-${match[1].replace('@', '')}` : 'vendor'\n        },\n      },\n    },\n  },\n})\n",[153,1667,1668,1684,1693,1702,1711,1729,1765,1778,1783,1788,1827,1855,1860,1864,1869,1923,1977,1982,1987,1992,1996],{"__ignoreMap":211},[215,1669,1670,1673,1676,1679,1681],{"class":217,"line":218},[215,1671,1672],{"class":767},"export",[215,1674,1675],{"class":767}," default",[215,1677,1678],{"class":683}," defineConfig",[215,1680,687],{"class":596},[215,1682,1683],{"class":599},"{\n",[215,1685,1686,1689,1691],{"class":217,"line":236},[215,1687,1688],{"class":771},"  build",[215,1690,747],{"class":599},[215,1692,761],{"class":599},[215,1694,1695,1698,1700],{"class":217,"line":469},[215,1696,1697],{"class":771},"    rollupOptions",[215,1699,747],{"class":599},[215,1701,761],{"class":599},[215,1703,1704,1707,1709],{"class":217,"line":724},[215,1705,1706],{"class":771},"      output",[215,1708,747],{"class":599},[215,1710,761],{"class":599},[215,1712,1713,1716,1718,1720,1723,1725,1727],{"class":217,"line":730},[215,1714,1715],{"class":683},"        manualChunks",[215,1717,747],{"class":599},[215,1719,740],{"class":599},[215,1721,1722],{"class":743},"id",[215,1724,827],{"class":599},[215,1726,693],{"class":674},[215,1728,761],{"class":599},[215,1730,1731,1734,1736,1739,1741,1744,1747,1750,1753,1756,1759,1762],{"class":217,"line":764},[215,1732,1733],{"class":767},"          if",[215,1735,740],{"class":771},[215,1737,1738],{"class":599},"!",[215,1740,1722],{"class":596},[215,1742,1743],{"class":599}," ||",[215,1745,1746],{"class":599}," typeof",[215,1748,1749],{"class":596}," id",[215,1751,1752],{"class":599}," !==",[215,1754,1755],{"class":599}," '",[215,1757,1758],{"class":651},"string",[215,1760,1761],{"class":599},"'",[215,1763,1764],{"class":771},")\n",[215,1766,1767,1770,1772,1775],{"class":217,"line":801},[215,1768,1769],{"class":767},"            return",[215,1771,1755],{"class":599},[215,1773,1774],{"class":651},"vendor",[215,1776,1777],{"class":599},"'\n",[215,1779,1780],{"class":217,"line":832},[215,1781,1782],{"class":771},"          \n",[215,1784,1785],{"class":217,"line":861},[215,1786,1787],{"class":590},"          // 统一路径分隔符\n",[215,1789,1790,1793,1796,1798,1800,1802,1805,1807,1809,1812,1814,1817,1819,1821,1823,1825],{"class":217,"line":966},[215,1791,1792],{"class":674},"          const",[215,1794,1795],{"class":596}," normalizedId",[215,1797,810],{"class":599},[215,1799,1749],{"class":596},[215,1801,600],{"class":599},[215,1803,1804],{"class":683},"replace",[215,1806,687],{"class":771},[215,1808,126],{"class":599},[215,1810,1811],{"class":596},"\\\\",[215,1813,126],{"class":599},[215,1815,1816],{"class":823},"g",[215,1818,820],{"class":599},[215,1820,1755],{"class":599},[215,1822,126],{"class":651},[215,1824,1761],{"class":599},[215,1826,1764],{"class":771},[215,1828,1829,1831,1833,1835,1838,1840,1843,1845,1847,1850,1852],{"class":217,"line":1000},[215,1830,1733],{"class":767},[215,1832,740],{"class":771},[215,1834,1738],{"class":599},[215,1836,1837],{"class":596},"normalizedId",[215,1839,600],{"class":599},[215,1841,1842],{"class":683},"includes",[215,1844,687],{"class":771},[215,1846,1761],{"class":599},[215,1848,1849],{"class":651},"node_modules",[215,1851,1761],{"class":599},[215,1853,1854],{"class":771},"))\n",[215,1856,1857],{"class":217,"line":1005},[215,1858,1859],{"class":767},"            return\n",[215,1861,1862],{"class":217,"line":1022},[215,1863,1782],{"class":771},[215,1865,1866],{"class":217,"line":1045},[215,1867,1868],{"class":590},"          // 处理 @scope/package 和普通包\n",[215,1870,1871,1873,1876,1878,1880,1882,1885,1887,1889,1891,1894,1896,1899,1902,1904,1907,1909,1911,1913,1916,1918,1921],{"class":217,"line":1050},[215,1872,1792],{"class":674},[215,1874,1875],{"class":596}," match",[215,1877,810],{"class":599},[215,1879,1795],{"class":596},[215,1881,600],{"class":599},[215,1883,1884],{"class":683},"match",[215,1886,687],{"class":771},[215,1888,126],{"class":599},[215,1890,1849],{"class":651},[215,1892,1893],{"class":596},"\\/",[215,1895,687],{"class":599},[215,1897,1898],{"class":651},"@",[215,1900,1901],{"class":599},"[^",[215,1903,126],{"class":651},[215,1905,1906],{"class":599},"]+",[215,1908,1893],{"class":596},[215,1910,1901],{"class":599},[215,1912,126],{"class":651},[215,1914,1915],{"class":599},"]+|[^",[215,1917,126],{"class":651},[215,1919,1920],{"class":599},"]+)/",[215,1922,1764],{"class":771},[215,1924,1925,1928,1930,1932,1934,1937,1939,1942,1945,1948,1950,1952,1954,1956,1958,1960,1962,1965,1967,1969,1971,1973,1975],{"class":217,"line":1055},[215,1926,1927],{"class":767},"          return",[215,1929,1875],{"class":596},[215,1931,1431],{"class":599},[215,1933,1434],{"class":599},[215,1935,1936],{"class":651},"vendor-",[215,1938,1439],{"class":599},[215,1940,1941],{"class":596},"match[",[215,1943,1944],{"class":823},"1",[215,1946,1947],{"class":596},"]",[215,1949,600],{"class":599},[215,1951,1804],{"class":683},[215,1953,687],{"class":596},[215,1955,1761],{"class":599},[215,1957,1898],{"class":651},[215,1959,1761],{"class":599},[215,1961,820],{"class":599},[215,1963,1964],{"class":599}," ''",[215,1966,827],{"class":596},[215,1968,1453],{"class":599},[215,1970,1456],{"class":599},[215,1972,1755],{"class":599},[215,1974,1774],{"class":651},[215,1976,1777],{"class":599},[215,1978,1979],{"class":217,"line":1062},[215,1980,1981],{"class":599},"        },\n",[215,1983,1984],{"class":217,"line":1077},[215,1985,1986],{"class":599},"      },\n",[215,1988,1989],{"class":217,"line":1086},[215,1990,1991],{"class":599},"    },\n",[215,1993,1994],{"class":217,"line":1099},[215,1995,948],{"class":599},[215,1997,1998,2001],{"class":217,"line":1127},[215,1999,2000],{"class":599},"}",[215,2002,1764],{"class":596},[149,2004,2005],{},"此配置可以避免 Vite 生成异常的文件名，确保所有 node_modules 依赖都被正确打包到独立的 vendor chunk 中。",[145,2007,2009],{"id":2008},"问题-2插件要求-es2020-编译目标","问题 2：插件要求 ES2020 编译目标",[195,2011,1634],{"id":2012},"现象-1",[149,2014,2015],{},"Reown 和 Wagmi 插件在较低的编译目标下无法正常工作。",[195,2017,1648],{"id":2018},"解决方案-1",[149,2020,1651,2021,2023,2024,300],{},[153,2022,1654],{}," 中设置编译目标为 ",[153,2025,2026],{},"es2020",[206,2028,2030],{"className":580,"code":2029,"language":583,"meta":211,"style":211},"export default defineConfig({\n  build: {\n    target: 'es2020',\n  },\n})\n",[153,2031,2032,2044,2052,2067,2071],{"__ignoreMap":211},[215,2033,2034,2036,2038,2040,2042],{"class":217,"line":218},[215,2035,1672],{"class":767},[215,2037,1675],{"class":767},[215,2039,1678],{"class":683},[215,2041,687],{"class":596},[215,2043,1683],{"class":599},[215,2045,2046,2048,2050],{"class":217,"line":236},[215,2047,1688],{"class":771},[215,2049,747],{"class":599},[215,2051,761],{"class":599},[215,2053,2054,2057,2059,2061,2063,2065],{"class":217,"line":469},[215,2055,2056],{"class":771},"    target",[215,2058,747],{"class":599},[215,2060,1755],{"class":599},[215,2062,2026],{"class":651},[215,2064,1761],{"class":599},[215,2066,906],{"class":599},[215,2068,2069],{"class":217,"line":724},[215,2070,948],{"class":599},[215,2072,2073,2075],{"class":217,"line":730},[215,2074,2000],{"class":599},[215,2076,1764],{"class":596},[145,2078,2080],{"id":2079},"问题-3低版本手机无法连接钱包一直转圈","问题 3：低版本手机无法连接钱包（一直转圈）",[195,2082,1634],{"id":2083},"现象-2",[149,2085,2086],{},"在部分低版本 Android/iOS 设备上，Reown 连接钱包时一直显示加载状态，无法完成连接。",[195,2088,2089],{"id":2089},"原因",[149,2091,2092],{},"低版本手机浏览器缺少现代 JavaScript API 的 polyfill 支持。",[195,2094,1648],{"id":2095},"解决方案-2",[149,2097,2098,2099,2102],{},"安装 ",[153,2100,2101],{},"core-js"," 并在项目入口引入完整的 polyfill：",[206,2104,2108],{"className":2105,"code":2106,"language":2107,"meta":211,"style":211},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add core-js\n","bash",[153,2109,2110],{"__ignoreMap":211},[215,2111,2112,2115,2118],{"class":217,"line":218},[215,2113,2114],{"class":750},"pnpm",[215,2116,2117],{"class":651}," add",[215,2119,2120],{"class":651}," core-js\n",[149,2122,1651,2123,2126,2127,2130],{},[153,2124,2125],{},"main.ts"," 或 ",[153,2128,2129],{},"app.ts"," 入口文件顶部添加：",[206,2132,2134],{"className":580,"code":2133,"language":583,"meta":211,"style":211},"import 'core-js/stable'\n",[153,2135,2136],{"__ignoreMap":211},[215,2137,2138,2141,2143,2146],{"class":217,"line":218},[215,2139,2140],{"class":767},"import",[215,2142,1755],{"class":599},[215,2144,2145],{"class":651},"core-js/stable",[215,2147,1777],{"class":599},[149,2149,2150],{},"这将为低版本浏览器提供完整的 ES6+ API polyfill 支持。",[145,2152,2154],{"id":2153},"问题-4写入合约后无法推送到区块链","问题 4：写入合约后无法推送到区块链",[195,2156,1634],{"id":2157},"现象-3",[149,2159,2160],{},"部分手机在执行写入合约操作时，虽然获取到了交易 hash，但交易始终无法推送到区块链网络，停留在 pending 状态。",[195,2162,2089],{"id":2163},"原因-1",[149,2165,2166],{},"Gas 费用估算不准确或未正确设置导致交易无法被矿工打包。",[195,2168,1648],{"id":2169},"解决方案-3",[149,2171,2172],{},"手动获取和设置 Gas 价格参数：",[206,2174,2176],{"className":580,"code":2175,"language":583,"meta":211,"style":211},"import { estimateFeesPerGas } from '@wagmi/core'\n\nexport async function getGasPrice() {\n  const network = useAppKitNetwork()\n  const fees = await estimateFeesPerGas(wagmiAdapter.wagmiConfig, {\n    chainId: Number(network.value.chainId),\n  })\n  const maxFeePerGas = fees.maxFeePerGas\n  const maxPriorityFeePerGas = fees.maxPriorityFeePerGas\n  return { maxFeePerGas, maxPriorityFeePerGas }\n}\n",[153,2177,2178,2201,2205,2222,2237,2265,2293,2300,2316,2332,2347],{"__ignoreMap":211},[215,2179,2180,2182,2185,2188,2191,2194,2196,2199],{"class":217,"line":218},[215,2181,2140],{"class":767},[215,2183,2184],{"class":599}," {",[215,2186,2187],{"class":596}," estimateFeesPerGas",[215,2189,2190],{"class":599}," }",[215,2192,2193],{"class":767}," from",[215,2195,1755],{"class":599},[215,2197,2198],{"class":651},"@wagmi/core",[215,2200,1777],{"class":599},[215,2202,2203],{"class":217,"line":236},[215,2204,721],{"emptyLinePlaceholder":108},[215,2206,2207,2209,2212,2215,2218,2220],{"class":217,"line":469},[215,2208,1672],{"class":767},[215,2210,2211],{"class":674}," async",[215,2213,2214],{"class":674}," function",[215,2216,2217],{"class":683}," getGasPrice",[215,2219,690],{"class":599},[215,2221,761],{"class":599},[215,2223,2224,2226,2229,2231,2234],{"class":217,"line":724},[215,2225,804],{"class":674},[215,2227,2228],{"class":596}," network",[215,2230,810],{"class":599},[215,2232,2233],{"class":683}," useAppKitNetwork",[215,2235,2236],{"class":771},"()\n",[215,2238,2239,2241,2244,2246,2249,2251,2253,2256,2258,2261,2263],{"class":217,"line":730},[215,2240,804],{"class":674},[215,2242,2243],{"class":596}," fees",[215,2245,810],{"class":599},[215,2247,2248],{"class":767}," await",[215,2250,2187],{"class":683},[215,2252,687],{"class":771},[215,2254,2255],{"class":596},"wagmiAdapter",[215,2257,600],{"class":599},[215,2259,2260],{"class":596},"wagmiConfig",[215,2262,820],{"class":599},[215,2264,761],{"class":599},[215,2266,2267,2270,2272,2275,2277,2280,2282,2284,2286,2289,2291],{"class":217,"line":764},[215,2268,2269],{"class":771},"    chainId",[215,2271,747],{"class":599},[215,2273,2274],{"class":683}," Number",[215,2276,687],{"class":771},[215,2278,2279],{"class":596},"network",[215,2281,600],{"class":599},[215,2283,701],{"class":596},[215,2285,600],{"class":599},[215,2287,2288],{"class":596},"chainId",[215,2290,827],{"class":771},[215,2292,906],{"class":599},[215,2294,2295,2298],{"class":217,"line":801},[215,2296,2297],{"class":599},"  }",[215,2299,1764],{"class":771},[215,2301,2302,2304,2307,2309,2311,2313],{"class":217,"line":832},[215,2303,804],{"class":674},[215,2305,2306],{"class":596}," maxFeePerGas",[215,2308,810],{"class":599},[215,2310,2243],{"class":596},[215,2312,600],{"class":599},[215,2314,2315],{"class":596},"maxFeePerGas\n",[215,2317,2318,2320,2323,2325,2327,2329],{"class":217,"line":861},[215,2319,804],{"class":674},[215,2321,2322],{"class":596}," maxPriorityFeePerGas",[215,2324,810],{"class":599},[215,2326,2243],{"class":596},[215,2328,600],{"class":599},[215,2330,2331],{"class":596},"maxPriorityFeePerGas\n",[215,2333,2334,2336,2338,2340,2342,2344],{"class":217,"line":966},[215,2335,835],{"class":767},[215,2337,2184],{"class":599},[215,2339,2306],{"class":596},[215,2341,820],{"class":599},[215,2343,2322],{"class":596},[215,2345,2346],{"class":599}," }\n",[215,2348,2349],{"class":217,"line":1000},[215,2350,2351],{"class":599},"}\n",[149,2353,2354],{},"在写入合约时传入这两个参数：",[206,2356,2358],{"className":580,"code":2357,"language":583,"meta":211,"style":211},"const { maxFeePerGas, maxPriorityFeePerGas } = await getGasPrice()\n\nawait writeContract({\n  // ... 其他参数\n  maxFeePerGas,\n  maxPriorityFeePerGas,\n})\n",[153,2359,2360,2383,2387,2399,2404,2411,2418],{"__ignoreMap":211},[215,2361,2362,2364,2366,2368,2370,2373,2375,2377,2379,2381],{"class":217,"line":218},[215,2363,675],{"class":674},[215,2365,2184],{"class":599},[215,2367,2306],{"class":596},[215,2369,820],{"class":599},[215,2371,2372],{"class":596}," maxPriorityFeePerGas ",[215,2374,2000],{"class":599},[215,2376,810],{"class":599},[215,2378,2248],{"class":767},[215,2380,2217],{"class":683},[215,2382,2236],{"class":596},[215,2384,2385],{"class":217,"line":236},[215,2386,721],{"emptyLinePlaceholder":108},[215,2388,2389,2392,2395,2397],{"class":217,"line":469},[215,2390,2391],{"class":767},"await",[215,2393,2394],{"class":683}," writeContract",[215,2396,687],{"class":596},[215,2398,1683],{"class":599},[215,2400,2401],{"class":217,"line":724},[215,2402,2403],{"class":590},"  // ... 其他参数\n",[215,2405,2406,2409],{"class":217,"line":730},[215,2407,2408],{"class":596},"  maxFeePerGas",[215,2410,906],{"class":599},[215,2412,2413,2416],{"class":217,"line":764},[215,2414,2415],{"class":596},"  maxPriorityFeePerGas",[215,2417,906],{"class":599},[215,2419,2420,2422],{"class":217,"line":801},[215,2421,2000],{"class":599},[215,2423,1764],{"class":596},[145,2425,2427],{"id":2426},"问题-5reown-默认-rpc-国内无法访问","问题 5：Reown 默认 RPC 国内无法访问",[195,2429,1634],{"id":2430},"现象-4",[149,2432,2433],{},"Reown 默认使用的 RPC 节点在国内网络环境下无法访问，导致无法连接区块链网络。",[195,2435,1648],{"id":2436},"解决方案-4",[149,2438,2439,2440,2442,2443,2446,2447,2450],{},"在初始化 ",[153,2441,2255],{}," 和 ",[153,2444,2445],{},"createAppKit"," 时添加 ",[153,2448,2449],{},"customRpcUrls"," 参数，使用国内可访问的 RPC 节点：",[206,2452,2454],{"className":580,"code":2453,"language":583,"meta":211,"style":211},"const wagmiAdapter = new WagmiAdapter({\n  // ... 其他配置\n  customRpcUrls: {\n    1: 'https://your-custom-rpc-url.com', // Ethereum Mainnet\n    56: 'https://bsc-dataseed.binance.org', // BSC\n    // 添加更多链的自定义 RPC\n  },\n})\n\ncreateAppKit({\n  adapters: [wagmiAdapter],\n  // ... 其他配置\n  customRpcUrls: {\n    1: 'https://your-custom-rpc-url.com',\n    56: 'https://bsc-dataseed.binance.org',\n  },\n})\n",[153,2455,2456,2475,2480,2489,2508,2527,2532,2536,2542,2546,2554,2566,2570,2578,2592,2606,2610],{"__ignoreMap":211},[215,2457,2458,2460,2463,2465,2468,2471,2473],{"class":217,"line":218},[215,2459,675],{"class":674},[215,2461,2462],{"class":596}," wagmiAdapter ",[215,2464,606],{"class":599},[215,2466,2467],{"class":599}," new",[215,2469,2470],{"class":683}," WagmiAdapter",[215,2472,687],{"class":596},[215,2474,1683],{"class":599},[215,2476,2477],{"class":217,"line":236},[215,2478,2479],{"class":590},"  // ... 其他配置\n",[215,2481,2482,2485,2487],{"class":217,"line":469},[215,2483,2484],{"class":771},"  customRpcUrls",[215,2486,747],{"class":599},[215,2488,761],{"class":599},[215,2490,2491,2494,2496,2498,2501,2503,2505],{"class":217,"line":724},[215,2492,2493],{"class":823},"    1",[215,2495,747],{"class":599},[215,2497,1755],{"class":599},[215,2499,2500],{"class":651},"https://your-custom-rpc-url.com",[215,2502,1761],{"class":599},[215,2504,820],{"class":599},[215,2506,2507],{"class":590}," // Ethereum Mainnet\n",[215,2509,2510,2513,2515,2517,2520,2522,2524],{"class":217,"line":730},[215,2511,2512],{"class":823},"    56",[215,2514,747],{"class":599},[215,2516,1755],{"class":599},[215,2518,2519],{"class":651},"https://bsc-dataseed.binance.org",[215,2521,1761],{"class":599},[215,2523,820],{"class":599},[215,2525,2526],{"class":590}," // BSC\n",[215,2528,2529],{"class":217,"line":764},[215,2530,2531],{"class":590},"    // 添加更多链的自定义 RPC\n",[215,2533,2534],{"class":217,"line":801},[215,2535,948],{"class":599},[215,2537,2538,2540],{"class":217,"line":832},[215,2539,2000],{"class":599},[215,2541,1764],{"class":596},[215,2543,2544],{"class":217,"line":861},[215,2545,721],{"emptyLinePlaceholder":108},[215,2547,2548,2550,2552],{"class":217,"line":966},[215,2549,2445],{"class":683},[215,2551,687],{"class":596},[215,2553,1683],{"class":599},[215,2555,2556,2559,2561,2564],{"class":217,"line":1000},[215,2557,2558],{"class":771},"  adapters",[215,2560,747],{"class":599},[215,2562,2563],{"class":596}," [wagmiAdapter]",[215,2565,906],{"class":599},[215,2567,2568],{"class":217,"line":1005},[215,2569,2479],{"class":590},[215,2571,2572,2574,2576],{"class":217,"line":1022},[215,2573,2484],{"class":771},[215,2575,747],{"class":599},[215,2577,761],{"class":599},[215,2579,2580,2582,2584,2586,2588,2590],{"class":217,"line":1045},[215,2581,2493],{"class":823},[215,2583,747],{"class":599},[215,2585,1755],{"class":599},[215,2587,2500],{"class":651},[215,2589,1761],{"class":599},[215,2591,906],{"class":599},[215,2593,2594,2596,2598,2600,2602,2604],{"class":217,"line":1050},[215,2595,2512],{"class":823},[215,2597,747],{"class":599},[215,2599,1755],{"class":599},[215,2601,2519],{"class":651},[215,2603,1761],{"class":599},[215,2605,906],{"class":599},[215,2607,2608],{"class":217,"line":1055},[215,2609,948],{"class":599},[215,2611,2612,2614],{"class":217,"line":1062},[215,2613,2000],{"class":599},[215,2615,1764],{"class":596},[145,2617,2619],{"id":2618},"问题-6typescript-报错实例化过深","问题 6：TypeScript 报错\"实例化过深\"",[195,2621,1634],{"id":2622},"现象-5",[149,2624,2625],{},"在读写合约方法时，TypeScript 提示 \"Type instantiation is excessively deep and possibly infinite\"。",[195,2627,2089],{"id":2628},"原因-2",[149,2630,2631],{},"完整的合约 ABI 文件过大，TypeScript 在进行类型推断时超出递归深度限制。",[195,2633,1648],{"id":2634},"解决方案-5",[149,2636,2637],{},"不要存储完整的 ABI，只保留项目实际使用的方法：",[206,2639,2641],{"className":580,"code":2640,"language":583,"meta":211,"style":211},"// ❌ 不要这样做\nimport fullABI from './contract-full-abi.json'\n\n// ✅ 应该这样做\nconst contractABI = [\n  {\n    name: 'transfer',\n    type: 'function',\n    inputs: [\n      { name: 'to', type: 'address' },\n      { name: 'amount', type: 'uint256' },\n    ],\n    outputs: [{ type: 'bool' }],\n  },\n  // 只包含项目需要使用的方法\n] as const\n",[153,2642,2643,2648,2665,2669,2674,2686,2691,2707,2723,2732,2766,2796,2803,2833,2837,2842],{"__ignoreMap":211},[215,2644,2645],{"class":217,"line":218},[215,2646,2647],{"class":590},"// ❌ 不要这样做\n",[215,2649,2650,2652,2655,2658,2660,2663],{"class":217,"line":236},[215,2651,2140],{"class":767},[215,2653,2654],{"class":596}," fullABI ",[215,2656,2657],{"class":767},"from",[215,2659,1755],{"class":599},[215,2661,2662],{"class":651},"./contract-full-abi.json",[215,2664,1777],{"class":599},[215,2666,2667],{"class":217,"line":469},[215,2668,721],{"emptyLinePlaceholder":108},[215,2670,2671],{"class":217,"line":724},[215,2672,2673],{"class":590},"// ✅ 应该这样做\n",[215,2675,2676,2678,2681,2683],{"class":217,"line":730},[215,2677,675],{"class":674},[215,2679,2680],{"class":596}," contractABI ",[215,2682,606],{"class":599},[215,2684,2685],{"class":596}," [\n",[215,2687,2688],{"class":217,"line":764},[215,2689,2690],{"class":599},"  {\n",[215,2692,2693,2696,2698,2700,2703,2705],{"class":217,"line":801},[215,2694,2695],{"class":771},"    name",[215,2697,747],{"class":599},[215,2699,1755],{"class":599},[215,2701,2702],{"class":651},"transfer",[215,2704,1761],{"class":599},[215,2706,906],{"class":599},[215,2708,2709,2712,2714,2716,2719,2721],{"class":217,"line":832},[215,2710,2711],{"class":771},"    type",[215,2713,747],{"class":599},[215,2715,1755],{"class":599},[215,2717,2718],{"class":651},"function",[215,2720,1761],{"class":599},[215,2722,906],{"class":599},[215,2724,2725,2728,2730],{"class":217,"line":861},[215,2726,2727],{"class":771},"    inputs",[215,2729,747],{"class":599},[215,2731,2685],{"class":596},[215,2733,2734,2737,2740,2742,2744,2747,2749,2751,2754,2756,2758,2761,2763],{"class":217,"line":966},[215,2735,2736],{"class":599},"      {",[215,2738,2739],{"class":771}," name",[215,2741,747],{"class":599},[215,2743,1755],{"class":599},[215,2745,2746],{"class":651},"to",[215,2748,1761],{"class":599},[215,2750,820],{"class":599},[215,2752,2753],{"class":771}," type",[215,2755,747],{"class":599},[215,2757,1755],{"class":599},[215,2759,2760],{"class":651},"address",[215,2762,1761],{"class":599},[215,2764,2765],{"class":599}," },\n",[215,2767,2768,2770,2772,2774,2776,2779,2781,2783,2785,2787,2789,2792,2794],{"class":217,"line":1000},[215,2769,2736],{"class":599},[215,2771,2739],{"class":771},[215,2773,747],{"class":599},[215,2775,1755],{"class":599},[215,2777,2778],{"class":651},"amount",[215,2780,1761],{"class":599},[215,2782,820],{"class":599},[215,2784,2753],{"class":771},[215,2786,747],{"class":599},[215,2788,1755],{"class":599},[215,2790,2791],{"class":651},"uint256",[215,2793,1761],{"class":599},[215,2795,2765],{"class":599},[215,2797,2798,2801],{"class":217,"line":1005},[215,2799,2800],{"class":596},"    ]",[215,2802,906],{"class":599},[215,2804,2805,2808,2810,2813,2816,2818,2820,2822,2825,2827,2829,2831],{"class":217,"line":1022},[215,2806,2807],{"class":771},"    outputs",[215,2809,747],{"class":599},[215,2811,2812],{"class":596}," [",[215,2814,2815],{"class":599},"{",[215,2817,2753],{"class":771},[215,2819,747],{"class":599},[215,2821,1755],{"class":599},[215,2823,2824],{"class":651},"bool",[215,2826,1761],{"class":599},[215,2828,2190],{"class":599},[215,2830,1947],{"class":596},[215,2832,906],{"class":599},[215,2834,2835],{"class":217,"line":1045},[215,2836,948],{"class":599},[215,2838,2839],{"class":217,"line":1050},[215,2840,2841],{"class":590},"  // 只包含项目需要使用的方法\n",[215,2843,2844,2847,2850],{"class":217,"line":1055},[215,2845,2846],{"class":596},"] ",[215,2848,2849],{"class":767},"as",[215,2851,2852],{"class":674}," const\n",[145,2854,2856],{"id":2855},"问题-7浮点数计算精度损失","问题 7：浮点数计算精度损失",[195,2858,1634],{"id":2859},"现象-6",[149,2861,2862],{},"在处理 Token 金额、价格计算等涉及浮点数的场景时，JavaScript 原生运算会导致精度损失。",[195,2864,1648],{"id":2865},"解决方案-6",[149,2867,2868],{},"使用专门的大数库处理计算和判断：",[206,2870,2872],{"className":2105,"code":2871,"language":2107,"meta":211,"style":211},"pnpm add big.js\n# 或者\npnpm add bignumber.js\n# 或者\npnpm add decimal.js\n",[153,2873,2874,2883,2888,2897,2901],{"__ignoreMap":211},[215,2875,2876,2878,2880],{"class":217,"line":218},[215,2877,2114],{"class":750},[215,2879,2117],{"class":651},[215,2881,2882],{"class":651}," big.js\n",[215,2884,2885],{"class":217,"line":236},[215,2886,2887],{"class":590},"# 或者\n",[215,2889,2890,2892,2894],{"class":217,"line":469},[215,2891,2114],{"class":750},[215,2893,2117],{"class":651},[215,2895,2896],{"class":651}," bignumber.js\n",[215,2898,2899],{"class":217,"line":724},[215,2900,2887],{"class":590},[215,2902,2903,2905,2907],{"class":217,"line":730},[215,2904,2114],{"class":750},[215,2906,2117],{"class":651},[215,2908,2909],{"class":651}," decimal.js\n",[149,2911,2912],{},"示例：",[206,2914,2916],{"className":580,"code":2915,"language":583,"meta":211,"style":211},"import Big from 'big.js'\n\n// 使用 Big.js 进行精确计算\nconst amount1 = new Big('0.1')\nconst amount2 = new Big('0.2')\nconst result = amount1.plus(amount2) // 0.3（精确）\n",[153,2917,2918,2934,2938,2943,2968,2992],{"__ignoreMap":211},[215,2919,2920,2922,2925,2927,2929,2932],{"class":217,"line":218},[215,2921,2140],{"class":767},[215,2923,2924],{"class":596}," Big ",[215,2926,2657],{"class":767},[215,2928,1755],{"class":599},[215,2930,2931],{"class":651},"big.js",[215,2933,1777],{"class":599},[215,2935,2936],{"class":217,"line":236},[215,2937,721],{"emptyLinePlaceholder":108},[215,2939,2940],{"class":217,"line":469},[215,2941,2942],{"class":590},"// 使用 Big.js 进行精确计算\n",[215,2944,2945,2947,2950,2952,2954,2957,2959,2961,2964,2966],{"class":217,"line":724},[215,2946,675],{"class":674},[215,2948,2949],{"class":596}," amount1 ",[215,2951,606],{"class":599},[215,2953,2467],{"class":599},[215,2955,2956],{"class":683}," Big",[215,2958,687],{"class":596},[215,2960,1761],{"class":599},[215,2962,2963],{"class":651},"0.1",[215,2965,1761],{"class":599},[215,2967,1764],{"class":596},[215,2969,2970,2972,2975,2977,2979,2981,2983,2985,2988,2990],{"class":217,"line":730},[215,2971,675],{"class":674},[215,2973,2974],{"class":596}," amount2 ",[215,2976,606],{"class":599},[215,2978,2467],{"class":599},[215,2980,2956],{"class":683},[215,2982,687],{"class":596},[215,2984,1761],{"class":599},[215,2986,2987],{"class":651},"0.2",[215,2989,1761],{"class":599},[215,2991,1764],{"class":596},[215,2993,2994,2996,2999,3001,3004,3006,3009,3012],{"class":217,"line":764},[215,2995,675],{"class":674},[215,2997,2998],{"class":596}," result ",[215,3000,606],{"class":599},[215,3002,3003],{"class":596}," amount1",[215,3005,600],{"class":599},[215,3007,3008],{"class":683},"plus",[215,3010,3011],{"class":596},"(amount2) ",[215,3013,3014],{"class":590},"// 0.3（精确）\n",[195,3016,3017],{"id":3017},"金额转换",[149,3019,3020,3021,3024],{},"使用 ",[153,3022,3023],{},"viem"," 提供的工具函数处理 Token 金额转换：",[206,3026,3028],{"className":580,"code":3027,"language":583,"meta":211,"style":211},"import { formatUnits, parseUnits } from 'viem'\n\n// 将 wei 转换为可读单位\nconst displayAmount = formatUnits(1000000000000000000n, 18) // \"1\"\n\n// 将可读单位转换为 wei\nconst weiAmount = parseUnits('1.5', 18) // 1500000000000000000n\n",[153,3029,3030,3054,3058,3063,3092,3096,3101],{"__ignoreMap":211},[215,3031,3032,3034,3036,3039,3041,3044,3046,3048,3050,3052],{"class":217,"line":218},[215,3033,2140],{"class":767},[215,3035,2184],{"class":599},[215,3037,3038],{"class":596}," formatUnits",[215,3040,820],{"class":599},[215,3042,3043],{"class":596}," parseUnits",[215,3045,2190],{"class":599},[215,3047,2193],{"class":767},[215,3049,1755],{"class":599},[215,3051,3023],{"class":651},[215,3053,1777],{"class":599},[215,3055,3056],{"class":217,"line":236},[215,3057,721],{"emptyLinePlaceholder":108},[215,3059,3060],{"class":217,"line":469},[215,3061,3062],{"class":590},"// 将 wei 转换为可读单位\n",[215,3064,3065,3067,3070,3072,3074,3076,3079,3082,3084,3087,3089],{"class":217,"line":724},[215,3066,675],{"class":674},[215,3068,3069],{"class":596}," displayAmount ",[215,3071,606],{"class":599},[215,3073,3038],{"class":683},[215,3075,687],{"class":596},[215,3077,3078],{"class":823},"1000000000000000000",[215,3080,3081],{"class":674},"n",[215,3083,820],{"class":599},[215,3085,3086],{"class":823}," 18",[215,3088,786],{"class":596},[215,3090,3091],{"class":590},"// \"1\"\n",[215,3093,3094],{"class":217,"line":730},[215,3095,721],{"emptyLinePlaceholder":108},[215,3097,3098],{"class":217,"line":764},[215,3099,3100],{"class":590},"// 将可读单位转换为 wei\n",[215,3102,3103,3105,3108,3110,3112,3114,3116,3119,3121,3123,3125,3127],{"class":217,"line":801},[215,3104,675],{"class":674},[215,3106,3107],{"class":596}," weiAmount ",[215,3109,606],{"class":599},[215,3111,3043],{"class":683},[215,3113,687],{"class":596},[215,3115,1761],{"class":599},[215,3117,3118],{"class":651},"1.5",[215,3120,1761],{"class":599},[215,3122,820],{"class":599},[215,3124,3086],{"class":823},[215,3126,786],{"class":596},[215,3128,3129],{"class":590},"// 1500000000000000000n\n",[145,3131,445],{"id":445},[149,3133,3134],{},"集成 Reown 和 Wagmi 到 UniApp+Vite 项目需要注意：",[302,3136,3137,3140,3143,3146,3149,3152,3155],{},[305,3138,3139],{},"配置正确的 Vite 打包策略避免文件名异常",[305,3141,3142],{},"设置 ES2020 编译目标以支持现代特性",[305,3144,3145],{},"为低版本设备添加 polyfill 支持",[305,3147,3148],{},"手动设置 Gas 参数确保交易成功",[305,3150,3151],{},"使用自定义 RPC 节点解决网络访问问题",[305,3153,3154],{},"精简 ABI 避免 TypeScript 类型推断问题",[305,3156,3157],{},"使用专业库处理浮点数和大数运算",[158,3159,3160],{},[149,3161,1585],{},[460,3163,3164],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":211,"searchDepth":236,"depth":236,"links":3166},[3167,3171,3175,3180,3185,3189,3194,3199],{"id":1630,"depth":236,"text":1631,"children":3168},[3169,3170],{"id":1634,"depth":469,"text":1634},{"id":1648,"depth":469,"text":1648},{"id":2008,"depth":236,"text":2009,"children":3172},[3173,3174],{"id":2012,"depth":469,"text":1634},{"id":2018,"depth":469,"text":1648},{"id":2079,"depth":236,"text":2080,"children":3176},[3177,3178,3179],{"id":2083,"depth":469,"text":1634},{"id":2089,"depth":469,"text":2089},{"id":2095,"depth":469,"text":1648},{"id":2153,"depth":236,"text":2154,"children":3181},[3182,3183,3184],{"id":2157,"depth":469,"text":1634},{"id":2163,"depth":469,"text":2089},{"id":2169,"depth":469,"text":1648},{"id":2426,"depth":236,"text":2427,"children":3186},[3187,3188],{"id":2430,"depth":469,"text":1634},{"id":2436,"depth":469,"text":1648},{"id":2618,"depth":236,"text":2619,"children":3190},[3191,3192,3193],{"id":2622,"depth":469,"text":1634},{"id":2628,"depth":469,"text":2089},{"id":2634,"depth":469,"text":1648},{"id":2855,"depth":236,"text":2856,"children":3195},[3196,3197,3198],{"id":2859,"depth":469,"text":1634},{"id":2865,"depth":469,"text":1648},{"id":3017,"depth":469,"text":3017},{"id":445,"depth":236,"text":445},"2026-01-22T00:00:00.000Z","在 UniApp+Vite 框架中集成 Reown 和 Wagmi 时遇到的打包、兼容性、RPC 访问等常见问题及完整解决方案。",{"src":3203},"https://picsum.photos/id/201/640/360",{},{"title":84,"description":3201},"Y1opWWDEehxJVkftx2KvQ9DJo7okFEFg5wo8SZd9gdA",{"id":3208,"title":80,"authors":3209,"badge":3212,"body":3214,"date":5424,"description":5425,"extension":477,"image":5426,"meta":5428,"navigation":108,"path":81,"seo":5429,"stem":82,"__hash__":5430},"posts/3.blog/6.nuxt-echarts-implementation.md",[3210],{"name":135,"avatar":3211},{"src":138},{"label":3213},"Tutorial",{"type":142,"value":3215,"toc":5412},[3216,3223,3227,3230,3251,3261,3265,3275,3454,3465,3469,3476,4023,4042,4046,4049,4314,4317,4320,5174,5176,5180,5197,5201,5383,5386,5402,5405,5409],[149,3217,3218,3219,3222],{},"在Nuxt项目中使用ECharts可以快速实现数据可视化。",[153,3220,3221],{},"nuxt-echarts","模块为Nuxt提供了开箱即用的ECharts集成方案，本文将介绍完整的集成步骤。",[145,3224,3226],{"id":3225},"第一步安装nuxt-echarts模块","第一步：安装nuxt-echarts模块",[149,3228,3229],{},"使用Nuxt CLI快速添加echarts模块：",[206,3231,3233],{"className":2105,"code":3232,"language":2107,"meta":211,"style":211},"npx nuxi module add echarts\n",[153,3234,3235],{"__ignoreMap":211},[215,3236,3237,3240,3243,3246,3248],{"class":217,"line":218},[215,3238,3239],{"class":750},"npx",[215,3241,3242],{"class":651}," nuxi",[215,3244,3245],{"class":651}," module",[215,3247,2117],{"class":651},[215,3249,3250],{"class":651}," echarts\n",[149,3252,3253,3254,3256,3257,3260],{},"该命令会自动将",[153,3255,3221],{},"添加到项目依赖并在",[153,3258,3259],{},"nuxt.config.ts","中注册模块。",[145,3262,3264],{"id":3263},"第二步配置所需的echarts模块必须","第二步：配置所需的ECharts模块（必须）",[149,3266,3267,3268,3270,3271,3274],{},"在",[153,3269,3259],{},"中添加echarts配置，",[163,3272,3273],{},"必须显式声明","要使用的图表类型和组件：",[206,3276,3278],{"className":580,"code":3277,"language":583,"meta":211,"style":211},"export default defineNuxtConfig({\n  modules: [\n    'nuxt-echarts'\n  ],\n  echarts: {\n    // 指定需要的图表类型\n    charts: ['PieChart', 'BarChart', 'LineChart'],\n    // 指定需要的组件\n    components: [\n      'DatasetComponent',\n      'GridComponent',\n      'TooltipComponent',\n      'LegendComponent',\n      'TitleComponent'\n    ]\n  }\n})\n",[153,3279,3280,3293,3302,3311,3318,3327,3332,3370,3375,3384,3396,3407,3418,3429,3438,3443,3448],{"__ignoreMap":211},[215,3281,3282,3284,3286,3289,3291],{"class":217,"line":218},[215,3283,1672],{"class":767},[215,3285,1675],{"class":767},[215,3287,3288],{"class":683}," defineNuxtConfig",[215,3290,687],{"class":596},[215,3292,1683],{"class":599},[215,3294,3295,3298,3300],{"class":217,"line":236},[215,3296,3297],{"class":771},"  modules",[215,3299,747],{"class":599},[215,3301,2685],{"class":596},[215,3303,3304,3307,3309],{"class":217,"line":469},[215,3305,3306],{"class":599},"    '",[215,3308,3221],{"class":651},[215,3310,1777],{"class":599},[215,3312,3313,3316],{"class":217,"line":724},[215,3314,3315],{"class":596},"  ]",[215,3317,906],{"class":599},[215,3319,3320,3323,3325],{"class":217,"line":730},[215,3321,3322],{"class":771},"  echarts",[215,3324,747],{"class":599},[215,3326,761],{"class":599},[215,3328,3329],{"class":217,"line":764},[215,3330,3331],{"class":590},"    // 指定需要的图表类型\n",[215,3333,3334,3337,3339,3341,3343,3346,3348,3350,3352,3355,3357,3359,3361,3364,3366,3368],{"class":217,"line":801},[215,3335,3336],{"class":771},"    charts",[215,3338,747],{"class":599},[215,3340,2812],{"class":596},[215,3342,1761],{"class":599},[215,3344,3345],{"class":651},"PieChart",[215,3347,1761],{"class":599},[215,3349,820],{"class":599},[215,3351,1755],{"class":599},[215,3353,3354],{"class":651},"BarChart",[215,3356,1761],{"class":599},[215,3358,820],{"class":599},[215,3360,1755],{"class":599},[215,3362,3363],{"class":651},"LineChart",[215,3365,1761],{"class":599},[215,3367,1947],{"class":596},[215,3369,906],{"class":599},[215,3371,3372],{"class":217,"line":832},[215,3373,3374],{"class":590},"    // 指定需要的组件\n",[215,3376,3377,3380,3382],{"class":217,"line":861},[215,3378,3379],{"class":771},"    components",[215,3381,747],{"class":599},[215,3383,2685],{"class":596},[215,3385,3386,3389,3392,3394],{"class":217,"line":966},[215,3387,3388],{"class":599},"      '",[215,3390,3391],{"class":651},"DatasetComponent",[215,3393,1761],{"class":599},[215,3395,906],{"class":599},[215,3397,3398,3400,3403,3405],{"class":217,"line":1000},[215,3399,3388],{"class":599},[215,3401,3402],{"class":651},"GridComponent",[215,3404,1761],{"class":599},[215,3406,906],{"class":599},[215,3408,3409,3411,3414,3416],{"class":217,"line":1005},[215,3410,3388],{"class":599},[215,3412,3413],{"class":651},"TooltipComponent",[215,3415,1761],{"class":599},[215,3417,906],{"class":599},[215,3419,3420,3422,3425,3427],{"class":217,"line":1022},[215,3421,3388],{"class":599},[215,3423,3424],{"class":651},"LegendComponent",[215,3426,1761],{"class":599},[215,3428,906],{"class":599},[215,3430,3431,3433,3436],{"class":217,"line":1045},[215,3432,3388],{"class":599},[215,3434,3435],{"class":651},"TitleComponent",[215,3437,1777],{"class":599},[215,3439,3440],{"class":217,"line":1050},[215,3441,3442],{"class":596},"    ]\n",[215,3444,3445],{"class":217,"line":1055},[215,3446,3447],{"class":599},"  }\n",[215,3449,3450,3452],{"class":217,"line":1062},[215,3451,2000],{"class":599},[215,3453,1764],{"class":596},[3455,3456,3459],"callout",{"color":3457,"icon":3458},"warning","i-heroicons-exclamation-triangle",[149,3460,3461,3462,3464],{},"注意：",[153,3463,3221],{},"采用按需加载机制，只会打包你声明的图表和组件，未声明的功能将无法使用。",[145,3466,3468],{"id":3467},"第三步在页面中使用vchart组件","第三步：在页面中使用VChart组件",[149,3470,3471,3472,3475],{},"使用",[153,3473,3474],{},"\u003Cclient-only>","包裹图表组件，因为ECharts依赖浏览器环境：",[206,3477,3481],{"className":3478,"code":3479,"language":3480,"meta":211,"style":211},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate> \n  \u003Cdiv>\n    \u003Ch1>图表示例\u003C/h1>\n    \u003Cclient-only>\n      \u003CVChart :option=\"option\" style=\"height: 400px;\" />\n    \u003C/client-only>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { Option } from 'nuxt-echarts/runtime/types'\n\nconst option = ref\u003COption>({\n  title: {\n    text: '示例饼图'\n  },\n  tooltip: {\n    trigger: 'item'\n  },\n  legend: {\n    orient: 'vertical',\n    left: 'left'\n  },\n  series: [\n    {\n      name: '访问来源',\n      type: 'pie',\n      radius: '50%',\n      data: [\n        { value: 1048, name: '搜索引擎' },\n        { value: 735, name: '直接访问' },\n        { value: 580, name: '邮件营销' },\n        { value: 484, name: '联盟广告' },\n        { value: 300, name: '视频广告' }\n      ]\n    }\n  ]\n})\n\u003C/script>\n","vue",[153,3482,3483,3495,3506,3526,3535,3579,3588,3597,3605,3609,3632,3654,3658,3681,3690,3704,3708,3717,3731,3735,3744,3760,3773,3777,3786,3792,3809,3826,3843,3853,3881,3908,3935,3962,3989,3995,4001,4007,4014],{"__ignoreMap":211},[215,3484,3485,3487,3490,3492],{"class":217,"line":218},[215,3486,1425],{"class":599},[215,3488,3489],{"class":771},"template",[215,3491,986],{"class":599},[215,3493,3494],{"class":596}," \n",[215,3496,3497,3500,3503],{"class":217,"line":236},[215,3498,3499],{"class":599},"  \u003C",[215,3501,3502],{"class":771},"div",[215,3504,3505],{"class":599},">\n",[215,3507,3508,3511,3514,3516,3519,3522,3524],{"class":217,"line":469},[215,3509,3510],{"class":599},"    \u003C",[215,3512,3513],{"class":771},"h1",[215,3515,986],{"class":599},[215,3517,3518],{"class":596},"图表示例",[215,3520,3521],{"class":599},"\u003C/",[215,3523,3513],{"class":771},[215,3525,3505],{"class":599},[215,3527,3528,3530,3533],{"class":217,"line":724},[215,3529,3510],{"class":599},[215,3531,3532],{"class":771},"client-only",[215,3534,3505],{"class":599},[215,3536,3537,3540,3543,3545,3548,3550,3552,3554,3556,3559,3561,3563,3567,3570,3573,3575,3577],{"class":217,"line":730},[215,3538,3539],{"class":599},"      \u003C",[215,3541,3542],{"class":771},"VChart",[215,3544,1456],{"class":599},[215,3546,3547],{"class":674},"option",[215,3549,606],{"class":599},[215,3551,648],{"class":599},[215,3553,3547],{"class":596},[215,3555,648],{"class":599},[215,3557,3558],{"class":674}," style",[215,3560,606],{"class":599},[215,3562,648],{"class":599},[215,3564,3566],{"class":3565},"sqsOY","height",[215,3568,3569],{"class":599},": ",[215,3571,3572],{"class":823},"400px",[215,3574,940],{"class":599},[215,3576,648],{"class":599},[215,3578,1514],{"class":599},[215,3580,3581,3584,3586],{"class":217,"line":764},[215,3582,3583],{"class":599},"    \u003C/",[215,3585,3532],{"class":771},[215,3587,3505],{"class":599},[215,3589,3590,3593,3595],{"class":217,"line":801},[215,3591,3592],{"class":599},"  \u003C/",[215,3594,3502],{"class":771},[215,3596,3505],{"class":599},[215,3598,3599,3601,3603],{"class":217,"line":832},[215,3600,3521],{"class":599},[215,3602,3489],{"class":771},[215,3604,3505],{"class":599},[215,3606,3607],{"class":217,"line":861},[215,3608,721],{"emptyLinePlaceholder":108},[215,3610,3611,3613,3616,3619,3622,3624,3626,3628,3630],{"class":217,"line":966},[215,3612,1425],{"class":599},[215,3614,3615],{"class":771},"script",[215,3617,3618],{"class":674}," setup",[215,3620,3621],{"class":674}," lang",[215,3623,606],{"class":599},[215,3625,648],{"class":599},[215,3627,583],{"class":651},[215,3629,648],{"class":599},[215,3631,3505],{"class":599},[215,3633,3634,3636,3638,3640,3643,3645,3647,3649,3652],{"class":217,"line":1000},[215,3635,2140],{"class":767},[215,3637,2753],{"class":767},[215,3639,2184],{"class":599},[215,3641,3642],{"class":596}," Option",[215,3644,2190],{"class":599},[215,3646,2193],{"class":767},[215,3648,1755],{"class":599},[215,3650,3651],{"class":651},"nuxt-echarts/runtime/types",[215,3653,1777],{"class":599},[215,3655,3656],{"class":217,"line":1005},[215,3657,721],{"emptyLinePlaceholder":108},[215,3659,3660,3662,3665,3667,3670,3672,3675,3677,3679],{"class":217,"line":1022},[215,3661,675],{"class":674},[215,3663,3664],{"class":596}," option ",[215,3666,606],{"class":599},[215,3668,3669],{"class":683}," ref",[215,3671,1425],{"class":599},[215,3673,3674],{"class":750},"Option",[215,3676,986],{"class":599},[215,3678,687],{"class":596},[215,3680,1683],{"class":599},[215,3682,3683,3686,3688],{"class":217,"line":1045},[215,3684,3685],{"class":771},"  title",[215,3687,747],{"class":599},[215,3689,761],{"class":599},[215,3691,3692,3695,3697,3699,3702],{"class":217,"line":1050},[215,3693,3694],{"class":771},"    text",[215,3696,747],{"class":599},[215,3698,1755],{"class":599},[215,3700,3701],{"class":651},"示例饼图",[215,3703,1777],{"class":599},[215,3705,3706],{"class":217,"line":1055},[215,3707,948],{"class":599},[215,3709,3710,3713,3715],{"class":217,"line":1062},[215,3711,3712],{"class":771},"  tooltip",[215,3714,747],{"class":599},[215,3716,761],{"class":599},[215,3718,3719,3722,3724,3726,3729],{"class":217,"line":1077},[215,3720,3721],{"class":771},"    trigger",[215,3723,747],{"class":599},[215,3725,1755],{"class":599},[215,3727,3728],{"class":651},"item",[215,3730,1777],{"class":599},[215,3732,3733],{"class":217,"line":1086},[215,3734,948],{"class":599},[215,3736,3737,3740,3742],{"class":217,"line":1099},[215,3738,3739],{"class":771},"  legend",[215,3741,747],{"class":599},[215,3743,761],{"class":599},[215,3745,3746,3749,3751,3753,3756,3758],{"class":217,"line":1127},[215,3747,3748],{"class":771},"    orient",[215,3750,747],{"class":599},[215,3752,1755],{"class":599},[215,3754,3755],{"class":651},"vertical",[215,3757,1761],{"class":599},[215,3759,906],{"class":599},[215,3761,3762,3765,3767,3769,3771],{"class":217,"line":1132},[215,3763,3764],{"class":771},"    left",[215,3766,747],{"class":599},[215,3768,1755],{"class":599},[215,3770,356],{"class":651},[215,3772,1777],{"class":599},[215,3774,3775],{"class":217,"line":1139},[215,3776,948],{"class":599},[215,3778,3779,3782,3784],{"class":217,"line":1144},[215,3780,3781],{"class":771},"  series",[215,3783,747],{"class":599},[215,3785,2685],{"class":596},[215,3787,3789],{"class":217,"line":3788},25,[215,3790,3791],{"class":599},"    {\n",[215,3793,3795,3798,3800,3802,3805,3807],{"class":217,"line":3794},26,[215,3796,3797],{"class":771},"      name",[215,3799,747],{"class":599},[215,3801,1755],{"class":599},[215,3803,3804],{"class":651},"访问来源",[215,3806,1761],{"class":599},[215,3808,906],{"class":599},[215,3810,3812,3815,3817,3819,3822,3824],{"class":217,"line":3811},27,[215,3813,3814],{"class":771},"      type",[215,3816,747],{"class":599},[215,3818,1755],{"class":599},[215,3820,3821],{"class":651},"pie",[215,3823,1761],{"class":599},[215,3825,906],{"class":599},[215,3827,3829,3832,3834,3836,3839,3841],{"class":217,"line":3828},28,[215,3830,3831],{"class":771},"      radius",[215,3833,747],{"class":599},[215,3835,1755],{"class":599},[215,3837,3838],{"class":651},"50%",[215,3840,1761],{"class":599},[215,3842,906],{"class":599},[215,3844,3846,3849,3851],{"class":217,"line":3845},29,[215,3847,3848],{"class":771},"      data",[215,3850,747],{"class":599},[215,3852,2685],{"class":596},[215,3854,3856,3859,3861,3863,3866,3868,3870,3872,3874,3877,3879],{"class":217,"line":3855},30,[215,3857,3858],{"class":599},"        {",[215,3860,609],{"class":771},[215,3862,747],{"class":599},[215,3864,3865],{"class":823}," 1048",[215,3867,820],{"class":599},[215,3869,2739],{"class":771},[215,3871,747],{"class":599},[215,3873,1755],{"class":599},[215,3875,3876],{"class":651},"搜索引擎",[215,3878,1761],{"class":599},[215,3880,2765],{"class":599},[215,3882,3884,3886,3888,3890,3893,3895,3897,3899,3901,3904,3906],{"class":217,"line":3883},31,[215,3885,3858],{"class":599},[215,3887,609],{"class":771},[215,3889,747],{"class":599},[215,3891,3892],{"class":823}," 735",[215,3894,820],{"class":599},[215,3896,2739],{"class":771},[215,3898,747],{"class":599},[215,3900,1755],{"class":599},[215,3902,3903],{"class":651},"直接访问",[215,3905,1761],{"class":599},[215,3907,2765],{"class":599},[215,3909,3911,3913,3915,3917,3920,3922,3924,3926,3928,3931,3933],{"class":217,"line":3910},32,[215,3912,3858],{"class":599},[215,3914,609],{"class":771},[215,3916,747],{"class":599},[215,3918,3919],{"class":823}," 580",[215,3921,820],{"class":599},[215,3923,2739],{"class":771},[215,3925,747],{"class":599},[215,3927,1755],{"class":599},[215,3929,3930],{"class":651},"邮件营销",[215,3932,1761],{"class":599},[215,3934,2765],{"class":599},[215,3936,3938,3940,3942,3944,3947,3949,3951,3953,3955,3958,3960],{"class":217,"line":3937},33,[215,3939,3858],{"class":599},[215,3941,609],{"class":771},[215,3943,747],{"class":599},[215,3945,3946],{"class":823}," 484",[215,3948,820],{"class":599},[215,3950,2739],{"class":771},[215,3952,747],{"class":599},[215,3954,1755],{"class":599},[215,3956,3957],{"class":651},"联盟广告",[215,3959,1761],{"class":599},[215,3961,2765],{"class":599},[215,3963,3965,3967,3969,3971,3974,3976,3978,3980,3982,3985,3987],{"class":217,"line":3964},34,[215,3966,3858],{"class":599},[215,3968,609],{"class":771},[215,3970,747],{"class":599},[215,3972,3973],{"class":823}," 300",[215,3975,820],{"class":599},[215,3977,2739],{"class":771},[215,3979,747],{"class":599},[215,3981,1755],{"class":599},[215,3983,3984],{"class":651},"视频广告",[215,3986,1761],{"class":599},[215,3988,2346],{"class":599},[215,3990,3992],{"class":217,"line":3991},35,[215,3993,3994],{"class":596},"      ]\n",[215,3996,3998],{"class":217,"line":3997},36,[215,3999,4000],{"class":599},"    }\n",[215,4002,4004],{"class":217,"line":4003},37,[215,4005,4006],{"class":596},"  ]\n",[215,4008,4010,4012],{"class":217,"line":4009},38,[215,4011,2000],{"class":599},[215,4013,1764],{"class":596},[215,4015,4017,4019,4021],{"class":217,"line":4016},39,[215,4018,3521],{"class":599},[215,4020,3615],{"class":771},[215,4022,3505],{"class":599},[3455,4024,4027],{"color":4025,"icon":4026},"primary","i-heroicons-exclamation-circle",[149,4028,4029,4035,4038,4039,4041],{},[163,4030,4031,4032,4034],{},"为什么必须使用",[153,4033,3474],{},"？",[4036,4037],"br",{},"\nECharts需要访问DOM和浏览器API（如Canvas），在SSR环境下会导致错误。",[153,4040,3474],{},"确保组件只在客户端渲染。",[145,4043,4045],{"id":4044},"第四步使用typescript类型定义","第四步：使用TypeScript类型定义",[149,4047,4048],{},"nuxt-echarts提供了完整的类型支持，使用官方类型定义来实现option：",[206,4050,4052],{"className":580,"code":4051,"language":583,"meta":211,"style":211},"import type { Option } from 'nuxt-echarts/runtime/types'\n\n// 示例：柱状图配置\nconst barOption = ref\u003COption>({\n  xAxis: {\n    type: 'category',\n    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n  },\n  yAxis: {\n    type: 'value'\n  },\n  series: [\n    {\n      data: [120, 200, 150, 80, 70, 110, 130],\n      type: 'bar'\n    }\n  ]\n})\n",[153,4053,4054,4074,4078,4083,4104,4113,4128,4201,4205,4214,4226,4230,4238,4242,4287,4300,4304,4308],{"__ignoreMap":211},[215,4055,4056,4058,4060,4062,4064,4066,4068,4070,4072],{"class":217,"line":218},[215,4057,2140],{"class":767},[215,4059,2753],{"class":767},[215,4061,2184],{"class":599},[215,4063,3642],{"class":596},[215,4065,2190],{"class":599},[215,4067,2193],{"class":767},[215,4069,1755],{"class":599},[215,4071,3651],{"class":651},[215,4073,1777],{"class":599},[215,4075,4076],{"class":217,"line":236},[215,4077,721],{"emptyLinePlaceholder":108},[215,4079,4080],{"class":217,"line":469},[215,4081,4082],{"class":590},"// 示例：柱状图配置\n",[215,4084,4085,4087,4090,4092,4094,4096,4098,4100,4102],{"class":217,"line":724},[215,4086,675],{"class":674},[215,4088,4089],{"class":596}," barOption ",[215,4091,606],{"class":599},[215,4093,3669],{"class":683},[215,4095,1425],{"class":599},[215,4097,3674],{"class":750},[215,4099,986],{"class":599},[215,4101,687],{"class":596},[215,4103,1683],{"class":599},[215,4105,4106,4109,4111],{"class":217,"line":730},[215,4107,4108],{"class":771},"  xAxis",[215,4110,747],{"class":599},[215,4112,761],{"class":599},[215,4114,4115,4117,4119,4121,4124,4126],{"class":217,"line":764},[215,4116,2711],{"class":771},[215,4118,747],{"class":599},[215,4120,1755],{"class":599},[215,4122,4123],{"class":651},"category",[215,4125,1761],{"class":599},[215,4127,906],{"class":599},[215,4129,4130,4133,4135,4137,4139,4142,4144,4146,4148,4151,4153,4155,4157,4160,4162,4164,4166,4169,4171,4173,4175,4178,4180,4182,4184,4187,4189,4191,4193,4196,4198],{"class":217,"line":801},[215,4131,4132],{"class":771},"    data",[215,4134,747],{"class":599},[215,4136,2812],{"class":596},[215,4138,1761],{"class":599},[215,4140,4141],{"class":651},"Mon",[215,4143,1761],{"class":599},[215,4145,820],{"class":599},[215,4147,1755],{"class":599},[215,4149,4150],{"class":651},"Tue",[215,4152,1761],{"class":599},[215,4154,820],{"class":599},[215,4156,1755],{"class":599},[215,4158,4159],{"class":651},"Wed",[215,4161,1761],{"class":599},[215,4163,820],{"class":599},[215,4165,1755],{"class":599},[215,4167,4168],{"class":651},"Thu",[215,4170,1761],{"class":599},[215,4172,820],{"class":599},[215,4174,1755],{"class":599},[215,4176,4177],{"class":651},"Fri",[215,4179,1761],{"class":599},[215,4181,820],{"class":599},[215,4183,1755],{"class":599},[215,4185,4186],{"class":651},"Sat",[215,4188,1761],{"class":599},[215,4190,820],{"class":599},[215,4192,1755],{"class":599},[215,4194,4195],{"class":651},"Sun",[215,4197,1761],{"class":599},[215,4199,4200],{"class":596},"]\n",[215,4202,4203],{"class":217,"line":832},[215,4204,948],{"class":599},[215,4206,4207,4210,4212],{"class":217,"line":861},[215,4208,4209],{"class":771},"  yAxis",[215,4211,747],{"class":599},[215,4213,761],{"class":599},[215,4215,4216,4218,4220,4222,4224],{"class":217,"line":966},[215,4217,2711],{"class":771},[215,4219,747],{"class":599},[215,4221,1755],{"class":599},[215,4223,701],{"class":651},[215,4225,1777],{"class":599},[215,4227,4228],{"class":217,"line":1000},[215,4229,948],{"class":599},[215,4231,4232,4234,4236],{"class":217,"line":1005},[215,4233,3781],{"class":771},[215,4235,747],{"class":599},[215,4237,2685],{"class":596},[215,4239,4240],{"class":217,"line":1022},[215,4241,3791],{"class":599},[215,4243,4244,4246,4248,4250,4253,4255,4258,4260,4263,4265,4268,4270,4273,4275,4278,4280,4283,4285],{"class":217,"line":1045},[215,4245,3848],{"class":771},[215,4247,747],{"class":599},[215,4249,2812],{"class":596},[215,4251,4252],{"class":823},"120",[215,4254,820],{"class":599},[215,4256,4257],{"class":823}," 200",[215,4259,820],{"class":599},[215,4261,4262],{"class":823}," 150",[215,4264,820],{"class":599},[215,4266,4267],{"class":823}," 80",[215,4269,820],{"class":599},[215,4271,4272],{"class":823}," 70",[215,4274,820],{"class":599},[215,4276,4277],{"class":823}," 110",[215,4279,820],{"class":599},[215,4281,4282],{"class":823}," 130",[215,4284,1947],{"class":596},[215,4286,906],{"class":599},[215,4288,4289,4291,4293,4295,4298],{"class":217,"line":1050},[215,4290,3814],{"class":771},[215,4292,747],{"class":599},[215,4294,1755],{"class":599},[215,4296,4297],{"class":651},"bar",[215,4299,1777],{"class":599},[215,4301,4302],{"class":217,"line":1055},[215,4303,4000],{"class":599},[215,4305,4306],{"class":217,"line":1062},[215,4307,4006],{"class":596},[215,4309,4310,4312],{"class":217,"line":1077},[215,4311,2000],{"class":599},[215,4313,1764],{"class":596},[145,4315,4316],{"id":4316},"完整示例",[149,4318,4319],{},"结合以上步骤的完整页面示例：",[206,4321,4323],{"className":3478,"code":4322,"language":3480,"meta":211,"style":211},"\u003Ctemplate>\n  \u003Cdiv class=\"container mx-auto p-4\">\n    \u003Ch1 class=\"text-3xl font-bold mb-4\">销售数据分析\u003C/h1>\n    \n    \u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n      \u003C!-- 饼图 -->\n      \u003Cdiv class=\"bg-white p-4 rounded shadow\">\n        \u003Cclient-only>\n          \u003CVChart :option=\"pieOption\" style=\"height: 400px;\" />\n        \u003C/client-only>\n      \u003C/div>\n      \n      \u003C!-- 柱状图 -->\n      \u003Cdiv class=\"bg-white p-4 rounded shadow\">\n        \u003Cclient-only>\n          \u003CVChart :option=\"barOption\" style=\"height: 400px;\" />\n        \u003C/client-only>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { Option } from 'nuxt-echarts/runtime/types'\n\nconst pieOption = ref\u003COption>({\n  title: { text: '销售渠道分布' },\n  tooltip: { trigger: 'item' },\n  legend: { orient: 'vertical', left: 'left' },\n  series: [{\n    name: '销售额',\n    type: 'pie',\n    radius: '50%',\n    data: [\n      { value: 1048, name: '线上商城' },\n      { value: 735, name: '实体店' },\n      { value: 580, name: '代理商' }\n    ]\n  }]\n})\n\nconst barOption = ref\u003COption>({\n  title: { text: '月度销售趋势' },\n  tooltip: { trigger: 'axis' },\n  xAxis: {\n    type: 'category',\n    data: ['1月', '2月', '3月', '4月', '5月', '6月']\n  },\n  yAxis: { type: 'value' },\n  series: [{\n    data: [120, 200, 150, 80, 170, 210],\n    type: 'bar'\n  }]\n})\n\u003C/script>\n",[153,4324,4325,4333,4353,4381,4386,4405,4410,4429,4438,4476,4485,4494,4499,4504,4522,4530,4567,4575,4583,4591,4599,4607,4611,4631,4651,4655,4676,4698,4719,4753,4763,4778,4792,4807,4815,4840,4865,4890,4894,4900,4907,4912,4933,4955,4977,4986,5001,5064,5069,5090,5101,5138,5151,5158,5165],{"__ignoreMap":211},[215,4326,4327,4329,4331],{"class":217,"line":218},[215,4328,1425],{"class":599},[215,4330,3489],{"class":771},[215,4332,3505],{"class":599},[215,4334,4335,4337,4339,4342,4344,4346,4349,4351],{"class":217,"line":236},[215,4336,3499],{"class":599},[215,4338,3502],{"class":771},[215,4340,4341],{"class":674}," class",[215,4343,606],{"class":599},[215,4345,648],{"class":599},[215,4347,4348],{"class":651},"container mx-auto p-4",[215,4350,648],{"class":599},[215,4352,3505],{"class":599},[215,4354,4355,4357,4359,4361,4363,4365,4368,4370,4372,4375,4377,4379],{"class":217,"line":469},[215,4356,3510],{"class":599},[215,4358,3513],{"class":771},[215,4360,4341],{"class":674},[215,4362,606],{"class":599},[215,4364,648],{"class":599},[215,4366,4367],{"class":651},"text-3xl font-bold mb-4",[215,4369,648],{"class":599},[215,4371,986],{"class":599},[215,4373,4374],{"class":596},"销售数据分析",[215,4376,3521],{"class":599},[215,4378,3513],{"class":771},[215,4380,3505],{"class":599},[215,4382,4383],{"class":217,"line":724},[215,4384,4385],{"class":596},"    \n",[215,4387,4388,4390,4392,4394,4396,4398,4401,4403],{"class":217,"line":730},[215,4389,3510],{"class":599},[215,4391,3502],{"class":771},[215,4393,4341],{"class":674},[215,4395,606],{"class":599},[215,4397,648],{"class":599},[215,4399,4400],{"class":651},"grid grid-cols-1 md:grid-cols-2 gap-4",[215,4402,648],{"class":599},[215,4404,3505],{"class":599},[215,4406,4407],{"class":217,"line":764},[215,4408,4409],{"class":590},"      \u003C!-- 饼图 -->\n",[215,4411,4412,4414,4416,4418,4420,4422,4425,4427],{"class":217,"line":801},[215,4413,3539],{"class":599},[215,4415,3502],{"class":771},[215,4417,4341],{"class":674},[215,4419,606],{"class":599},[215,4421,648],{"class":599},[215,4423,4424],{"class":651},"bg-white p-4 rounded shadow",[215,4426,648],{"class":599},[215,4428,3505],{"class":599},[215,4430,4431,4434,4436],{"class":217,"line":832},[215,4432,4433],{"class":599},"        \u003C",[215,4435,3532],{"class":771},[215,4437,3505],{"class":599},[215,4439,4440,4443,4445,4447,4449,4451,4453,4456,4458,4460,4462,4464,4466,4468,4470,4472,4474],{"class":217,"line":861},[215,4441,4442],{"class":599},"          \u003C",[215,4444,3542],{"class":771},[215,4446,1456],{"class":599},[215,4448,3547],{"class":674},[215,4450,606],{"class":599},[215,4452,648],{"class":599},[215,4454,4455],{"class":596},"pieOption",[215,4457,648],{"class":599},[215,4459,3558],{"class":674},[215,4461,606],{"class":599},[215,4463,648],{"class":599},[215,4465,3566],{"class":3565},[215,4467,3569],{"class":599},[215,4469,3572],{"class":823},[215,4471,940],{"class":599},[215,4473,648],{"class":599},[215,4475,1514],{"class":599},[215,4477,4478,4481,4483],{"class":217,"line":966},[215,4479,4480],{"class":599},"        \u003C/",[215,4482,3532],{"class":771},[215,4484,3505],{"class":599},[215,4486,4487,4490,4492],{"class":217,"line":1000},[215,4488,4489],{"class":599},"      \u003C/",[215,4491,3502],{"class":771},[215,4493,3505],{"class":599},[215,4495,4496],{"class":217,"line":1005},[215,4497,4498],{"class":596},"      \n",[215,4500,4501],{"class":217,"line":1022},[215,4502,4503],{"class":590},"      \u003C!-- 柱状图 -->\n",[215,4505,4506,4508,4510,4512,4514,4516,4518,4520],{"class":217,"line":1045},[215,4507,3539],{"class":599},[215,4509,3502],{"class":771},[215,4511,4341],{"class":674},[215,4513,606],{"class":599},[215,4515,648],{"class":599},[215,4517,4424],{"class":651},[215,4519,648],{"class":599},[215,4521,3505],{"class":599},[215,4523,4524,4526,4528],{"class":217,"line":1050},[215,4525,4433],{"class":599},[215,4527,3532],{"class":771},[215,4529,3505],{"class":599},[215,4531,4532,4534,4536,4538,4540,4542,4544,4547,4549,4551,4553,4555,4557,4559,4561,4563,4565],{"class":217,"line":1055},[215,4533,4442],{"class":599},[215,4535,3542],{"class":771},[215,4537,1456],{"class":599},[215,4539,3547],{"class":674},[215,4541,606],{"class":599},[215,4543,648],{"class":599},[215,4545,4546],{"class":596},"barOption",[215,4548,648],{"class":599},[215,4550,3558],{"class":674},[215,4552,606],{"class":599},[215,4554,648],{"class":599},[215,4556,3566],{"class":3565},[215,4558,3569],{"class":599},[215,4560,3572],{"class":823},[215,4562,940],{"class":599},[215,4564,648],{"class":599},[215,4566,1514],{"class":599},[215,4568,4569,4571,4573],{"class":217,"line":1062},[215,4570,4480],{"class":599},[215,4572,3532],{"class":771},[215,4574,3505],{"class":599},[215,4576,4577,4579,4581],{"class":217,"line":1077},[215,4578,4489],{"class":599},[215,4580,3502],{"class":771},[215,4582,3505],{"class":599},[215,4584,4585,4587,4589],{"class":217,"line":1086},[215,4586,3583],{"class":599},[215,4588,3502],{"class":771},[215,4590,3505],{"class":599},[215,4592,4593,4595,4597],{"class":217,"line":1099},[215,4594,3592],{"class":599},[215,4596,3502],{"class":771},[215,4598,3505],{"class":599},[215,4600,4601,4603,4605],{"class":217,"line":1127},[215,4602,3521],{"class":599},[215,4604,3489],{"class":771},[215,4606,3505],{"class":599},[215,4608,4609],{"class":217,"line":1132},[215,4610,721],{"emptyLinePlaceholder":108},[215,4612,4613,4615,4617,4619,4621,4623,4625,4627,4629],{"class":217,"line":1139},[215,4614,1425],{"class":599},[215,4616,3615],{"class":771},[215,4618,3618],{"class":674},[215,4620,3621],{"class":674},[215,4622,606],{"class":599},[215,4624,648],{"class":599},[215,4626,583],{"class":651},[215,4628,648],{"class":599},[215,4630,3505],{"class":599},[215,4632,4633,4635,4637,4639,4641,4643,4645,4647,4649],{"class":217,"line":1144},[215,4634,2140],{"class":767},[215,4636,2753],{"class":767},[215,4638,2184],{"class":599},[215,4640,3642],{"class":596},[215,4642,2190],{"class":599},[215,4644,2193],{"class":767},[215,4646,1755],{"class":599},[215,4648,3651],{"class":651},[215,4650,1777],{"class":599},[215,4652,4653],{"class":217,"line":3788},[215,4654,721],{"emptyLinePlaceholder":108},[215,4656,4657,4659,4662,4664,4666,4668,4670,4672,4674],{"class":217,"line":3794},[215,4658,675],{"class":674},[215,4660,4661],{"class":596}," pieOption ",[215,4663,606],{"class":599},[215,4665,3669],{"class":683},[215,4667,1425],{"class":599},[215,4669,3674],{"class":750},[215,4671,986],{"class":599},[215,4673,687],{"class":596},[215,4675,1683],{"class":599},[215,4677,4678,4680,4682,4684,4687,4689,4691,4694,4696],{"class":217,"line":3811},[215,4679,3685],{"class":771},[215,4681,747],{"class":599},[215,4683,2184],{"class":599},[215,4685,4686],{"class":771}," text",[215,4688,747],{"class":599},[215,4690,1755],{"class":599},[215,4692,4693],{"class":651},"销售渠道分布",[215,4695,1761],{"class":599},[215,4697,2765],{"class":599},[215,4699,4700,4702,4704,4706,4709,4711,4713,4715,4717],{"class":217,"line":3828},[215,4701,3712],{"class":771},[215,4703,747],{"class":599},[215,4705,2184],{"class":599},[215,4707,4708],{"class":771}," trigger",[215,4710,747],{"class":599},[215,4712,1755],{"class":599},[215,4714,3728],{"class":651},[215,4716,1761],{"class":599},[215,4718,2765],{"class":599},[215,4720,4721,4723,4725,4727,4730,4732,4734,4736,4738,4740,4743,4745,4747,4749,4751],{"class":217,"line":3845},[215,4722,3739],{"class":771},[215,4724,747],{"class":599},[215,4726,2184],{"class":599},[215,4728,4729],{"class":771}," orient",[215,4731,747],{"class":599},[215,4733,1755],{"class":599},[215,4735,3755],{"class":651},[215,4737,1761],{"class":599},[215,4739,820],{"class":599},[215,4741,4742],{"class":771}," left",[215,4744,747],{"class":599},[215,4746,1755],{"class":599},[215,4748,356],{"class":651},[215,4750,1761],{"class":599},[215,4752,2765],{"class":599},[215,4754,4755,4757,4759,4761],{"class":217,"line":3855},[215,4756,3781],{"class":771},[215,4758,747],{"class":599},[215,4760,2812],{"class":596},[215,4762,1683],{"class":599},[215,4764,4765,4767,4769,4771,4774,4776],{"class":217,"line":3883},[215,4766,2695],{"class":771},[215,4768,747],{"class":599},[215,4770,1755],{"class":599},[215,4772,4773],{"class":651},"销售额",[215,4775,1761],{"class":599},[215,4777,906],{"class":599},[215,4779,4780,4782,4784,4786,4788,4790],{"class":217,"line":3910},[215,4781,2711],{"class":771},[215,4783,747],{"class":599},[215,4785,1755],{"class":599},[215,4787,3821],{"class":651},[215,4789,1761],{"class":599},[215,4791,906],{"class":599},[215,4793,4794,4797,4799,4801,4803,4805],{"class":217,"line":3937},[215,4795,4796],{"class":771},"    radius",[215,4798,747],{"class":599},[215,4800,1755],{"class":599},[215,4802,3838],{"class":651},[215,4804,1761],{"class":599},[215,4806,906],{"class":599},[215,4808,4809,4811,4813],{"class":217,"line":3964},[215,4810,4132],{"class":771},[215,4812,747],{"class":599},[215,4814,2685],{"class":596},[215,4816,4817,4819,4821,4823,4825,4827,4829,4831,4833,4836,4838],{"class":217,"line":3991},[215,4818,2736],{"class":599},[215,4820,609],{"class":771},[215,4822,747],{"class":599},[215,4824,3865],{"class":823},[215,4826,820],{"class":599},[215,4828,2739],{"class":771},[215,4830,747],{"class":599},[215,4832,1755],{"class":599},[215,4834,4835],{"class":651},"线上商城",[215,4837,1761],{"class":599},[215,4839,2765],{"class":599},[215,4841,4842,4844,4846,4848,4850,4852,4854,4856,4858,4861,4863],{"class":217,"line":3997},[215,4843,2736],{"class":599},[215,4845,609],{"class":771},[215,4847,747],{"class":599},[215,4849,3892],{"class":823},[215,4851,820],{"class":599},[215,4853,2739],{"class":771},[215,4855,747],{"class":599},[215,4857,1755],{"class":599},[215,4859,4860],{"class":651},"实体店",[215,4862,1761],{"class":599},[215,4864,2765],{"class":599},[215,4866,4867,4869,4871,4873,4875,4877,4879,4881,4883,4886,4888],{"class":217,"line":4003},[215,4868,2736],{"class":599},[215,4870,609],{"class":771},[215,4872,747],{"class":599},[215,4874,3919],{"class":823},[215,4876,820],{"class":599},[215,4878,2739],{"class":771},[215,4880,747],{"class":599},[215,4882,1755],{"class":599},[215,4884,4885],{"class":651},"代理商",[215,4887,1761],{"class":599},[215,4889,2346],{"class":599},[215,4891,4892],{"class":217,"line":4009},[215,4893,3442],{"class":596},[215,4895,4896,4898],{"class":217,"line":4016},[215,4897,2297],{"class":599},[215,4899,4200],{"class":596},[215,4901,4903,4905],{"class":217,"line":4902},40,[215,4904,2000],{"class":599},[215,4906,1764],{"class":596},[215,4908,4910],{"class":217,"line":4909},41,[215,4911,721],{"emptyLinePlaceholder":108},[215,4913,4915,4917,4919,4921,4923,4925,4927,4929,4931],{"class":217,"line":4914},42,[215,4916,675],{"class":674},[215,4918,4089],{"class":596},[215,4920,606],{"class":599},[215,4922,3669],{"class":683},[215,4924,1425],{"class":599},[215,4926,3674],{"class":750},[215,4928,986],{"class":599},[215,4930,687],{"class":596},[215,4932,1683],{"class":599},[215,4934,4936,4938,4940,4942,4944,4946,4948,4951,4953],{"class":217,"line":4935},43,[215,4937,3685],{"class":771},[215,4939,747],{"class":599},[215,4941,2184],{"class":599},[215,4943,4686],{"class":771},[215,4945,747],{"class":599},[215,4947,1755],{"class":599},[215,4949,4950],{"class":651},"月度销售趋势",[215,4952,1761],{"class":599},[215,4954,2765],{"class":599},[215,4956,4958,4960,4962,4964,4966,4968,4970,4973,4975],{"class":217,"line":4957},44,[215,4959,3712],{"class":771},[215,4961,747],{"class":599},[215,4963,2184],{"class":599},[215,4965,4708],{"class":771},[215,4967,747],{"class":599},[215,4969,1755],{"class":599},[215,4971,4972],{"class":651},"axis",[215,4974,1761],{"class":599},[215,4976,2765],{"class":599},[215,4978,4980,4982,4984],{"class":217,"line":4979},45,[215,4981,4108],{"class":771},[215,4983,747],{"class":599},[215,4985,761],{"class":599},[215,4987,4989,4991,4993,4995,4997,4999],{"class":217,"line":4988},46,[215,4990,2711],{"class":771},[215,4992,747],{"class":599},[215,4994,1755],{"class":599},[215,4996,4123],{"class":651},[215,4998,1761],{"class":599},[215,5000,906],{"class":599},[215,5002,5004,5006,5008,5010,5012,5015,5017,5019,5021,5024,5026,5028,5030,5033,5035,5037,5039,5042,5044,5046,5048,5051,5053,5055,5057,5060,5062],{"class":217,"line":5003},47,[215,5005,4132],{"class":771},[215,5007,747],{"class":599},[215,5009,2812],{"class":596},[215,5011,1761],{"class":599},[215,5013,5014],{"class":651},"1月",[215,5016,1761],{"class":599},[215,5018,820],{"class":599},[215,5020,1755],{"class":599},[215,5022,5023],{"class":651},"2月",[215,5025,1761],{"class":599},[215,5027,820],{"class":599},[215,5029,1755],{"class":599},[215,5031,5032],{"class":651},"3月",[215,5034,1761],{"class":599},[215,5036,820],{"class":599},[215,5038,1755],{"class":599},[215,5040,5041],{"class":651},"4月",[215,5043,1761],{"class":599},[215,5045,820],{"class":599},[215,5047,1755],{"class":599},[215,5049,5050],{"class":651},"5月",[215,5052,1761],{"class":599},[215,5054,820],{"class":599},[215,5056,1755],{"class":599},[215,5058,5059],{"class":651},"6月",[215,5061,1761],{"class":599},[215,5063,4200],{"class":596},[215,5065,5067],{"class":217,"line":5066},48,[215,5068,948],{"class":599},[215,5070,5072,5074,5076,5078,5080,5082,5084,5086,5088],{"class":217,"line":5071},49,[215,5073,4209],{"class":771},[215,5075,747],{"class":599},[215,5077,2184],{"class":599},[215,5079,2753],{"class":771},[215,5081,747],{"class":599},[215,5083,1755],{"class":599},[215,5085,701],{"class":651},[215,5087,1761],{"class":599},[215,5089,2765],{"class":599},[215,5091,5093,5095,5097,5099],{"class":217,"line":5092},50,[215,5094,3781],{"class":771},[215,5096,747],{"class":599},[215,5098,2812],{"class":596},[215,5100,1683],{"class":599},[215,5102,5104,5106,5108,5110,5112,5114,5116,5118,5120,5122,5124,5126,5129,5131,5134,5136],{"class":217,"line":5103},51,[215,5105,4132],{"class":771},[215,5107,747],{"class":599},[215,5109,2812],{"class":596},[215,5111,4252],{"class":823},[215,5113,820],{"class":599},[215,5115,4257],{"class":823},[215,5117,820],{"class":599},[215,5119,4262],{"class":823},[215,5121,820],{"class":599},[215,5123,4267],{"class":823},[215,5125,820],{"class":599},[215,5127,5128],{"class":823}," 170",[215,5130,820],{"class":599},[215,5132,5133],{"class":823}," 210",[215,5135,1947],{"class":596},[215,5137,906],{"class":599},[215,5139,5141,5143,5145,5147,5149],{"class":217,"line":5140},52,[215,5142,2711],{"class":771},[215,5144,747],{"class":599},[215,5146,1755],{"class":599},[215,5148,4297],{"class":651},[215,5150,1777],{"class":599},[215,5152,5154,5156],{"class":217,"line":5153},53,[215,5155,2297],{"class":599},[215,5157,4200],{"class":596},[215,5159,5161,5163],{"class":217,"line":5160},54,[215,5162,2000],{"class":599},[215,5164,1764],{"class":596},[215,5166,5168,5170,5172],{"class":217,"line":5167},55,[215,5169,3521],{"class":599},[215,5171,3615],{"class":771},[215,5173,3505],{"class":599},[145,5175,1396],{"id":1396},[195,5177,5179],{"id":5178},"图表不显示或报错","图表不显示或报错？",[302,5181,5182,5188,5194],{},[305,5183,5184,5185,5187],{},"确认在",[153,5186,3259],{},"中声明了对应的图表类型和组件",[305,5189,5190,5191,5193],{},"检查是否使用了",[153,5192,3474],{},"包裹",[305,5195,5196],{},"确保为图表容器设置了明确的高度",[195,5198,5200],{"id":5199},"如何响应式调整图表大小","如何响应式调整图表大小？",[206,5202,5204],{"className":3478,"code":5203,"language":3480,"meta":211,"style":211},"\u003Cscript setup lang=\"ts\">\nconst chartRef = ref()\n\n// 监听窗口大小变化\nuseEventListener('resize', () => {\n  chartRef.value?.resize()\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cclient-only>\n    \u003CVChart ref=\"chartRef\" :option=\"option\" style=\"height: 400px;\" />\n  \u003C/client-only>\n\u003C/template>\n",[153,5205,5206,5226,5239,5243,5248,5270,5286,5292,5300,5304,5312,5320,5367,5375],{"__ignoreMap":211},[215,5207,5208,5210,5212,5214,5216,5218,5220,5222,5224],{"class":217,"line":218},[215,5209,1425],{"class":599},[215,5211,3615],{"class":771},[215,5213,3618],{"class":674},[215,5215,3621],{"class":674},[215,5217,606],{"class":599},[215,5219,648],{"class":599},[215,5221,583],{"class":651},[215,5223,648],{"class":599},[215,5225,3505],{"class":599},[215,5227,5228,5230,5233,5235,5237],{"class":217,"line":236},[215,5229,675],{"class":674},[215,5231,5232],{"class":596}," chartRef ",[215,5234,606],{"class":599},[215,5236,3669],{"class":683},[215,5238,2236],{"class":596},[215,5240,5241],{"class":217,"line":469},[215,5242,721],{"emptyLinePlaceholder":108},[215,5244,5245],{"class":217,"line":724},[215,5246,5247],{"class":590},"// 监听窗口大小变化\n",[215,5249,5250,5253,5255,5257,5260,5262,5264,5266,5268],{"class":217,"line":730},[215,5251,5252],{"class":683},"useEventListener",[215,5254,687],{"class":596},[215,5256,1761],{"class":599},[215,5258,5259],{"class":651},"resize",[215,5261,1761],{"class":599},[215,5263,820],{"class":599},[215,5265,1015],{"class":599},[215,5267,693],{"class":674},[215,5269,761],{"class":599},[215,5271,5272,5275,5277,5279,5282,5284],{"class":217,"line":764},[215,5273,5274],{"class":596},"  chartRef",[215,5276,600],{"class":599},[215,5278,701],{"class":596},[215,5280,5281],{"class":599},"?.",[215,5283,5259],{"class":683},[215,5285,2236],{"class":771},[215,5287,5288,5290],{"class":217,"line":801},[215,5289,2000],{"class":599},[215,5291,1764],{"class":596},[215,5293,5294,5296,5298],{"class":217,"line":832},[215,5295,3521],{"class":599},[215,5297,3615],{"class":771},[215,5299,3505],{"class":599},[215,5301,5302],{"class":217,"line":861},[215,5303,721],{"emptyLinePlaceholder":108},[215,5305,5306,5308,5310],{"class":217,"line":966},[215,5307,1425],{"class":599},[215,5309,3489],{"class":771},[215,5311,3505],{"class":599},[215,5313,5314,5316,5318],{"class":217,"line":1000},[215,5315,3499],{"class":599},[215,5317,3532],{"class":771},[215,5319,3505],{"class":599},[215,5321,5322,5324,5326,5328,5330,5332,5335,5337,5339,5341,5343,5345,5347,5349,5351,5353,5355,5357,5359,5361,5363,5365],{"class":217,"line":1005},[215,5323,3510],{"class":599},[215,5325,3542],{"class":771},[215,5327,3669],{"class":674},[215,5329,606],{"class":599},[215,5331,648],{"class":599},[215,5333,5334],{"class":651},"chartRef",[215,5336,648],{"class":599},[215,5338,1456],{"class":599},[215,5340,3547],{"class":674},[215,5342,606],{"class":599},[215,5344,648],{"class":599},[215,5346,3547],{"class":596},[215,5348,648],{"class":599},[215,5350,3558],{"class":674},[215,5352,606],{"class":599},[215,5354,648],{"class":599},[215,5356,3566],{"class":3565},[215,5358,3569],{"class":599},[215,5360,3572],{"class":823},[215,5362,940],{"class":599},[215,5364,648],{"class":599},[215,5366,1514],{"class":599},[215,5368,5369,5371,5373],{"class":217,"line":1022},[215,5370,3592],{"class":599},[215,5372,3532],{"class":771},[215,5374,3505],{"class":599},[215,5376,5377,5379,5381],{"class":217,"line":1045},[215,5378,3521],{"class":599},[215,5380,3489],{"class":771},[215,5382,3505],{"class":599},[145,5384,5385],{"id":5385},"参考资源",[505,5387,5388,5395],{},[305,5389,5390,5391],{},"官方文档：",[1247,5392,5393],{"href":5393,"rel":5394},"https://echarts.nuxt.dev/",[1251],[305,5396,5397,5398],{},"ECharts配置项手册：",[1247,5399,5400],{"href":5400,"rel":5401},"https://echarts.apache.org/zh/option.html",[1251],[149,5403,5404],{},"通过以上步骤，你就可以在Nuxt项目中轻松集成和使用ECharts图表了！",[158,5406,5407],{},[149,5408,1585],{},[460,5410,5411],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":211,"searchDepth":236,"depth":236,"links":5413},[5414,5415,5416,5417,5418,5419,5423],{"id":3225,"depth":236,"text":3226},{"id":3263,"depth":236,"text":3264},{"id":3467,"depth":236,"text":3468},{"id":4044,"depth":236,"text":4045},{"id":4316,"depth":236,"text":4316},{"id":1396,"depth":236,"text":1396,"children":5420},[5421,5422],{"id":5178,"depth":469,"text":5179},{"id":5199,"depth":469,"text":5200},{"id":5385,"depth":236,"text":5385},"2026-01-20T00:00:00.000Z","详细介绍如何在Nuxt 4项目中集成nuxt-echarts模块并实现ECharts图表的完整步骤和注意事项。",{"src":5427},"https://picsum.photos/id/180/640/360",{},{"title":80,"description":5425},"cZO2AE4w-lmCLbMuOUZOnPbRphIXXOYXWMc2RhGRFfE",{"id":5432,"title":76,"authors":5433,"badge":5436,"body":5438,"date":5576,"description":5577,"extension":477,"image":5578,"meta":5580,"navigation":108,"path":77,"seo":5581,"stem":78,"__hash__":5582},"posts/3.blog/5.nuxt-payload-extraction.md",[5434],{"name":135,"avatar":5435},{"src":138},{"label":5437},"work",{"type":142,"value":5439,"toc":5574},[5440,5447,5453,5455,5462,5465,5470,5534,5536,5555,5558,5567,5571],[149,5441,5442,5443,5446],{},"在把 Nuxt 项目设置为非 SSR（例如 ",[153,5444,5445],{},"ssr: false","）并部署到某些托管环境后，可能会在运行时看到报错：",[206,5448,5451],{"className":5449,"code":5450,"language":558},[556],"Cannot load payload /_payload.json\n",[153,5452,5450],{"__ignoreMap":211},[149,5454,2089],{},[149,5456,5457,5458,5461],{},"这是由 Nuxt 的 payload 提取（payload extraction）机制在一些部署 / 运行时场景下与静态资源访问不兼容导致的（例如当运行时无法正确提供或解析 ",[153,5459,5460],{},"/_payload.json","）。",[149,5463,5464],{},"解决方法",[149,5466,1651,5467,5469],{},[153,5468,3259],{}," 中关闭实验性的 payload 提取：",[206,5471,5473],{"className":580,"code":5472,"language":583,"meta":211,"style":211},"export default defineNuxtConfig({\n  ssr: false,\n  experimental: {\n    // 关闭 payload 提取以避免运行时去加载 /_payload.json\n    payloadExtraction: false\n  }\n})\n",[153,5474,5475,5487,5500,5509,5514,5524,5528],{"__ignoreMap":211},[215,5476,5477,5479,5481,5483,5485],{"class":217,"line":218},[215,5478,1672],{"class":767},[215,5480,1675],{"class":767},[215,5482,3288],{"class":683},[215,5484,687],{"class":596},[215,5486,1683],{"class":599},[215,5488,5489,5492,5494,5498],{"class":217,"line":236},[215,5490,5491],{"class":771},"  ssr",[215,5493,747],{"class":599},[215,5495,5497],{"class":5496},"sfNiH"," false",[215,5499,906],{"class":599},[215,5501,5502,5505,5507],{"class":217,"line":469},[215,5503,5504],{"class":771},"  experimental",[215,5506,747],{"class":599},[215,5508,761],{"class":599},[215,5510,5511],{"class":217,"line":724},[215,5512,5513],{"class":590},"    // 关闭 payload 提取以避免运行时去加载 /_payload.json\n",[215,5515,5516,5519,5521],{"class":217,"line":730},[215,5517,5518],{"class":771},"    payloadExtraction",[215,5520,747],{"class":599},[215,5522,5523],{"class":5496}," false\n",[215,5525,5526],{"class":217,"line":764},[215,5527,3447],{"class":599},[215,5529,5530,5532],{"class":217,"line":801},[215,5531,2000],{"class":599},[215,5533,1764],{"class":596},[149,5535,360],{},[505,5537,5538,5552],{},[305,5539,5540,5541,5544,5545,5548,5549,5551],{},"将 ",[153,5542,5543],{},"payloadExtraction"," 设置为 ",[153,5546,5547],{},"false"," 后，Nuxt 不会采用提取并生成 ",[153,5550,5460],{}," 的方式来加载页面数据，从而避免在某些部署环境中出现缺失或无法访问该资源导致的错误。",[305,5553,5554],{},"如果你的项目仍需 SSR 或静态预渲染场景，请谨慎评估该设置的影响。",[149,5556,5557],{},"参考",[505,5559,5560],{},[305,5561,5562,5563],{},"GitHub 讨论与示例：",[1247,5564,5565],{"href":5565,"rel":5566},"https://github.com/nuxt/nuxt/issues/22068#issuecomment-1629076435",[1251],[158,5568,5569],{},[149,5570,1585],{},[460,5572,5573],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":211,"searchDepth":236,"depth":236,"links":5575},[],"2026-01-13T00:00:00.000Z","将 Nuxt 设置为非 SSR（ssr: false）并部署后出现 `/_payload.json` 无法加载的解决方法。",{"src":5579},"https://picsum.photos/id/912/640/360",{},{"title":76,"description":5577},"HWolDRVQgH-NLY-2uP7OhS8t9k9hVe0oUYrVfaRDqaE",{"id":5584,"title":72,"authors":5585,"badge":5588,"body":5589,"date":6488,"description":6489,"extension":477,"image":6490,"meta":6492,"navigation":108,"path":73,"seo":6493,"stem":74,"__hash__":6494},"posts/3.blog/4.wangeditor-img-filter-issue.md",[5586],{"name":135,"avatar":5587},{"src":138},{"label":5437},{"type":142,"value":5590,"toc":6473},[5591,5593,5596,5599,5608,5611,5614,5617,5632,5635,5638,5645,5650,5714,5716,5719,5723,5768,5772,5817,5820,5824,5827,6026,6030,6033,6438,6441,6461,6463,6466,6470],[145,5592,147],{"id":147},[149,5594,5595],{},"在实际项目开发过程中，我们经常会遇到需要从第三方接口导入商品详情的场景。这些商品详情通常是由富文本编辑器生成的内容，其中可能包含各种HTML标签和结构。然而，在使用Wangeditor时，我们发现了一个常见问题：当图片(img标签)被div标签包裹时，Wangeditor会将其过滤掉，导致图片无法正常显示。",[149,5597,5598],{},"这个问题在处理第三方接口导入的数据时尤为突出，因为这些数据的HTML结构是我们无法控制的。",[149,5600,5601,5602,5607],{},"值得注意的是，这是一个已知的社区问题，在 wangEditor 的官方 GitHub 仓库中有相关的 issue 讨论：",[1247,5603,5606],{"href":5604,"rel":5605},"https://github.com/wangeditor-team/wangEditor/issues/5880",[1251],"Issue #5880","，且该问题至今仍未被修复。",[145,5609,5610],{"id":5610},"问题分析",[149,5612,5613],{},"Wangeditor默认会过滤掉一些可能不安全的HTML标签和属性，这是出于安全考虑的设计。然而，这种过滤机制有时会过于严格，导致合法的HTML结构（如被div包裹的img标签）也被过滤掉。",[149,5615,5616],{},"具体表现为：",[302,5618,5619,5626,5629],{},[305,5620,5621,5622,5625],{},"从第三方接口获取的商品详情中包含",[153,5623,5624],{},"\u003Cdiv>\u003Cimg src=\"...\" alt=\"...\"/>\u003C/div>","结构",[305,5627,5628],{},"在Wangeditor中显示时，img标签被移除",[305,5630,5631],{},"最终用户无法看到图片内容",[145,5633,5634],{"id":5634},"去试试",[149,5636,5637],{},"你可以通过下面的在线编辑器链接来复现这个问题：",[149,5639,5640],{},[1247,5641,5644],{"href":5642,"rel":5643},"https://stackblitz.com/edit/vue3-wangeditor-demo?file=src%2Fcomponents%2FBasicEditor.vue",[1251],"Vue3 Wangeditor Demo",[149,5646,5647],{},[163,5648,5649],{},"操作步骤：",[302,5651,5652,5659,5707],{},[305,5653,5654,5655,5658],{},"打开链接后，在代码中找到绑定值（如 ",[153,5656,5657],{},"valueHtml","）或模拟异步获取内容的地方。",[305,5660,5661,5662],{},"将其初始内容或设置的新内容改为：\n",[206,5663,5667],{"className":5664,"code":5665,"language":5666,"meta":211,"style":211},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv>\u003Cimg src=\"https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg\" alt=\"\" />\u003C/div>\n","html",[153,5668,5669],{"__ignoreMap":211},[215,5670,5671,5673,5675,5678,5681,5684,5686,5688,5691,5693,5696,5698,5700,5703,5705],{"class":217,"line":218},[215,5672,1425],{"class":599},[215,5674,3502],{"class":771},[215,5676,5677],{"class":599},">\u003C",[215,5679,5680],{"class":771},"img",[215,5682,5683],{"class":674}," src",[215,5685,606],{"class":599},[215,5687,648],{"class":599},[215,5689,5690],{"class":651},"https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg",[215,5692,648],{"class":599},[215,5694,5695],{"class":674}," alt",[215,5697,606],{"class":599},[215,5699,711],{"class":599},[215,5701,5702],{"class":599}," />\u003C/",[215,5704,3502],{"class":771},[215,5706,3505],{"class":599},[305,5708,5709,5710,5713],{},"你会发现编辑器中原本应该显示的图片变成了 ",[153,5711,5712],{},"\u003Cp>\u003Cbr>\u003C/p>","，导致图片无法显示。",[145,5715,1648],{"id":1648},[149,5717,5718],{},"经过深入研究和实践，我们找到了一个简单有效的解决方案：将div标签替换为p标签。",[195,5720,5722],{"id":5721},"修改前的代码结构","修改前的代码结构：",[206,5724,5726],{"className":5664,"code":5725,"language":5666,"meta":211,"style":211},"\u003Cdiv>\n  \u003Cimg src=\"https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg\" alt=\"\" />\n\u003C/div>\n",[153,5727,5728,5736,5760],{"__ignoreMap":211},[215,5729,5730,5732,5734],{"class":217,"line":218},[215,5731,1425],{"class":599},[215,5733,3502],{"class":771},[215,5735,3505],{"class":599},[215,5737,5738,5740,5742,5744,5746,5748,5750,5752,5754,5756,5758],{"class":217,"line":236},[215,5739,3499],{"class":599},[215,5741,5680],{"class":771},[215,5743,5683],{"class":674},[215,5745,606],{"class":599},[215,5747,648],{"class":599},[215,5749,5690],{"class":651},[215,5751,648],{"class":599},[215,5753,5695],{"class":674},[215,5755,606],{"class":599},[215,5757,711],{"class":599},[215,5759,1514],{"class":599},[215,5761,5762,5764,5766],{"class":217,"line":469},[215,5763,3521],{"class":599},[215,5765,3502],{"class":771},[215,5767,3505],{"class":599},[195,5769,5771],{"id":5770},"修改后的代码结构","修改后的代码结构：",[206,5773,5775],{"className":5664,"code":5774,"language":5666,"meta":211,"style":211},"\u003Cp>\n  \u003Cimg src=\"https://img3.redocn.com/20110418/20110416_6ad206b20544a083fdb0B6Kj0dud4sro.jpg\" alt=\"\" />\n\u003C/p>\n",[153,5776,5777,5785,5809],{"__ignoreMap":211},[215,5778,5779,5781,5783],{"class":217,"line":218},[215,5780,1425],{"class":599},[215,5782,149],{"class":771},[215,5784,3505],{"class":599},[215,5786,5787,5789,5791,5793,5795,5797,5799,5801,5803,5805,5807],{"class":217,"line":236},[215,5788,3499],{"class":599},[215,5790,5680],{"class":771},[215,5792,5683],{"class":674},[215,5794,606],{"class":599},[215,5796,648],{"class":599},[215,5798,5690],{"class":651},[215,5800,648],{"class":599},[215,5802,5695],{"class":674},[215,5804,606],{"class":599},[215,5806,711],{"class":599},[215,5808,1514],{"class":599},[215,5810,5811,5813,5815],{"class":217,"line":469},[215,5812,3521],{"class":599},[215,5814,149],{"class":771},[215,5816,3505],{"class":599},[145,5818,5819],{"id":5819},"实现步骤",[195,5821,5823],{"id":5822},"_1-数据预处理","1. 数据预处理",[149,5825,5826],{},"在将第三方接口获取的数据加载到Wangeditor之前，我们需要对数据进行预处理：",[206,5828,5832],{"className":5829,"code":5830,"language":5831,"meta":211,"style":211},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// 预处理函数：将div标签替换为p标签\nfunction preprocessEditorContent(content) {\n  // 将被div包裹的img标签替换为被p标签包裹的img标签\n  const processedContent = content.replace(\n    /<div>(\\s*<img[^>]*>)\\s*<\\/div>/g,\n    '<p>$1</p>'\n  );\n  \n  return processedContent;\n}\n\n// 使用示例\nconst rawContent = getThirdPartyData(); // 从第三方接口获取的原始数据\nconst processedContent = preprocessEditorContent(rawContent);\neditor.txt.html(processedContent); // 加载到Wangeditor中\n","javascript",[153,5833,5834,5839,5855,5860,5878,5927,5936,5943,5948,5956,5960,5964,5969,5988,6004],{"__ignoreMap":211},[215,5835,5836],{"class":217,"line":218},[215,5837,5838],{"class":590},"// 预处理函数：将div标签替换为p标签\n",[215,5840,5841,5843,5846,5848,5851,5853],{"class":217,"line":236},[215,5842,2718],{"class":674},[215,5844,5845],{"class":683}," preprocessEditorContent",[215,5847,687],{"class":599},[215,5849,5850],{"class":743},"content",[215,5852,827],{"class":599},[215,5854,761],{"class":599},[215,5856,5857],{"class":217,"line":469},[215,5858,5859],{"class":590},"  // 将被div包裹的img标签替换为被p标签包裹的img标签\n",[215,5861,5862,5864,5867,5869,5872,5874,5876],{"class":217,"line":724},[215,5863,804],{"class":674},[215,5865,5866],{"class":596}," processedContent",[215,5868,810],{"class":599},[215,5870,5871],{"class":596}," content",[215,5873,600],{"class":599},[215,5875,1804],{"class":683},[215,5877,889],{"class":771},[215,5879,5880,5883,5886,5888,5891,5894,5897,5899,5902,5905,5907,5909,5911,5913,5916,5918,5921,5923,5925],{"class":217,"line":730},[215,5881,5882],{"class":599},"    /",[215,5884,5885],{"class":651},"<div>",[215,5887,687],{"class":599},[215,5889,5890],{"class":651},"\\s",[215,5892,5893],{"class":599},"*",[215,5895,5896],{"class":651},"<img",[215,5898,1901],{"class":599},[215,5900,5901],{"class":651},">",[215,5903,5904],{"class":599},"]*",[215,5906,5901],{"class":651},[215,5908,827],{"class":599},[215,5910,5890],{"class":651},[215,5912,5893],{"class":599},[215,5914,5915],{"class":651},"<",[215,5917,1893],{"class":596},[215,5919,5920],{"class":651},"div>",[215,5922,126],{"class":599},[215,5924,1816],{"class":823},[215,5926,906],{"class":599},[215,5928,5929,5931,5934],{"class":217,"line":764},[215,5930,3306],{"class":599},[215,5932,5933],{"class":651},"<p>$1</p>",[215,5935,1777],{"class":599},[215,5937,5938,5941],{"class":217,"line":801},[215,5939,5940],{"class":771},"  )",[215,5942,612],{"class":599},[215,5944,5945],{"class":217,"line":832},[215,5946,5947],{"class":771},"  \n",[215,5949,5950,5952,5954],{"class":217,"line":861},[215,5951,835],{"class":767},[215,5953,5866],{"class":596},[215,5955,612],{"class":599},[215,5957,5958],{"class":217,"line":966},[215,5959,2351],{"class":599},[215,5961,5962],{"class":217,"line":1000},[215,5963,721],{"emptyLinePlaceholder":108},[215,5965,5966],{"class":217,"line":1005},[215,5967,5968],{"class":590},"// 使用示例\n",[215,5970,5971,5973,5976,5978,5981,5983,5985],{"class":217,"line":1022},[215,5972,675],{"class":674},[215,5974,5975],{"class":596}," rawContent ",[215,5977,606],{"class":599},[215,5979,5980],{"class":683}," getThirdPartyData",[215,5982,690],{"class":596},[215,5984,940],{"class":599},[215,5986,5987],{"class":590}," // 从第三方接口获取的原始数据\n",[215,5989,5990,5992,5995,5997,5999,6002],{"class":217,"line":1045},[215,5991,675],{"class":674},[215,5993,5994],{"class":596}," processedContent ",[215,5996,606],{"class":599},[215,5998,5845],{"class":683},[215,6000,6001],{"class":596},"(rawContent)",[215,6003,612],{"class":599},[215,6005,6006,6009,6011,6014,6016,6018,6021,6023],{"class":217,"line":1050},[215,6007,6008],{"class":596},"editor",[215,6010,600],{"class":599},[215,6012,6013],{"class":596},"txt",[215,6015,600],{"class":599},[215,6017,5666],{"class":683},[215,6019,6020],{"class":596},"(processedContent)",[215,6022,940],{"class":599},[215,6024,6025],{"class":590}," // 加载到Wangeditor中\n",[195,6027,6029],{"id":6028},"_2-针对多种html结构的处理","2. 针对多种HTML结构的处理",[149,6031,6032],{},"在实际应用中，HTML结构可能更加复杂，我们需要处理更多的情况：",[206,6034,6036],{"className":5829,"code":6035,"language":5831,"meta":211,"style":211},"function preprocessEditorContent(content) {\n  // 替换被div包裹的img标签为被p标签包裹的img标签\n  let processedContent = content.replace(\n    /<div>(\\s*<img[^>]*>)\\s*<\\/div>/g,\n    '<p>$1</p>'\n  );\n\n  // 处理包含class等属性的div标签\n  processedContent = processedContent.replace(\n    /<div([^>]*)>(\\s*<img[^>]*>)\\s*<\\/div>/g,\n    '<p$1>$2</p>'\n  );\n\n  // 处理嵌套结构\n  processedContent = processedContent.replace(\n    /<div([^>]*)\\s*class=\"([^\"]*)\"[^>]*>(\\s*<img[^>]*>)\\s*<\\/div>/g,\n    function(match, divAttr, classAttr, imgTag) {\n      // 将div的class属性复制到p标签\n      return `<p class=\"${classAttr}\"${divAttr.replace(`class=\"${classAttr}\"`, '')}>${imgTag}</p>`;\n    }\n  );\n\n  return processedContent;\n}\n",[153,6037,6038,6052,6057,6074,6114,6122,6128,6132,6137,6152,6203,6212,6218,6222,6227,6241,6310,6338,6343,6412,6416,6422,6426,6434],{"__ignoreMap":211},[215,6039,6040,6042,6044,6046,6048,6050],{"class":217,"line":218},[215,6041,2718],{"class":674},[215,6043,5845],{"class":683},[215,6045,687],{"class":599},[215,6047,5850],{"class":743},[215,6049,827],{"class":599},[215,6051,761],{"class":599},[215,6053,6054],{"class":217,"line":236},[215,6055,6056],{"class":590},"  // 替换被div包裹的img标签为被p标签包裹的img标签\n",[215,6058,6059,6062,6064,6066,6068,6070,6072],{"class":217,"line":469},[215,6060,6061],{"class":674},"  let",[215,6063,5866],{"class":596},[215,6065,810],{"class":599},[215,6067,5871],{"class":596},[215,6069,600],{"class":599},[215,6071,1804],{"class":683},[215,6073,889],{"class":771},[215,6075,6076,6078,6080,6082,6084,6086,6088,6090,6092,6094,6096,6098,6100,6102,6104,6106,6108,6110,6112],{"class":217,"line":724},[215,6077,5882],{"class":599},[215,6079,5885],{"class":651},[215,6081,687],{"class":599},[215,6083,5890],{"class":651},[215,6085,5893],{"class":599},[215,6087,5896],{"class":651},[215,6089,1901],{"class":599},[215,6091,5901],{"class":651},[215,6093,5904],{"class":599},[215,6095,5901],{"class":651},[215,6097,827],{"class":599},[215,6099,5890],{"class":651},[215,6101,5893],{"class":599},[215,6103,5915],{"class":651},[215,6105,1893],{"class":596},[215,6107,5920],{"class":651},[215,6109,126],{"class":599},[215,6111,1816],{"class":823},[215,6113,906],{"class":599},[215,6115,6116,6118,6120],{"class":217,"line":730},[215,6117,3306],{"class":599},[215,6119,5933],{"class":651},[215,6121,1777],{"class":599},[215,6123,6124,6126],{"class":217,"line":764},[215,6125,5940],{"class":771},[215,6127,612],{"class":599},[215,6129,6130],{"class":217,"line":801},[215,6131,721],{"emptyLinePlaceholder":108},[215,6133,6134],{"class":217,"line":832},[215,6135,6136],{"class":590},"  // 处理包含class等属性的div标签\n",[215,6138,6139,6142,6144,6146,6148,6150],{"class":217,"line":861},[215,6140,6141],{"class":596},"  processedContent",[215,6143,810],{"class":599},[215,6145,5866],{"class":596},[215,6147,600],{"class":599},[215,6149,1804],{"class":683},[215,6151,889],{"class":771},[215,6153,6154,6156,6159,6162,6164,6167,6169,6171,6173,6175,6177,6179,6181,6183,6185,6187,6189,6191,6193,6195,6197,6199,6201],{"class":217,"line":966},[215,6155,5882],{"class":599},[215,6157,6158],{"class":651},"<div",[215,6160,6161],{"class":599},"([^",[215,6163,5901],{"class":651},[215,6165,6166],{"class":599},"]*)",[215,6168,5901],{"class":651},[215,6170,687],{"class":599},[215,6172,5890],{"class":651},[215,6174,5893],{"class":599},[215,6176,5896],{"class":651},[215,6178,1901],{"class":599},[215,6180,5901],{"class":651},[215,6182,5904],{"class":599},[215,6184,5901],{"class":651},[215,6186,827],{"class":599},[215,6188,5890],{"class":651},[215,6190,5893],{"class":599},[215,6192,5915],{"class":651},[215,6194,1893],{"class":596},[215,6196,5920],{"class":651},[215,6198,126],{"class":599},[215,6200,1816],{"class":823},[215,6202,906],{"class":599},[215,6204,6205,6207,6210],{"class":217,"line":1000},[215,6206,3306],{"class":599},[215,6208,6209],{"class":651},"<p$1>$2</p>",[215,6211,1777],{"class":599},[215,6213,6214,6216],{"class":217,"line":1005},[215,6215,5940],{"class":771},[215,6217,612],{"class":599},[215,6219,6220],{"class":217,"line":1022},[215,6221,721],{"emptyLinePlaceholder":108},[215,6223,6224],{"class":217,"line":1045},[215,6225,6226],{"class":590},"  // 处理嵌套结构\n",[215,6228,6229,6231,6233,6235,6237,6239],{"class":217,"line":1050},[215,6230,6141],{"class":596},[215,6232,810],{"class":599},[215,6234,5866],{"class":596},[215,6236,600],{"class":599},[215,6238,1804],{"class":683},[215,6240,889],{"class":771},[215,6242,6243,6245,6247,6249,6251,6253,6255,6257,6260,6262,6264,6266,6268,6270,6272,6274,6276,6278,6280,6282,6284,6286,6288,6290,6292,6294,6296,6298,6300,6302,6304,6306,6308],{"class":217,"line":1055},[215,6244,5882],{"class":599},[215,6246,6158],{"class":651},[215,6248,6161],{"class":599},[215,6250,5901],{"class":651},[215,6252,6166],{"class":599},[215,6254,5890],{"class":651},[215,6256,5893],{"class":599},[215,6258,6259],{"class":651},"class=\"",[215,6261,6161],{"class":599},[215,6263,648],{"class":651},[215,6265,6166],{"class":599},[215,6267,648],{"class":651},[215,6269,1901],{"class":599},[215,6271,5901],{"class":651},[215,6273,5904],{"class":599},[215,6275,5901],{"class":651},[215,6277,687],{"class":599},[215,6279,5890],{"class":651},[215,6281,5893],{"class":599},[215,6283,5896],{"class":651},[215,6285,1901],{"class":599},[215,6287,5901],{"class":651},[215,6289,5904],{"class":599},[215,6291,5901],{"class":651},[215,6293,827],{"class":599},[215,6295,5890],{"class":651},[215,6297,5893],{"class":599},[215,6299,5915],{"class":651},[215,6301,1893],{"class":596},[215,6303,5920],{"class":651},[215,6305,126],{"class":599},[215,6307,1816],{"class":823},[215,6309,906],{"class":599},[215,6311,6312,6315,6317,6319,6321,6324,6326,6329,6331,6334,6336],{"class":217,"line":1062},[215,6313,6314],{"class":674},"    function",[215,6316,687],{"class":599},[215,6318,1884],{"class":743},[215,6320,820],{"class":599},[215,6322,6323],{"class":743}," divAttr",[215,6325,820],{"class":599},[215,6327,6328],{"class":743}," classAttr",[215,6330,820],{"class":599},[215,6332,6333],{"class":743}," imgTag",[215,6335,827],{"class":599},[215,6337,761],{"class":599},[215,6339,6340],{"class":217,"line":1077},[215,6341,6342],{"class":590},"      // 将div的class属性复制到p标签\n",[215,6344,6345,6348,6350,6353,6355,6358,6360,6362,6364,6367,6369,6371,6373,6376,6378,6380,6382,6384,6386,6388,6390,6392,6394,6396,6398,6400,6403,6405,6408,6410],{"class":217,"line":1086},[215,6346,6347],{"class":767},"      return",[215,6349,1434],{"class":599},[215,6351,6352],{"class":651},"<p class=\"",[215,6354,1439],{"class":599},[215,6356,6357],{"class":596},"classAttr",[215,6359,2000],{"class":599},[215,6361,648],{"class":651},[215,6363,1439],{"class":599},[215,6365,6366],{"class":596},"divAttr",[215,6368,600],{"class":599},[215,6370,1804],{"class":683},[215,6372,687],{"class":596},[215,6374,6375],{"class":599},"`",[215,6377,6259],{"class":651},[215,6379,1439],{"class":599},[215,6381,6357],{"class":596},[215,6383,2000],{"class":599},[215,6385,648],{"class":651},[215,6387,6375],{"class":599},[215,6389,820],{"class":599},[215,6391,1964],{"class":599},[215,6393,827],{"class":596},[215,6395,2000],{"class":599},[215,6397,5901],{"class":651},[215,6399,1439],{"class":599},[215,6401,6402],{"class":596},"imgTag",[215,6404,2000],{"class":599},[215,6406,6407],{"class":651},"</p>",[215,6409,6375],{"class":599},[215,6411,612],{"class":599},[215,6413,6414],{"class":217,"line":1099},[215,6415,4000],{"class":599},[215,6417,6418,6420],{"class":217,"line":1127},[215,6419,5940],{"class":771},[215,6421,612],{"class":599},[215,6423,6424],{"class":217,"line":1132},[215,6425,721],{"emptyLinePlaceholder":108},[215,6427,6428,6430,6432],{"class":217,"line":1139},[215,6429,835],{"class":767},[215,6431,5866],{"class":596},[215,6433,612],{"class":599},[215,6435,6436],{"class":217,"line":1144},[215,6437,2351],{"class":599},[145,6439,6440],{"id":6440},"注意事项",[302,6442,6443,6449,6455],{},[305,6444,6445,6448],{},[163,6446,6447],{},"样式适配","：将div替换为p标签后，原有的CSS样式可能需要调整，因为p标签和div标签的默认样式可能不同。",[305,6450,6451,6454],{},[163,6452,6453],{},"语义化考虑","：从HTML语义化的角度看，p标签是用于段落的，如果div包含的不仅仅是图片，而是混合内容，需要谨慎使用此方法。",[305,6456,6457,6460],{},[163,6458,6459],{},"测试验证","：在应用此解决方案后，需要充分测试以确保没有引入其他问题。",[145,6462,445],{"id":445},[149,6464,6465],{},"通过将div标签替换为p标签的方式，我们成功解决了Wangeditor过滤被div包裹的img标签的问题。这种解决方案简单有效，且不会对Wangeditor的安全机制造成影响。但是鉴于Wangeditor已经不在维护，如果没有从外部导入富文本数据的功能还是可以使用，否则不建议使用Wangeditor。",[158,6467,6468],{},[149,6469,1585],{},[460,6471,6472],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":211,"searchDepth":236,"depth":236,"links":6474},[6475,6476,6477,6478,6482,6486,6487],{"id":147,"depth":236,"text":147},{"id":5610,"depth":236,"text":5610},{"id":5634,"depth":236,"text":5634},{"id":1648,"depth":236,"text":1648,"children":6479},[6480,6481],{"id":5721,"depth":469,"text":5722},{"id":5770,"depth":469,"text":5771},{"id":5819,"depth":236,"text":5819,"children":6483},[6484,6485],{"id":5822,"depth":469,"text":5823},{"id":6028,"depth":469,"text":6029},{"id":6440,"depth":236,"text":6440},{"id":445,"depth":236,"text":445},"2026-01-04T00:00:00.000Z","解决Wangeditor对div中img标签的过滤问题，特别是处理第三方接口导入商品详情时的兼容性问题",{"src":6491},"https://picsum.photos/id/911/640/360",{},{"title":72,"description":6489},"24yzUczsse9WyOeuJ0-vfGjkLSxO5TInnolIDYXSdgI",{"id":6496,"title":68,"authors":6497,"badge":6500,"body":6501,"date":9128,"description":9129,"extension":477,"image":9130,"meta":9132,"navigation":108,"path":69,"seo":9133,"stem":70,"__hash__":9134},"posts/3.blog/3.file-upload-issue-solution.md",[6498],{"name":135,"avatar":6499},{"src":138},{"label":5437},{"type":142,"value":6502,"toc":9114},[6503,6524,6527,6530,6541,6548,6552,6562,6566,7115,7119,8132,8136,9007,9009,9013,9025,9029,9050,9054,9071,9073,9087,9104,9107,9111],[149,6504,6505,6506,6511,6512,6517,6518,6523],{},"在使用 uni-app 开发过程中，我们经常 会遇到文件上传的需求。然而，",[1247,6507,6510],{"href":6508,"rel":6509},"https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile",[1251],"uni.uploadFile"," 方法存在一个限制：它无法在一个请求中上传多个文件。本文将介绍如何在 H5 环境下使用 ",[1247,6513,6516],{"href":6514,"rel":6515},"https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API",[1251],"fetch"," + ",[1247,6519,6522],{"href":6520,"rel":6521},"https://developer.mozilla.org/zh-CN/docs/Web/API/FormData",[1251],"FormData"," 来解决这个问题。",[145,6525,6526],{"id":6526},"问题描述",[149,6528,6529],{},"在开发中，我们常常需要一次性上传多个文件，例如：",[302,6531,6532,6535,6538],{},[305,6533,6534],{},"上传多张图片作为产品展示",[305,6536,6537],{},"上传多个文档文件",[305,6539,6540],{},"同时上传头像和背景图",[149,6542,6543,6544,6547],{},"但是，uni-app 提供的 ",[1247,6545,6510],{"href":6508,"rel":6546},[1251]," API 只能上传单个文件，即使多次调用也可能导致后端处理复杂。",[145,6549,6551],{"id":6550},"解决方案使用-fetch-formdata","解决方案：使用 fetch + FormData",[149,6553,6554,6555,2442,6558,6561],{},"在 H5 环境中，我们可以使用原生的 ",[1247,6556,6516],{"href":6514,"rel":6557},[1251],[1247,6559,6522],{"href":6520,"rel":6560},[1251]," 来实现多文件上传。",[195,6563,6565],{"id":6564},"_1-基础实现","1. 基础实现",[206,6567,6569],{"className":580,"code":6568,"language":583,"meta":211,"style":211},"// 在 H5 环境下上传多文件\nfunction uploadMultipleFiles(files: File[], uploadUrl: string): Promise\u003Cany> {\n  // 检查是否在 H5 环境中\n  if ((globalThis as any).__PLATFORM__ !== 'h5') {\n    console.warn('此方法仅支持 H5 环境');\n    return Promise.reject(new Error('此方法仅支持 H5 环境'));\n  }\n\n  const formData = new FormData();\n  \n  // 将多个文件添加到 FormData 中\n  files.forEach((file: File, index: number) => {\n    // 可以使用相同字段名，后端会接收为数组\n    formData.append('files', file, file.name);\n    // 或者使用不同字段名\n    // formData.append(`file_${index}`, file, file.name);\n  });\n\n  // 添加其他参数\n  formData.append('userId', '123');\n  formData.append('category', 'images');\n\n  return fetch(uploadUrl, {\n    method: 'POST',\n    body: formData\n  })\n  .then(response => response.json()) // 注意：fetch 的 then 需先进行 json 处理\n  .then(data => {\n    console.log('上传成功:', data);\n    return data;\n  })\n  .catch(error => {\n    console.error('上传失败:', error);\n    throw error;\n  });\n}\n",[153,6570,6571,6576,6619,6624,6660,6683,6715,6719,6723,6741,6745,6750,6787,6792,6828,6833,6838,6846,6850,6855,6886,6915,6919,6935,6951,6961,6967,6996,7011,7038,7046,7052,7068,7094,7103,7111],{"__ignoreMap":211},[215,6572,6573],{"class":217,"line":218},[215,6574,6575],{"class":590},"// 在 H5 环境下上传多文件\n",[215,6577,6578,6580,6583,6585,6588,6590,6593,6596,6598,6601,6603,6605,6607,6610,6612,6615,6617],{"class":217,"line":236},[215,6579,2718],{"class":674},[215,6581,6582],{"class":683}," uploadMultipleFiles",[215,6584,687],{"class":599},[215,6586,6587],{"class":743},"files",[215,6589,747],{"class":599},[215,6591,6592],{"class":750}," File",[215,6594,6595],{"class":596},"[]",[215,6597,820],{"class":599},[215,6599,6600],{"class":743}," uploadUrl",[215,6602,747],{"class":599},[215,6604,751],{"class":750},[215,6606,754],{"class":599},[215,6608,6609],{"class":750}," Promise",[215,6611,1425],{"class":599},[215,6613,6614],{"class":750},"any",[215,6616,986],{"class":599},[215,6618,761],{"class":599},[215,6620,6621],{"class":217,"line":469},[215,6622,6623],{"class":590},"  // 检查是否在 H5 环境中\n",[215,6625,6626,6628,6631,6634,6637,6640,6642,6644,6647,6649,6651,6654,6656,6658],{"class":217,"line":724},[215,6627,768],{"class":767},[215,6629,6630],{"class":771}," ((",[215,6632,6633],{"class":596},"globalThis",[215,6635,6636],{"class":767}," as",[215,6638,6639],{"class":750}," any",[215,6641,827],{"class":771},[215,6643,600],{"class":599},[215,6645,6646],{"class":596},"__PLATFORM__",[215,6648,1752],{"class":599},[215,6650,1755],{"class":599},[215,6652,6653],{"class":651},"h5",[215,6655,1761],{"class":599},[215,6657,786],{"class":771},[215,6659,1683],{"class":599},[215,6661,6662,6665,6667,6670,6672,6674,6677,6679,6681],{"class":217,"line":730},[215,6663,6664],{"class":596},"    console",[215,6666,600],{"class":599},[215,6668,6669],{"class":683},"warn",[215,6671,687],{"class":771},[215,6673,1761],{"class":599},[215,6675,6676],{"class":651},"此方法仅支持 H5 环境",[215,6678,1761],{"class":599},[215,6680,827],{"class":771},[215,6682,612],{"class":599},[215,6684,6685,6688,6690,6692,6695,6697,6700,6703,6705,6707,6709,6711,6713],{"class":217,"line":764},[215,6686,6687],{"class":767},"    return",[215,6689,6609],{"class":750},[215,6691,600],{"class":599},[215,6693,6694],{"class":683},"reject",[215,6696,687],{"class":771},[215,6698,6699],{"class":599},"new",[215,6701,6702],{"class":683}," Error",[215,6704,687],{"class":771},[215,6706,1761],{"class":599},[215,6708,6676],{"class":651},[215,6710,1761],{"class":599},[215,6712,714],{"class":771},[215,6714,612],{"class":599},[215,6716,6717],{"class":217,"line":801},[215,6718,3447],{"class":599},[215,6720,6721],{"class":217,"line":832},[215,6722,721],{"emptyLinePlaceholder":108},[215,6724,6725,6727,6730,6732,6734,6737,6739],{"class":217,"line":861},[215,6726,804],{"class":674},[215,6728,6729],{"class":596}," formData",[215,6731,810],{"class":599},[215,6733,2467],{"class":599},[215,6735,6736],{"class":683}," FormData",[215,6738,690],{"class":771},[215,6740,612],{"class":599},[215,6742,6743],{"class":217,"line":966},[215,6744,5947],{"class":771},[215,6746,6747],{"class":217,"line":1000},[215,6748,6749],{"class":590},"  // 将多个文件添加到 FormData 中\n",[215,6751,6752,6755,6757,6760,6762,6764,6767,6769,6771,6773,6776,6778,6781,6783,6785],{"class":217,"line":1005},[215,6753,6754],{"class":596},"  files",[215,6756,600],{"class":599},[215,6758,6759],{"class":683},"forEach",[215,6761,687],{"class":771},[215,6763,687],{"class":599},[215,6765,6766],{"class":743},"file",[215,6768,747],{"class":599},[215,6770,6592],{"class":750},[215,6772,820],{"class":599},[215,6774,6775],{"class":743}," index",[215,6777,747],{"class":599},[215,6779,6780],{"class":750}," number",[215,6782,827],{"class":599},[215,6784,693],{"class":674},[215,6786,761],{"class":599},[215,6788,6789],{"class":217,"line":1022},[215,6790,6791],{"class":590},"    // 可以使用相同字段名，后端会接收为数组\n",[215,6793,6794,6797,6799,6802,6804,6806,6808,6810,6812,6815,6817,6819,6821,6824,6826],{"class":217,"line":1045},[215,6795,6796],{"class":596},"    formData",[215,6798,600],{"class":599},[215,6800,6801],{"class":683},"append",[215,6803,687],{"class":771},[215,6805,1761],{"class":599},[215,6807,6587],{"class":651},[215,6809,1761],{"class":599},[215,6811,820],{"class":599},[215,6813,6814],{"class":596}," file",[215,6816,820],{"class":599},[215,6818,6814],{"class":596},[215,6820,600],{"class":599},[215,6822,6823],{"class":596},"name",[215,6825,827],{"class":771},[215,6827,612],{"class":599},[215,6829,6830],{"class":217,"line":1050},[215,6831,6832],{"class":590},"    // 或者使用不同字段名\n",[215,6834,6835],{"class":217,"line":1055},[215,6836,6837],{"class":590},"    // formData.append(`file_${index}`, file, file.name);\n",[215,6839,6840,6842,6844],{"class":217,"line":1062},[215,6841,2297],{"class":599},[215,6843,827],{"class":771},[215,6845,612],{"class":599},[215,6847,6848],{"class":217,"line":1077},[215,6849,721],{"emptyLinePlaceholder":108},[215,6851,6852],{"class":217,"line":1086},[215,6853,6854],{"class":590},"  // 添加其他参数\n",[215,6856,6857,6860,6862,6864,6866,6868,6871,6873,6875,6877,6880,6882,6884],{"class":217,"line":1099},[215,6858,6859],{"class":596},"  formData",[215,6861,600],{"class":599},[215,6863,6801],{"class":683},[215,6865,687],{"class":771},[215,6867,1761],{"class":599},[215,6869,6870],{"class":651},"userId",[215,6872,1761],{"class":599},[215,6874,820],{"class":599},[215,6876,1755],{"class":599},[215,6878,6879],{"class":651},"123",[215,6881,1761],{"class":599},[215,6883,827],{"class":771},[215,6885,612],{"class":599},[215,6887,6888,6890,6892,6894,6896,6898,6900,6902,6904,6906,6909,6911,6913],{"class":217,"line":1127},[215,6889,6859],{"class":596},[215,6891,600],{"class":599},[215,6893,6801],{"class":683},[215,6895,687],{"class":771},[215,6897,1761],{"class":599},[215,6899,4123],{"class":651},[215,6901,1761],{"class":599},[215,6903,820],{"class":599},[215,6905,1755],{"class":599},[215,6907,6908],{"class":651},"images",[215,6910,1761],{"class":599},[215,6912,827],{"class":771},[215,6914,612],{"class":599},[215,6916,6917],{"class":217,"line":1132},[215,6918,721],{"emptyLinePlaceholder":108},[215,6920,6921,6923,6926,6928,6931,6933],{"class":217,"line":1139},[215,6922,835],{"class":767},[215,6924,6925],{"class":683}," fetch",[215,6927,687],{"class":771},[215,6929,6930],{"class":596},"uploadUrl",[215,6932,820],{"class":599},[215,6934,761],{"class":599},[215,6936,6937,6940,6942,6944,6947,6949],{"class":217,"line":1144},[215,6938,6939],{"class":771},"    method",[215,6941,747],{"class":599},[215,6943,1755],{"class":599},[215,6945,6946],{"class":651},"POST",[215,6948,1761],{"class":599},[215,6950,906],{"class":599},[215,6952,6953,6956,6958],{"class":217,"line":3788},[215,6954,6955],{"class":771},"    body",[215,6957,747],{"class":599},[215,6959,6960],{"class":596}," formData\n",[215,6962,6963,6965],{"class":217,"line":3794},[215,6964,2297],{"class":599},[215,6966,1764],{"class":771},[215,6968,6969,6972,6975,6977,6980,6982,6985,6987,6990,6993],{"class":217,"line":3811},[215,6970,6971],{"class":599},"  .",[215,6973,6974],{"class":683},"then",[215,6976,687],{"class":771},[215,6978,6979],{"class":743},"response",[215,6981,693],{"class":674},[215,6983,6984],{"class":596}," response",[215,6986,600],{"class":599},[215,6988,6989],{"class":683},"json",[215,6991,6992],{"class":771},"()) ",[215,6994,6995],{"class":590},"// 注意：fetch 的 then 需先进行 json 处理\n",[215,6997,6998,7000,7002,7004,7007,7009],{"class":217,"line":3828},[215,6999,6971],{"class":599},[215,7001,6974],{"class":683},[215,7003,687],{"class":771},[215,7005,7006],{"class":743},"data",[215,7008,693],{"class":674},[215,7010,761],{"class":599},[215,7012,7013,7015,7017,7020,7022,7024,7027,7029,7031,7034,7036],{"class":217,"line":3845},[215,7014,6664],{"class":596},[215,7016,600],{"class":599},[215,7018,7019],{"class":683},"log",[215,7021,687],{"class":771},[215,7023,1761],{"class":599},[215,7025,7026],{"class":651},"上传成功:",[215,7028,1761],{"class":599},[215,7030,820],{"class":599},[215,7032,7033],{"class":596}," data",[215,7035,827],{"class":771},[215,7037,612],{"class":599},[215,7039,7040,7042,7044],{"class":217,"line":3855},[215,7041,6687],{"class":767},[215,7043,7033],{"class":596},[215,7045,612],{"class":599},[215,7047,7048,7050],{"class":217,"line":3883},[215,7049,2297],{"class":599},[215,7051,1764],{"class":771},[215,7053,7054,7056,7059,7061,7064,7066],{"class":217,"line":3910},[215,7055,6971],{"class":599},[215,7057,7058],{"class":683},"catch",[215,7060,687],{"class":771},[215,7062,7063],{"class":743},"error",[215,7065,693],{"class":674},[215,7067,761],{"class":599},[215,7069,7070,7072,7074,7076,7078,7080,7083,7085,7087,7090,7092],{"class":217,"line":3937},[215,7071,6664],{"class":596},[215,7073,600],{"class":599},[215,7075,7063],{"class":683},[215,7077,687],{"class":771},[215,7079,1761],{"class":599},[215,7081,7082],{"class":651},"上传失败:",[215,7084,1761],{"class":599},[215,7086,820],{"class":599},[215,7088,7089],{"class":596}," error",[215,7091,827],{"class":771},[215,7093,612],{"class":599},[215,7095,7096,7099,7101],{"class":217,"line":3964},[215,7097,7098],{"class":767},"    throw",[215,7100,7089],{"class":596},[215,7102,612],{"class":599},[215,7104,7105,7107,7109],{"class":217,"line":3991},[215,7106,2297],{"class":599},[215,7108,827],{"class":771},[215,7110,612],{"class":599},[215,7112,7113],{"class":217,"line":3997},[215,7114,2351],{"class":599},[195,7116,7118],{"id":7117},"_2-在-vue-组件中的使用示例","2. 在 Vue 组件中的使用示例",[206,7120,7122],{"className":3478,"code":7121,"language":3480,"meta":211,"style":211},"\u003Ctemplate>\n  \u003Cdiv class=\"upload-container\">\n    \u003Cinput \n      type=\"file\" \n      ref=\"fileInput\" \n      multiple \n      accept=\"image/*\" \n      @change=\"handleFileSelect\"\n    />\n    \u003Cbutton @click=\"uploadFiles\" :disabled=\"!selectedFiles.length\">\n      上传选中的 {{ selectedFiles.length }} 个文件\n    \u003C/button>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from 'vue';\n\nconst fileInput = ref(null);\nconst selectedFiles = ref([]);\n\nconst handleFileSelect = (event) => {\n  // 获取用户选择的文件列表\n  const files = Array.from(event.target.files);\n  selectedFiles.value = files;\n};\n\nconst uploadFiles = async () => {\n  if (!selectedFiles.value.length) {\n    alert('请先选择文件');\n    return;\n  }\n\n  // 检查是否在 H5 环境\n  if (process.client && typeof window !== 'undefined' && window.fetch) {\n    try {\n      const result = await uploadMultipleFiles(selectedFiles.value, '/api/upload');\n      console.log('上传结果:', result);\n      alert('上传成功');\n    } catch (error) {\n      console.error('上传失败:', error);\n      alert('上传失败: ' + error.message);\n    }\n  } else {\n    alert('此功能仅在 H5 环境下可用');\n  }\n};\n\n// 多文件上传函数\nasync function uploadMultipleFiles(files, uploadUrl) {\n  const formData = new FormData();\n  \n  // 将多个文件添加到 FormData 中\n  files.forEach(file => {\n    formData.append('files', file, file.name);\n  });\n\n  // 添加其他参数\n  formData.append('timestamp', Date.now().toString());\n\n  const response = await fetch(uploadUrl, {\n    method: 'POST',\n    body: formData\n  });\n\n  // 注意：fetch 的 then 需先进行 json 处理\n  if (response.ok) {\n    const result = await response.json();\n    return result;\n  } else {\n    throw new Error(`上传失败，状态码: ${response.status}`);\n  }\n}\n\u003C/script>\n",[153,7123,7124,7132,7151,7160,7174,7190,7197,7213,7230,7235,7280,7302,7310,7318,7326,7330,7340,7360,7364,7384,7400,7404,7424,7429,7462,7477,7481,7485,7502,7524,7542,7548,7552,7556,7561,7604,7611,7646,7672,7690,7706,7730,7756,7760,7769,7786,7790,7794,7798,7803,7824,7840,7844,7848,7864,7896,7905,7910,7915,7954,7959,7980,7995,8004,8013,8018,8024,8042,8064,8073,8082,8113,8118,8123],{"__ignoreMap":211},[215,7125,7126,7128,7130],{"class":217,"line":218},[215,7127,1425],{"class":599},[215,7129,3489],{"class":771},[215,7131,3505],{"class":599},[215,7133,7134,7136,7138,7140,7142,7144,7147,7149],{"class":217,"line":236},[215,7135,3499],{"class":599},[215,7137,3502],{"class":771},[215,7139,4341],{"class":674},[215,7141,606],{"class":599},[215,7143,648],{"class":599},[215,7145,7146],{"class":651},"upload-container",[215,7148,648],{"class":599},[215,7150,3505],{"class":599},[215,7152,7153,7155,7158],{"class":217,"line":469},[215,7154,3510],{"class":599},[215,7156,7157],{"class":771},"input",[215,7159,3494],{"class":599},[215,7161,7162,7164,7166,7168,7170,7172],{"class":217,"line":724},[215,7163,3814],{"class":674},[215,7165,606],{"class":599},[215,7167,648],{"class":599},[215,7169,6766],{"class":651},[215,7171,648],{"class":599},[215,7173,3494],{"class":599},[215,7175,7176,7179,7181,7183,7186,7188],{"class":217,"line":730},[215,7177,7178],{"class":674},"      ref",[215,7180,606],{"class":599},[215,7182,648],{"class":599},[215,7184,7185],{"class":651},"fileInput",[215,7187,648],{"class":599},[215,7189,3494],{"class":599},[215,7191,7192,7195],{"class":217,"line":764},[215,7193,7194],{"class":674},"      multiple",[215,7196,3494],{"class":599},[215,7198,7199,7202,7204,7206,7209,7211],{"class":217,"line":801},[215,7200,7201],{"class":674},"      accept",[215,7203,606],{"class":599},[215,7205,648],{"class":599},[215,7207,7208],{"class":651},"image/*",[215,7210,648],{"class":599},[215,7212,3494],{"class":599},[215,7214,7215,7218,7221,7223,7225,7228],{"class":217,"line":832},[215,7216,7217],{"class":599},"      @",[215,7219,7220],{"class":674},"change",[215,7222,606],{"class":599},[215,7224,648],{"class":599},[215,7226,7227],{"class":596},"handleFileSelect",[215,7229,655],{"class":599},[215,7231,7232],{"class":217,"line":861},[215,7233,7234],{"class":599},"    />\n",[215,7236,7237,7239,7242,7245,7248,7250,7252,7255,7257,7259,7262,7264,7266,7268,7271,7273,7276,7278],{"class":217,"line":966},[215,7238,3510],{"class":599},[215,7240,7241],{"class":771},"button",[215,7243,7244],{"class":599}," @",[215,7246,7247],{"class":674},"click",[215,7249,606],{"class":599},[215,7251,648],{"class":599},[215,7253,7254],{"class":596},"uploadFiles",[215,7256,648],{"class":599},[215,7258,1456],{"class":599},[215,7260,7261],{"class":674},"disabled",[215,7263,606],{"class":599},[215,7265,648],{"class":599},[215,7267,1738],{"class":599},[215,7269,7270],{"class":596},"selectedFiles",[215,7272,600],{"class":599},[215,7274,7275],{"class":596},"length",[215,7277,648],{"class":599},[215,7279,3505],{"class":599},[215,7281,7282,7285,7288,7291,7293,7296,7299],{"class":217,"line":1000},[215,7283,7284],{"class":596},"      上传选中的 ",[215,7286,7287],{"class":599},"{{",[215,7289,7290],{"class":596}," selectedFiles",[215,7292,600],{"class":599},[215,7294,7295],{"class":596},"length ",[215,7297,7298],{"class":599},"}}",[215,7300,7301],{"class":596}," 个文件\n",[215,7303,7304,7306,7308],{"class":217,"line":1005},[215,7305,3583],{"class":599},[215,7307,7241],{"class":771},[215,7309,3505],{"class":599},[215,7311,7312,7314,7316],{"class":217,"line":1022},[215,7313,3592],{"class":599},[215,7315,3502],{"class":771},[215,7317,3505],{"class":599},[215,7319,7320,7322,7324],{"class":217,"line":1045},[215,7321,3521],{"class":599},[215,7323,3489],{"class":771},[215,7325,3505],{"class":599},[215,7327,7328],{"class":217,"line":1050},[215,7329,721],{"emptyLinePlaceholder":108},[215,7331,7332,7334,7336,7338],{"class":217,"line":1055},[215,7333,1425],{"class":599},[215,7335,3615],{"class":771},[215,7337,3618],{"class":674},[215,7339,3505],{"class":599},[215,7341,7342,7344,7346,7348,7350,7352,7354,7356,7358],{"class":217,"line":1062},[215,7343,2140],{"class":767},[215,7345,2184],{"class":599},[215,7347,3669],{"class":596},[215,7349,2190],{"class":599},[215,7351,2193],{"class":767},[215,7353,1755],{"class":599},[215,7355,3480],{"class":651},[215,7357,1761],{"class":599},[215,7359,612],{"class":599},[215,7361,7362],{"class":217,"line":1077},[215,7363,721],{"emptyLinePlaceholder":108},[215,7365,7366,7368,7371,7373,7375,7377,7380,7382],{"class":217,"line":1086},[215,7367,675],{"class":674},[215,7369,7370],{"class":596}," fileInput ",[215,7372,606],{"class":599},[215,7374,3669],{"class":683},[215,7376,687],{"class":596},[215,7378,7379],{"class":599},"null",[215,7381,827],{"class":596},[215,7383,612],{"class":599},[215,7385,7386,7388,7391,7393,7395,7398],{"class":217,"line":1099},[215,7387,675],{"class":674},[215,7389,7390],{"class":596}," selectedFiles ",[215,7392,606],{"class":599},[215,7394,3669],{"class":683},[215,7396,7397],{"class":596},"([])",[215,7399,612],{"class":599},[215,7401,7402],{"class":217,"line":1127},[215,7403,721],{"emptyLinePlaceholder":108},[215,7405,7406,7408,7411,7413,7415,7418,7420,7422],{"class":217,"line":1132},[215,7407,675],{"class":674},[215,7409,7410],{"class":596}," handleFileSelect ",[215,7412,606],{"class":599},[215,7414,740],{"class":599},[215,7416,7417],{"class":743},"event",[215,7419,827],{"class":599},[215,7421,693],{"class":674},[215,7423,761],{"class":599},[215,7425,7426],{"class":217,"line":1139},[215,7427,7428],{"class":590},"  // 获取用户选择的文件列表\n",[215,7430,7431,7433,7436,7438,7441,7443,7445,7447,7449,7451,7454,7456,7458,7460],{"class":217,"line":1144},[215,7432,804],{"class":674},[215,7434,7435],{"class":596}," files",[215,7437,810],{"class":599},[215,7439,7440],{"class":596}," Array",[215,7442,600],{"class":599},[215,7444,2657],{"class":683},[215,7446,687],{"class":771},[215,7448,7417],{"class":596},[215,7450,600],{"class":599},[215,7452,7453],{"class":596},"target",[215,7455,600],{"class":599},[215,7457,6587],{"class":596},[215,7459,827],{"class":771},[215,7461,612],{"class":599},[215,7463,7464,7467,7469,7471,7473,7475],{"class":217,"line":3788},[215,7465,7466],{"class":596},"  selectedFiles",[215,7468,600],{"class":599},[215,7470,701],{"class":596},[215,7472,810],{"class":599},[215,7474,7435],{"class":596},[215,7476,612],{"class":599},[215,7478,7479],{"class":217,"line":3794},[215,7480,864],{"class":599},[215,7482,7483],{"class":217,"line":3811},[215,7484,721],{"emptyLinePlaceholder":108},[215,7486,7487,7489,7492,7494,7496,7498,7500],{"class":217,"line":3828},[215,7488,675],{"class":674},[215,7490,7491],{"class":596}," uploadFiles ",[215,7493,606],{"class":599},[215,7495,2211],{"class":674},[215,7497,1015],{"class":599},[215,7499,693],{"class":674},[215,7501,761],{"class":599},[215,7503,7504,7506,7508,7510,7512,7514,7516,7518,7520,7522],{"class":217,"line":3845},[215,7505,768],{"class":767},[215,7507,740],{"class":771},[215,7509,1738],{"class":599},[215,7511,7270],{"class":596},[215,7513,600],{"class":599},[215,7515,701],{"class":596},[215,7517,600],{"class":599},[215,7519,7275],{"class":596},[215,7521,786],{"class":771},[215,7523,1683],{"class":599},[215,7525,7526,7529,7531,7533,7536,7538,7540],{"class":217,"line":3855},[215,7527,7528],{"class":683},"    alert",[215,7530,687],{"class":771},[215,7532,1761],{"class":599},[215,7534,7535],{"class":651},"请先选择文件",[215,7537,1761],{"class":599},[215,7539,827],{"class":771},[215,7541,612],{"class":599},[215,7543,7544,7546],{"class":217,"line":3883},[215,7545,6687],{"class":767},[215,7547,612],{"class":599},[215,7549,7550],{"class":217,"line":3910},[215,7551,3447],{"class":599},[215,7553,7554],{"class":217,"line":3937},[215,7555,721],{"emptyLinePlaceholder":108},[215,7557,7558],{"class":217,"line":3964},[215,7559,7560],{"class":590},"  // 检查是否在 H5 环境\n",[215,7562,7563,7565,7567,7570,7572,7575,7578,7580,7583,7585,7587,7590,7592,7594,7596,7598,7600,7602],{"class":217,"line":3991},[215,7564,768],{"class":767},[215,7566,740],{"class":771},[215,7568,7569],{"class":596},"process",[215,7571,600],{"class":599},[215,7573,7574],{"class":596},"client",[215,7576,7577],{"class":599}," &&",[215,7579,1746],{"class":599},[215,7581,7582],{"class":596}," window",[215,7584,1752],{"class":599},[215,7586,1755],{"class":599},[215,7588,7589],{"class":651},"undefined",[215,7591,1761],{"class":599},[215,7593,7577],{"class":599},[215,7595,7582],{"class":596},[215,7597,600],{"class":599},[215,7599,6516],{"class":596},[215,7601,786],{"class":771},[215,7603,1683],{"class":599},[215,7605,7606,7609],{"class":217,"line":3997},[215,7607,7608],{"class":767},"    try",[215,7610,761],{"class":599},[215,7612,7613,7616,7619,7621,7623,7625,7627,7629,7631,7633,7635,7637,7640,7642,7644],{"class":217,"line":4003},[215,7614,7615],{"class":674},"      const",[215,7617,7618],{"class":596}," result",[215,7620,810],{"class":599},[215,7622,2248],{"class":767},[215,7624,6582],{"class":683},[215,7626,687],{"class":771},[215,7628,7270],{"class":596},[215,7630,600],{"class":599},[215,7632,701],{"class":596},[215,7634,820],{"class":599},[215,7636,1755],{"class":599},[215,7638,7639],{"class":651},"/api/upload",[215,7641,1761],{"class":599},[215,7643,827],{"class":771},[215,7645,612],{"class":599},[215,7647,7648,7651,7653,7655,7657,7659,7662,7664,7666,7668,7670],{"class":217,"line":4009},[215,7649,7650],{"class":596},"      console",[215,7652,600],{"class":599},[215,7654,7019],{"class":683},[215,7656,687],{"class":771},[215,7658,1761],{"class":599},[215,7660,7661],{"class":651},"上传结果:",[215,7663,1761],{"class":599},[215,7665,820],{"class":599},[215,7667,7618],{"class":596},[215,7669,827],{"class":771},[215,7671,612],{"class":599},[215,7673,7674,7677,7679,7681,7684,7686,7688],{"class":217,"line":4016},[215,7675,7676],{"class":683},"      alert",[215,7678,687],{"class":771},[215,7680,1761],{"class":599},[215,7682,7683],{"class":651},"上传成功",[215,7685,1761],{"class":599},[215,7687,827],{"class":771},[215,7689,612],{"class":599},[215,7691,7692,7695,7698,7700,7702,7704],{"class":217,"line":4902},[215,7693,7694],{"class":599},"    }",[215,7696,7697],{"class":767}," catch",[215,7699,740],{"class":771},[215,7701,7063],{"class":596},[215,7703,786],{"class":771},[215,7705,1683],{"class":599},[215,7707,7708,7710,7712,7714,7716,7718,7720,7722,7724,7726,7728],{"class":217,"line":4909},[215,7709,7650],{"class":596},[215,7711,600],{"class":599},[215,7713,7063],{"class":683},[215,7715,687],{"class":771},[215,7717,1761],{"class":599},[215,7719,7082],{"class":651},[215,7721,1761],{"class":599},[215,7723,820],{"class":599},[215,7725,7089],{"class":596},[215,7727,827],{"class":771},[215,7729,612],{"class":599},[215,7731,7732,7734,7736,7738,7741,7743,7745,7747,7749,7752,7754],{"class":217,"line":4914},[215,7733,7676],{"class":683},[215,7735,687],{"class":771},[215,7737,1761],{"class":599},[215,7739,7740],{"class":651},"上传失败: ",[215,7742,1761],{"class":599},[215,7744,849],{"class":599},[215,7746,7089],{"class":596},[215,7748,600],{"class":599},[215,7750,7751],{"class":596},"message",[215,7753,827],{"class":771},[215,7755,612],{"class":599},[215,7757,7758],{"class":217,"line":4935},[215,7759,4000],{"class":599},[215,7761,7762,7764,7767],{"class":217,"line":4957},[215,7763,2297],{"class":599},[215,7765,7766],{"class":767}," else",[215,7768,761],{"class":599},[215,7770,7771,7773,7775,7777,7780,7782,7784],{"class":217,"line":4979},[215,7772,7528],{"class":683},[215,7774,687],{"class":771},[215,7776,1761],{"class":599},[215,7778,7779],{"class":651},"此功能仅在 H5 环境下可用",[215,7781,1761],{"class":599},[215,7783,827],{"class":771},[215,7785,612],{"class":599},[215,7787,7788],{"class":217,"line":4988},[215,7789,3447],{"class":599},[215,7791,7792],{"class":217,"line":5003},[215,7793,864],{"class":599},[215,7795,7796],{"class":217,"line":5066},[215,7797,721],{"emptyLinePlaceholder":108},[215,7799,7800],{"class":217,"line":5071},[215,7801,7802],{"class":590},"// 多文件上传函数\n",[215,7804,7805,7808,7810,7812,7814,7816,7818,7820,7822],{"class":217,"line":5092},[215,7806,7807],{"class":674},"async",[215,7809,2214],{"class":674},[215,7811,6582],{"class":683},[215,7813,687],{"class":599},[215,7815,6587],{"class":743},[215,7817,820],{"class":599},[215,7819,6600],{"class":743},[215,7821,827],{"class":599},[215,7823,761],{"class":599},[215,7825,7826,7828,7830,7832,7834,7836,7838],{"class":217,"line":5103},[215,7827,804],{"class":674},[215,7829,6729],{"class":596},[215,7831,810],{"class":599},[215,7833,2467],{"class":599},[215,7835,6736],{"class":683},[215,7837,690],{"class":771},[215,7839,612],{"class":599},[215,7841,7842],{"class":217,"line":5140},[215,7843,5947],{"class":771},[215,7845,7846],{"class":217,"line":5153},[215,7847,6749],{"class":590},[215,7849,7850,7852,7854,7856,7858,7860,7862],{"class":217,"line":5160},[215,7851,6754],{"class":596},[215,7853,600],{"class":599},[215,7855,6759],{"class":683},[215,7857,687],{"class":771},[215,7859,6766],{"class":743},[215,7861,693],{"class":674},[215,7863,761],{"class":599},[215,7865,7866,7868,7870,7872,7874,7876,7878,7880,7882,7884,7886,7888,7890,7892,7894],{"class":217,"line":5167},[215,7867,6796],{"class":596},[215,7869,600],{"class":599},[215,7871,6801],{"class":683},[215,7873,687],{"class":771},[215,7875,1761],{"class":599},[215,7877,6587],{"class":651},[215,7879,1761],{"class":599},[215,7881,820],{"class":599},[215,7883,6814],{"class":596},[215,7885,820],{"class":599},[215,7887,6814],{"class":596},[215,7889,600],{"class":599},[215,7891,6823],{"class":596},[215,7893,827],{"class":771},[215,7895,612],{"class":599},[215,7897,7899,7901,7903],{"class":217,"line":7898},56,[215,7900,2297],{"class":599},[215,7902,827],{"class":771},[215,7904,612],{"class":599},[215,7906,7908],{"class":217,"line":7907},57,[215,7909,721],{"emptyLinePlaceholder":108},[215,7911,7913],{"class":217,"line":7912},58,[215,7914,6854],{"class":590},[215,7916,7918,7920,7922,7924,7926,7928,7931,7933,7935,7938,7940,7943,7945,7947,7950,7952],{"class":217,"line":7917},59,[215,7919,6859],{"class":596},[215,7921,600],{"class":599},[215,7923,6801],{"class":683},[215,7925,687],{"class":771},[215,7927,1761],{"class":599},[215,7929,7930],{"class":651},"timestamp",[215,7932,1761],{"class":599},[215,7934,820],{"class":599},[215,7936,7937],{"class":596}," Date",[215,7939,600],{"class":599},[215,7941,7942],{"class":683},"now",[215,7944,690],{"class":771},[215,7946,600],{"class":599},[215,7948,7949],{"class":683},"toString",[215,7951,1159],{"class":771},[215,7953,612],{"class":599},[215,7955,7957],{"class":217,"line":7956},60,[215,7958,721],{"emptyLinePlaceholder":108},[215,7960,7962,7964,7966,7968,7970,7972,7974,7976,7978],{"class":217,"line":7961},61,[215,7963,804],{"class":674},[215,7965,6984],{"class":596},[215,7967,810],{"class":599},[215,7969,2248],{"class":767},[215,7971,6925],{"class":683},[215,7973,687],{"class":771},[215,7975,6930],{"class":596},[215,7977,820],{"class":599},[215,7979,761],{"class":599},[215,7981,7983,7985,7987,7989,7991,7993],{"class":217,"line":7982},62,[215,7984,6939],{"class":771},[215,7986,747],{"class":599},[215,7988,1755],{"class":599},[215,7990,6946],{"class":651},[215,7992,1761],{"class":599},[215,7994,906],{"class":599},[215,7996,7998,8000,8002],{"class":217,"line":7997},63,[215,7999,6955],{"class":771},[215,8001,747],{"class":599},[215,8003,6960],{"class":596},[215,8005,8007,8009,8011],{"class":217,"line":8006},64,[215,8008,2297],{"class":599},[215,8010,827],{"class":771},[215,8012,612],{"class":599},[215,8014,8016],{"class":217,"line":8015},65,[215,8017,721],{"emptyLinePlaceholder":108},[215,8019,8021],{"class":217,"line":8020},66,[215,8022,8023],{"class":590},"  // 注意：fetch 的 then 需先进行 json 处理\n",[215,8025,8027,8029,8031,8033,8035,8038,8040],{"class":217,"line":8026},67,[215,8028,768],{"class":767},[215,8030,740],{"class":771},[215,8032,6979],{"class":596},[215,8034,600],{"class":599},[215,8036,8037],{"class":596},"ok",[215,8039,786],{"class":771},[215,8041,1683],{"class":599},[215,8043,8045,8048,8050,8052,8054,8056,8058,8060,8062],{"class":217,"line":8044},68,[215,8046,8047],{"class":674},"    const",[215,8049,7618],{"class":596},[215,8051,810],{"class":599},[215,8053,2248],{"class":767},[215,8055,6984],{"class":596},[215,8057,600],{"class":599},[215,8059,6989],{"class":683},[215,8061,690],{"class":771},[215,8063,612],{"class":599},[215,8065,8067,8069,8071],{"class":217,"line":8066},69,[215,8068,6687],{"class":767},[215,8070,7618],{"class":596},[215,8072,612],{"class":599},[215,8074,8076,8078,8080],{"class":217,"line":8075},70,[215,8077,2297],{"class":599},[215,8079,7766],{"class":767},[215,8081,761],{"class":599},[215,8083,8085,8087,8089,8091,8093,8095,8098,8100,8102,8104,8107,8109,8111],{"class":217,"line":8084},71,[215,8086,7098],{"class":767},[215,8088,2467],{"class":599},[215,8090,6702],{"class":683},[215,8092,687],{"class":771},[215,8094,6375],{"class":599},[215,8096,8097],{"class":651},"上传失败，状态码: ",[215,8099,1439],{"class":599},[215,8101,6979],{"class":596},[215,8103,600],{"class":599},[215,8105,8106],{"class":596},"status",[215,8108,1453],{"class":599},[215,8110,827],{"class":771},[215,8112,612],{"class":599},[215,8114,8116],{"class":217,"line":8115},72,[215,8117,3447],{"class":599},[215,8119,8121],{"class":217,"line":8120},73,[215,8122,2351],{"class":599},[215,8124,8126,8128,8130],{"class":217,"line":8125},74,[215,8127,3521],{"class":599},[215,8129,3615],{"class":771},[215,8131,3505],{"class":599},[195,8133,8135],{"id":8134},"_3-处理上传进度","3. 处理上传进度",[206,8137,8141],{"className":8138,"code":8139,"language":8140,"meta":211,"style":211},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// 带进度的上传实现\ninterface UploadProgressCallback {\n  (progress: number): void;\n}\n\ninterface FileUploadResponse {\n  [key: string]: any; // 根据实际后端响应类型调整\n}\n\nfunction uploadMultipleFilesWithProgress(\n  files: File[], \n  uploadUrl: string, \n  onProgress?: UploadProgressCallback\n): Promise\u003CFileUploadResponse> {\n  return new Promise((resolve, reject) => {\n    if ((globalThis as any).__PLATFORM__ !== 'h5') {\n      reject(new Error('此方法仅支持 H5 环境'));\n      return;\n    }\n\n    const formData = new FormData();\n    \n    files.forEach(file => {\n      formData.append('files', file, file.name);\n    });\n\n    const xhr = new XMLHttpRequest();\n\n    // 监听上传进度\n    xhr.upload.addEventListener('progress', (event: ProgressEvent) => {\n      if (event.lengthComputable) {\n        const percentComplete = (event.loaded / event.total) * 100;\n        onProgress && onProgress(percentComplete);\n      }\n    });\n\n    xhr.addEventListener('load', () => {\n      if (xhr.status >= 200 && xhr.status \u003C 300) {\n        try {\n          const result = JSON.parse(xhr.response);\n          resolve(result);\n        } catch (error) {\n          reject(new Error('响应解析失败'));\n        }\n      } else {\n        reject(new Error(`上传失败: ${xhr.statusText}`));\n      }\n    });\n\n    xhr.addEventListener('error', () => {\n      reject(new Error('网络错误'));\n    });\n\n    xhr.addEventListener('abort', () => {\n      reject(new Error('上传被取消'));\n    });\n\n    xhr.open('POST', uploadUrl);\n    xhr.send(formData);\n  });\n}\n","js",[153,8142,8143,8148,8158,8177,8181,8185,8194,8217,8221,8225,8234,8248,8261,8272,8287,8313,8344,8367,8373,8377,8381,8397,8401,8418,8451,8459,8463,8481,8485,8490,8530,8548,8587,8606,8611,8619,8623,8648,8683,8690,8718,8732,8747,8771,8776,8785,8817,8821,8829,8833,8857,8880,8888,8892,8917,8940,8948,8952,8977,8995,9003],{"__ignoreMap":211},[215,8144,8145],{"class":217,"line":218},[215,8146,8147],{"class":590},"// 带进度的上传实现\n",[215,8149,8150,8153,8156],{"class":217,"line":236},[215,8151,8152],{"class":674},"interface",[215,8154,8155],{"class":750}," UploadProgressCallback",[215,8157,761],{"class":599},[215,8159,8160,8163,8166,8168,8170,8172,8175],{"class":217,"line":469},[215,8161,8162],{"class":599},"  (",[215,8164,8165],{"class":743},"progress",[215,8167,747],{"class":599},[215,8169,6780],{"class":750},[215,8171,754],{"class":599},[215,8173,8174],{"class":750}," void",[215,8176,612],{"class":599},[215,8178,8179],{"class":217,"line":724},[215,8180,2351],{"class":599},[215,8182,8183],{"class":217,"line":730},[215,8184,721],{"emptyLinePlaceholder":108},[215,8186,8187,8189,8192],{"class":217,"line":764},[215,8188,8152],{"class":674},[215,8190,8191],{"class":750}," FileUploadResponse",[215,8193,761],{"class":599},[215,8195,8196,8199,8202,8204,8206,8208,8210,8212,8214],{"class":217,"line":801},[215,8197,8198],{"class":596},"  [",[215,8200,8201],{"class":743},"key",[215,8203,747],{"class":599},[215,8205,751],{"class":750},[215,8207,1947],{"class":596},[215,8209,747],{"class":599},[215,8211,6639],{"class":750},[215,8213,940],{"class":599},[215,8215,8216],{"class":590}," // 根据实际后端响应类型调整\n",[215,8218,8219],{"class":217,"line":832},[215,8220,2351],{"class":599},[215,8222,8223],{"class":217,"line":861},[215,8224,721],{"emptyLinePlaceholder":108},[215,8226,8227,8229,8232],{"class":217,"line":966},[215,8228,2718],{"class":674},[215,8230,8231],{"class":683}," uploadMultipleFilesWithProgress",[215,8233,889],{"class":599},[215,8235,8236,8238,8240,8242,8244,8246],{"class":217,"line":1000},[215,8237,6754],{"class":743},[215,8239,747],{"class":599},[215,8241,6592],{"class":750},[215,8243,6595],{"class":596},[215,8245,820],{"class":599},[215,8247,3494],{"class":596},[215,8249,8250,8253,8255,8257,8259],{"class":217,"line":1005},[215,8251,8252],{"class":743},"  uploadUrl",[215,8254,747],{"class":599},[215,8256,751],{"class":750},[215,8258,820],{"class":599},[215,8260,3494],{"class":596},[215,8262,8263,8266,8269],{"class":217,"line":1022},[215,8264,8265],{"class":743},"  onProgress",[215,8267,8268],{"class":599},"?:",[215,8270,8271],{"class":750}," UploadProgressCallback\n",[215,8273,8274,8276,8278,8280,8283,8285],{"class":217,"line":1045},[215,8275,754],{"class":599},[215,8277,6609],{"class":750},[215,8279,1425],{"class":599},[215,8281,8282],{"class":750},"FileUploadResponse",[215,8284,986],{"class":599},[215,8286,761],{"class":599},[215,8288,8289,8291,8293,8295,8297,8299,8302,8304,8307,8309,8311],{"class":217,"line":1050},[215,8290,835],{"class":767},[215,8292,2467],{"class":599},[215,8294,6609],{"class":750},[215,8296,687],{"class":771},[215,8298,687],{"class":599},[215,8300,8301],{"class":743},"resolve",[215,8303,820],{"class":599},[215,8305,8306],{"class":743}," reject",[215,8308,827],{"class":599},[215,8310,693],{"class":674},[215,8312,761],{"class":599},[215,8314,8315,8318,8320,8322,8324,8326,8328,8330,8332,8334,8336,8338,8340,8342],{"class":217,"line":1055},[215,8316,8317],{"class":767},"    if",[215,8319,6630],{"class":771},[215,8321,6633],{"class":596},[215,8323,6636],{"class":767},[215,8325,6639],{"class":750},[215,8327,827],{"class":771},[215,8329,600],{"class":599},[215,8331,6646],{"class":596},[215,8333,1752],{"class":599},[215,8335,1755],{"class":599},[215,8337,6653],{"class":651},[215,8339,1761],{"class":599},[215,8341,786],{"class":771},[215,8343,1683],{"class":599},[215,8345,8346,8349,8351,8353,8355,8357,8359,8361,8363,8365],{"class":217,"line":1062},[215,8347,8348],{"class":683},"      reject",[215,8350,687],{"class":771},[215,8352,6699],{"class":599},[215,8354,6702],{"class":683},[215,8356,687],{"class":771},[215,8358,1761],{"class":599},[215,8360,6676],{"class":651},[215,8362,1761],{"class":599},[215,8364,714],{"class":771},[215,8366,612],{"class":599},[215,8368,8369,8371],{"class":217,"line":1077},[215,8370,6347],{"class":767},[215,8372,612],{"class":599},[215,8374,8375],{"class":217,"line":1086},[215,8376,4000],{"class":599},[215,8378,8379],{"class":217,"line":1099},[215,8380,721],{"emptyLinePlaceholder":108},[215,8382,8383,8385,8387,8389,8391,8393,8395],{"class":217,"line":1127},[215,8384,8047],{"class":674},[215,8386,6729],{"class":596},[215,8388,810],{"class":599},[215,8390,2467],{"class":599},[215,8392,6736],{"class":683},[215,8394,690],{"class":771},[215,8396,612],{"class":599},[215,8398,8399],{"class":217,"line":1132},[215,8400,4385],{"class":771},[215,8402,8403,8406,8408,8410,8412,8414,8416],{"class":217,"line":1139},[215,8404,8405],{"class":596},"    files",[215,8407,600],{"class":599},[215,8409,6759],{"class":683},[215,8411,687],{"class":771},[215,8413,6766],{"class":743},[215,8415,693],{"class":674},[215,8417,761],{"class":599},[215,8419,8420,8423,8425,8427,8429,8431,8433,8435,8437,8439,8441,8443,8445,8447,8449],{"class":217,"line":1144},[215,8421,8422],{"class":596},"      formData",[215,8424,600],{"class":599},[215,8426,6801],{"class":683},[215,8428,687],{"class":771},[215,8430,1761],{"class":599},[215,8432,6587],{"class":651},[215,8434,1761],{"class":599},[215,8436,820],{"class":599},[215,8438,6814],{"class":596},[215,8440,820],{"class":599},[215,8442,6814],{"class":596},[215,8444,600],{"class":599},[215,8446,6823],{"class":596},[215,8448,827],{"class":771},[215,8450,612],{"class":599},[215,8452,8453,8455,8457],{"class":217,"line":3788},[215,8454,7694],{"class":599},[215,8456,827],{"class":771},[215,8458,612],{"class":599},[215,8460,8461],{"class":217,"line":3794},[215,8462,721],{"emptyLinePlaceholder":108},[215,8464,8465,8467,8470,8472,8474,8477,8479],{"class":217,"line":3811},[215,8466,8047],{"class":674},[215,8468,8469],{"class":596}," xhr",[215,8471,810],{"class":599},[215,8473,2467],{"class":599},[215,8475,8476],{"class":683}," XMLHttpRequest",[215,8478,690],{"class":771},[215,8480,612],{"class":599},[215,8482,8483],{"class":217,"line":3828},[215,8484,721],{"emptyLinePlaceholder":108},[215,8486,8487],{"class":217,"line":3845},[215,8488,8489],{"class":590},"    // 监听上传进度\n",[215,8491,8492,8495,8497,8500,8502,8505,8507,8509,8511,8513,8515,8517,8519,8521,8524,8526,8528],{"class":217,"line":3855},[215,8493,8494],{"class":596},"    xhr",[215,8496,600],{"class":599},[215,8498,8499],{"class":596},"upload",[215,8501,600],{"class":599},[215,8503,8504],{"class":683},"addEventListener",[215,8506,687],{"class":771},[215,8508,1761],{"class":599},[215,8510,8165],{"class":651},[215,8512,1761],{"class":599},[215,8514,820],{"class":599},[215,8516,740],{"class":599},[215,8518,7417],{"class":743},[215,8520,747],{"class":599},[215,8522,8523],{"class":750}," ProgressEvent",[215,8525,827],{"class":599},[215,8527,693],{"class":674},[215,8529,761],{"class":599},[215,8531,8532,8535,8537,8539,8541,8544,8546],{"class":217,"line":3883},[215,8533,8534],{"class":767},"      if",[215,8536,740],{"class":771},[215,8538,7417],{"class":596},[215,8540,600],{"class":599},[215,8542,8543],{"class":596},"lengthComputable",[215,8545,786],{"class":771},[215,8547,1683],{"class":599},[215,8549,8550,8553,8556,8558,8560,8562,8564,8567,8570,8573,8575,8578,8580,8582,8585],{"class":217,"line":3910},[215,8551,8552],{"class":674},"        const",[215,8554,8555],{"class":596}," percentComplete",[215,8557,810],{"class":599},[215,8559,740],{"class":771},[215,8561,7417],{"class":596},[215,8563,600],{"class":599},[215,8565,8566],{"class":596},"loaded",[215,8568,8569],{"class":599}," /",[215,8571,8572],{"class":596}," event",[215,8574,600],{"class":599},[215,8576,8577],{"class":596},"total",[215,8579,786],{"class":771},[215,8581,5893],{"class":599},[215,8583,8584],{"class":823}," 100",[215,8586,612],{"class":599},[215,8588,8589,8592,8594,8597,8599,8602,8604],{"class":217,"line":3937},[215,8590,8591],{"class":596},"        onProgress",[215,8593,7577],{"class":599},[215,8595,8596],{"class":683}," onProgress",[215,8598,687],{"class":771},[215,8600,8601],{"class":596},"percentComplete",[215,8603,827],{"class":771},[215,8605,612],{"class":599},[215,8607,8608],{"class":217,"line":3964},[215,8609,8610],{"class":599},"      }\n",[215,8612,8613,8615,8617],{"class":217,"line":3991},[215,8614,7694],{"class":599},[215,8616,827],{"class":771},[215,8618,612],{"class":599},[215,8620,8621],{"class":217,"line":3997},[215,8622,721],{"emptyLinePlaceholder":108},[215,8624,8625,8627,8629,8631,8633,8635,8638,8640,8642,8644,8646],{"class":217,"line":4003},[215,8626,8494],{"class":596},[215,8628,600],{"class":599},[215,8630,8504],{"class":683},[215,8632,687],{"class":771},[215,8634,1761],{"class":599},[215,8636,8637],{"class":651},"load",[215,8639,1761],{"class":599},[215,8641,820],{"class":599},[215,8643,1015],{"class":599},[215,8645,693],{"class":674},[215,8647,761],{"class":599},[215,8649,8650,8652,8654,8657,8659,8661,8664,8666,8668,8670,8672,8674,8677,8679,8681],{"class":217,"line":4009},[215,8651,8534],{"class":767},[215,8653,740],{"class":771},[215,8655,8656],{"class":596},"xhr",[215,8658,600],{"class":599},[215,8660,8106],{"class":596},[215,8662,8663],{"class":599}," >=",[215,8665,4257],{"class":823},[215,8667,7577],{"class":599},[215,8669,8469],{"class":596},[215,8671,600],{"class":599},[215,8673,8106],{"class":596},[215,8675,8676],{"class":599}," \u003C",[215,8678,3973],{"class":823},[215,8680,786],{"class":771},[215,8682,1683],{"class":599},[215,8684,8685,8688],{"class":217,"line":4016},[215,8686,8687],{"class":767},"        try",[215,8689,761],{"class":599},[215,8691,8692,8694,8696,8698,8701,8703,8706,8708,8710,8712,8714,8716],{"class":217,"line":4902},[215,8693,1792],{"class":674},[215,8695,7618],{"class":596},[215,8697,810],{"class":599},[215,8699,8700],{"class":596}," JSON",[215,8702,600],{"class":599},[215,8704,8705],{"class":683},"parse",[215,8707,687],{"class":771},[215,8709,8656],{"class":596},[215,8711,600],{"class":599},[215,8713,6979],{"class":596},[215,8715,827],{"class":771},[215,8717,612],{"class":599},[215,8719,8720,8723,8725,8728,8730],{"class":217,"line":4909},[215,8721,8722],{"class":683},"          resolve",[215,8724,687],{"class":771},[215,8726,8727],{"class":596},"result",[215,8729,827],{"class":771},[215,8731,612],{"class":599},[215,8733,8734,8737,8739,8741,8743,8745],{"class":217,"line":4914},[215,8735,8736],{"class":599},"        }",[215,8738,7697],{"class":767},[215,8740,740],{"class":771},[215,8742,7063],{"class":596},[215,8744,786],{"class":771},[215,8746,1683],{"class":599},[215,8748,8749,8752,8754,8756,8758,8760,8762,8765,8767,8769],{"class":217,"line":4935},[215,8750,8751],{"class":683},"          reject",[215,8753,687],{"class":771},[215,8755,6699],{"class":599},[215,8757,6702],{"class":683},[215,8759,687],{"class":771},[215,8761,1761],{"class":599},[215,8763,8764],{"class":651},"响应解析失败",[215,8766,1761],{"class":599},[215,8768,714],{"class":771},[215,8770,612],{"class":599},[215,8772,8773],{"class":217,"line":4957},[215,8774,8775],{"class":599},"        }\n",[215,8777,8778,8781,8783],{"class":217,"line":4979},[215,8779,8780],{"class":599},"      }",[215,8782,7766],{"class":767},[215,8784,761],{"class":599},[215,8786,8787,8790,8792,8794,8796,8798,8800,8802,8804,8806,8808,8811,8813,8815],{"class":217,"line":4988},[215,8788,8789],{"class":683},"        reject",[215,8791,687],{"class":771},[215,8793,6699],{"class":599},[215,8795,6702],{"class":683},[215,8797,687],{"class":771},[215,8799,6375],{"class":599},[215,8801,7740],{"class":651},[215,8803,1439],{"class":599},[215,8805,8656],{"class":596},[215,8807,600],{"class":599},[215,8809,8810],{"class":596},"statusText",[215,8812,1453],{"class":599},[215,8814,714],{"class":771},[215,8816,612],{"class":599},[215,8818,8819],{"class":217,"line":5003},[215,8820,8610],{"class":599},[215,8822,8823,8825,8827],{"class":217,"line":5066},[215,8824,7694],{"class":599},[215,8826,827],{"class":771},[215,8828,612],{"class":599},[215,8830,8831],{"class":217,"line":5071},[215,8832,721],{"emptyLinePlaceholder":108},[215,8834,8835,8837,8839,8841,8843,8845,8847,8849,8851,8853,8855],{"class":217,"line":5092},[215,8836,8494],{"class":596},[215,8838,600],{"class":599},[215,8840,8504],{"class":683},[215,8842,687],{"class":771},[215,8844,1761],{"class":599},[215,8846,7063],{"class":651},[215,8848,1761],{"class":599},[215,8850,820],{"class":599},[215,8852,1015],{"class":599},[215,8854,693],{"class":674},[215,8856,761],{"class":599},[215,8858,8859,8861,8863,8865,8867,8869,8871,8874,8876,8878],{"class":217,"line":5103},[215,8860,8348],{"class":683},[215,8862,687],{"class":771},[215,8864,6699],{"class":599},[215,8866,6702],{"class":683},[215,8868,687],{"class":771},[215,8870,1761],{"class":599},[215,8872,8873],{"class":651},"网络错误",[215,8875,1761],{"class":599},[215,8877,714],{"class":771},[215,8879,612],{"class":599},[215,8881,8882,8884,8886],{"class":217,"line":5140},[215,8883,7694],{"class":599},[215,8885,827],{"class":771},[215,8887,612],{"class":599},[215,8889,8890],{"class":217,"line":5153},[215,8891,721],{"emptyLinePlaceholder":108},[215,8893,8894,8896,8898,8900,8902,8904,8907,8909,8911,8913,8915],{"class":217,"line":5160},[215,8895,8494],{"class":596},[215,8897,600],{"class":599},[215,8899,8504],{"class":683},[215,8901,687],{"class":771},[215,8903,1761],{"class":599},[215,8905,8906],{"class":651},"abort",[215,8908,1761],{"class":599},[215,8910,820],{"class":599},[215,8912,1015],{"class":599},[215,8914,693],{"class":674},[215,8916,761],{"class":599},[215,8918,8919,8921,8923,8925,8927,8929,8931,8934,8936,8938],{"class":217,"line":5167},[215,8920,8348],{"class":683},[215,8922,687],{"class":771},[215,8924,6699],{"class":599},[215,8926,6702],{"class":683},[215,8928,687],{"class":771},[215,8930,1761],{"class":599},[215,8932,8933],{"class":651},"上传被取消",[215,8935,1761],{"class":599},[215,8937,714],{"class":771},[215,8939,612],{"class":599},[215,8941,8942,8944,8946],{"class":217,"line":7898},[215,8943,7694],{"class":599},[215,8945,827],{"class":771},[215,8947,612],{"class":599},[215,8949,8950],{"class":217,"line":7907},[215,8951,721],{"emptyLinePlaceholder":108},[215,8953,8954,8956,8958,8961,8963,8965,8967,8969,8971,8973,8975],{"class":217,"line":7912},[215,8955,8494],{"class":596},[215,8957,600],{"class":599},[215,8959,8960],{"class":683},"open",[215,8962,687],{"class":771},[215,8964,1761],{"class":599},[215,8966,6946],{"class":651},[215,8968,1761],{"class":599},[215,8970,820],{"class":599},[215,8972,6600],{"class":596},[215,8974,827],{"class":771},[215,8976,612],{"class":599},[215,8978,8979,8981,8983,8986,8988,8991,8993],{"class":217,"line":7917},[215,8980,8494],{"class":596},[215,8982,600],{"class":599},[215,8984,8985],{"class":683},"send",[215,8987,687],{"class":771},[215,8989,8990],{"class":596},"formData",[215,8992,827],{"class":771},[215,8994,612],{"class":599},[215,8996,8997,8999,9001],{"class":217,"line":7956},[215,8998,2297],{"class":599},[215,9000,827],{"class":771},[215,9002,612],{"class":599},[215,9004,9005],{"class":217,"line":7961},[215,9006,2351],{"class":599},[145,9008,6440],{"id":6440},[195,9010,9012],{"id":9011},"_1-环境限制","1. 环境限制",[505,9014,9015,9022],{},[305,9016,9017,9018,9021],{},"此解决方案",[163,9019,9020],{},"仅适用于 H5 环境","，在小程序和 App 环境中无法使用",[305,9023,9024],{},"需要检测当前运行环境，避免在非 H5 环境下执行",[195,9026,9028],{"id":9027},"_2-fetch-响应处理","2. Fetch 响应处理",[505,9030,9031,9037],{},[305,9032,3020,9033,9036],{},[1247,9034,6516],{"href":6514,"rel":9035},[1251]," 时，需要先将响应转换为 JSON 格式",[305,9038,1651,9039,9043,9044,9049],{},[1247,9040,6974],{"href":9041,"rel":9042},"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then",[1251]," 中先进行 ",[1247,9045,9048],{"href":9046,"rel":9047},"https://developer.mozilla.org/zh-CN/docs/Web/API/Body/json",[1251],"response.json()"," 处理，然后再进行后续操作",[195,9051,9053],{"id":9052},"_3-formdata-使用","3. FormData 使用",[505,9055,9056,9062],{},[305,9057,9058,9061],{},[1247,9059,6522],{"href":6520,"rel":9060},[1251]," 允许我们轻松地构建表单数据",[305,9063,9064,9065,9070],{},"可以通过 ",[1247,9066,9069],{"href":9067,"rel":9068},"https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append",[1251],"append()"," 方法添加多个同名字段，后端会接收到文件数组",[145,9072,445],{"id":445},[149,9074,9075,9076,9079,9080,2442,9083,9086],{},"虽然 ",[1247,9077,6510],{"href":6508,"rel":9078},[1251]," 有其局限性，但在 H5 环境下，我们可以利用原生的 ",[1247,9081,6516],{"href":6514,"rel":9082},[1251],[1247,9084,6522],{"href":6520,"rel":9085},[1251]," 来实现多文件上传功能。需要注意的是：",[302,9088,9089,9092,9098,9101],{},[305,9090,9091],{},"此方法仅适用于 H5 环境",[305,9093,9094,9097],{},[1247,9095,6516],{"href":6514,"rel":9096},[1251]," 响应需要先进行 JSON 处理",[305,9099,9100],{},"需要适当处理错误和上传进度",[305,9102,9103],{},"后端需要支持接收多文件数组",[149,9105,9106],{},"通过这种方式，我们可以在 H5 环境中实现更灵活的多文件上传功能。",[158,9108,9109],{},[149,9110,1585],{},[460,9112,9113],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":211,"searchDepth":236,"depth":236,"links":9115},[9116,9117,9122,9127],{"id":6526,"depth":236,"text":6526},{"id":6550,"depth":236,"text":6551,"children":9118},[9119,9120,9121],{"id":6564,"depth":469,"text":6565},{"id":7117,"depth":469,"text":7118},{"id":8134,"depth":469,"text":8135},{"id":6440,"depth":236,"text":6440,"children":9123},[9124,9125,9126],{"id":9011,"depth":469,"text":9012},{"id":9027,"depth":469,"text":9028},{"id":9052,"depth":469,"text":9053},{"id":445,"depth":236,"text":445},"2025-12-24T00:00:00.000Z","探讨如何在 H5 环境下通过 fetch + FormData 解决 uni.upload 无法在一个接口上传多个文件的问题",{"src":9131},"https://picsum.photos/id/108/640/360",{},{"title":68,"description":9129},"wlyg417BbsTwrM78Lg8RyxzX-YU7IsPuEcCAPsxVyP8",{"id":9136,"title":64,"authors":9137,"badge":9140,"body":9141,"date":10234,"description":10235,"extension":477,"image":10236,"meta":10238,"navigation":108,"path":65,"seo":10239,"stem":66,"__hash__":10240},"posts/3.blog/2.apifox-api-generation.md",[9138],{"name":135,"avatar":9139},{"src":138},{"label":5437},{"type":142,"value":9142,"toc":10224},[9143,9152,9156,9161,9164,9170,9845,9848,9931,9934,9937,9943,9946,9949,10159,10162,10194,10197,10211,10217,10221],[149,9144,9145,9146,9151],{},"在现代前端开发中，与后端 API 的对接是一项重要且重复性高的工作。为了提高开发效率并减少手动编写 API 请求代码的工作量，我们可以使用 ",[1247,9147,9150],{"href":9148,"rel":9149},"https://github.com/superwf/openapi-ts-request",[1251],"openapi-ts-request"," 工具，根据 Apifox 文档自动生成 TypeScript 类型安全的 API 请求文件。",[145,9153,9155],{"id":9154},"什么是-openapi-ts-request","什么是 openapi-ts-request？",[149,9157,9158,9160],{},[153,9159,9150],{}," 是一个基于 OpenAPI 规范的代码生成工具，它可以从 API 文档自动生成类型定义和请求函数。通过与 Apifox 平台集成，我们可以直接从项目文档生成完整的 API 客户端代码。",[145,9162,9163],{"id":9163},"配置说明",[149,9165,9166,9167,300],{},"首先，在项目根目录下创建配置文件，例如 ",[153,9168,9169],{},"openapi-ts.config.ts",[9171,9172,9173,9756,9807],"code-tree",{"default-value":9169},[206,9174,9176],{"className":580,"code":9175,"filename":9169,"language":583,"meta":211,"style":211},"import type { GenerateServiceProps } from 'openapi-ts-request'\n\nexport default [\n  {\n    serversPath: './src/api/openApiRequest',\n    requestLibPath: `import request from '@/http/openApiRequest';\\n import { CustomRequestOptions } from '@/http/interceptor';`,\n    requestOptionsType: 'CustomRequestOptions',\n    reactQueryMode: 'vue',\n    enableLogging: true,\n    isGenJavaScript: false,\n    apifoxConfig: {\n      oasVersion: '3.1',\n      projectId: '66666',//项目ID 需要拥有项目导出权限\n      apifoxToken: 'APS-xxxx',  //apifox中获取的token\n    },\n    hook: {\n      // 生成自定义方法名称的函数\n      customFunctionName: (data) => {\n        // 查找路径中第一个'{'的位置，用于处理带参数的路径\n        const index = data.path.indexOf('{')\n        let newPath = data.path\n        if (index !== -1) {\n          // 如果路径中有参数（用{}表示），则截取参数前的部分\n          newPath = data.path.slice(0, index - 1)\n        }\n        // 定义首字母大写函数\n        const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n        // 分割路径并过滤空字符串\n        const paths = newPath.split('/').filter(path => path)\n        // 获取倒数第二个路径段并首字母大写\n        const secondLastPath = capitalize(paths[paths.length - 2])\n        // 获取最后一个路径段并首字母大写\n        const lastPath = capitalize(paths[paths.length - 1])\n        // 返回组合的方法名：HTTP方法名 + 倒数第二路径 + 最后路径(如：get:/api/user/list -> getUserList,post:/api/user/add -> postAddUser)\n        return `${data.method}${secondLastPath}${lastPath}`\n      },\n    },\n  },\n] as GenerateServiceProps[]\n",[153,9177,9178,9199,9203,9211,9215,9231,9253,9269,9284,9296,9307,9316,9332,9351,9370,9374,9383,9388,9405,9410,9440,9457,9477,9482,9514,9518,9523,9582,9587,9628,9633,9666,9671,9700,9705,9733,9737,9741,9745],{"__ignoreMap":211},[215,9179,9180,9182,9184,9186,9189,9191,9193,9195,9197],{"class":217,"line":218},[215,9181,2140],{"class":767},[215,9183,2753],{"class":767},[215,9185,2184],{"class":599},[215,9187,9188],{"class":596}," GenerateServiceProps",[215,9190,2190],{"class":599},[215,9192,2193],{"class":767},[215,9194,1755],{"class":599},[215,9196,9150],{"class":651},[215,9198,1777],{"class":599},[215,9200,9201],{"class":217,"line":236},[215,9202,721],{"emptyLinePlaceholder":108},[215,9204,9205,9207,9209],{"class":217,"line":469},[215,9206,1672],{"class":767},[215,9208,1675],{"class":767},[215,9210,2685],{"class":596},[215,9212,9213],{"class":217,"line":724},[215,9214,2690],{"class":599},[215,9216,9217,9220,9222,9224,9227,9229],{"class":217,"line":730},[215,9218,9219],{"class":771},"    serversPath",[215,9221,747],{"class":599},[215,9223,1755],{"class":599},[215,9225,9226],{"class":651},"./src/api/openApiRequest",[215,9228,1761],{"class":599},[215,9230,906],{"class":599},[215,9232,9233,9236,9238,9240,9243,9246,9249,9251],{"class":217,"line":764},[215,9234,9235],{"class":771},"    requestLibPath",[215,9237,747],{"class":599},[215,9239,1434],{"class":599},[215,9241,9242],{"class":651},"import request from '@/http/openApiRequest';",[215,9244,9245],{"class":596},"\\n",[215,9247,9248],{"class":651}," import { CustomRequestOptions } from '@/http/interceptor';",[215,9250,6375],{"class":599},[215,9252,906],{"class":599},[215,9254,9255,9258,9260,9262,9265,9267],{"class":217,"line":801},[215,9256,9257],{"class":771},"    requestOptionsType",[215,9259,747],{"class":599},[215,9261,1755],{"class":599},[215,9263,9264],{"class":651},"CustomRequestOptions",[215,9266,1761],{"class":599},[215,9268,906],{"class":599},[215,9270,9271,9274,9276,9278,9280,9282],{"class":217,"line":832},[215,9272,9273],{"class":771},"    reactQueryMode",[215,9275,747],{"class":599},[215,9277,1755],{"class":599},[215,9279,3480],{"class":651},[215,9281,1761],{"class":599},[215,9283,906],{"class":599},[215,9285,9286,9289,9291,9294],{"class":217,"line":861},[215,9287,9288],{"class":771},"    enableLogging",[215,9290,747],{"class":599},[215,9292,9293],{"class":5496}," true",[215,9295,906],{"class":599},[215,9297,9298,9301,9303,9305],{"class":217,"line":966},[215,9299,9300],{"class":771},"    isGenJavaScript",[215,9302,747],{"class":599},[215,9304,5497],{"class":5496},[215,9306,906],{"class":599},[215,9308,9309,9312,9314],{"class":217,"line":1000},[215,9310,9311],{"class":771},"    apifoxConfig",[215,9313,747],{"class":599},[215,9315,761],{"class":599},[215,9317,9318,9321,9323,9325,9328,9330],{"class":217,"line":1005},[215,9319,9320],{"class":771},"      oasVersion",[215,9322,747],{"class":599},[215,9324,1755],{"class":599},[215,9326,9327],{"class":651},"3.1",[215,9329,1761],{"class":599},[215,9331,906],{"class":599},[215,9333,9334,9337,9339,9341,9344,9346,9348],{"class":217,"line":1022},[215,9335,9336],{"class":771},"      projectId",[215,9338,747],{"class":599},[215,9340,1755],{"class":599},[215,9342,9343],{"class":651},"66666",[215,9345,1761],{"class":599},[215,9347,820],{"class":599},[215,9349,9350],{"class":590},"//项目ID 需要拥有项目导出权限\n",[215,9352,9353,9356,9358,9360,9363,9365,9367],{"class":217,"line":1045},[215,9354,9355],{"class":771},"      apifoxToken",[215,9357,747],{"class":599},[215,9359,1755],{"class":599},[215,9361,9362],{"class":651},"APS-xxxx",[215,9364,1761],{"class":599},[215,9366,820],{"class":599},[215,9368,9369],{"class":590},"  //apifox中获取的token\n",[215,9371,9372],{"class":217,"line":1050},[215,9373,1991],{"class":599},[215,9375,9376,9379,9381],{"class":217,"line":1055},[215,9377,9378],{"class":771},"    hook",[215,9380,747],{"class":599},[215,9382,761],{"class":599},[215,9384,9385],{"class":217,"line":1062},[215,9386,9387],{"class":590},"      // 生成自定义方法名称的函数\n",[215,9389,9390,9393,9395,9397,9399,9401,9403],{"class":217,"line":1077},[215,9391,9392],{"class":683},"      customFunctionName",[215,9394,747],{"class":599},[215,9396,740],{"class":599},[215,9398,7006],{"class":743},[215,9400,827],{"class":599},[215,9402,693],{"class":674},[215,9404,761],{"class":599},[215,9406,9407],{"class":217,"line":1086},[215,9408,9409],{"class":590},"        // 查找路径中第一个'{'的位置，用于处理带参数的路径\n",[215,9411,9412,9414,9416,9418,9420,9422,9425,9427,9430,9432,9434,9436,9438],{"class":217,"line":1099},[215,9413,8552],{"class":674},[215,9415,6775],{"class":596},[215,9417,810],{"class":599},[215,9419,7033],{"class":596},[215,9421,600],{"class":599},[215,9423,9424],{"class":596},"path",[215,9426,600],{"class":599},[215,9428,9429],{"class":683},"indexOf",[215,9431,687],{"class":771},[215,9433,1761],{"class":599},[215,9435,2815],{"class":651},[215,9437,1761],{"class":599},[215,9439,1764],{"class":771},[215,9441,9442,9445,9448,9450,9452,9454],{"class":217,"line":1127},[215,9443,9444],{"class":674},"        let",[215,9446,9447],{"class":596}," newPath",[215,9449,810],{"class":599},[215,9451,7033],{"class":596},[215,9453,600],{"class":599},[215,9455,9456],{"class":596},"path\n",[215,9458,9459,9462,9464,9467,9469,9471,9473,9475],{"class":217,"line":1132},[215,9460,9461],{"class":767},"        if",[215,9463,740],{"class":771},[215,9465,9466],{"class":596},"index",[215,9468,1752],{"class":599},[215,9470,843],{"class":599},[215,9472,1944],{"class":823},[215,9474,786],{"class":771},[215,9476,1683],{"class":599},[215,9478,9479],{"class":217,"line":1139},[215,9480,9481],{"class":590},"          // 如果路径中有参数（用{}表示），则截取参数前的部分\n",[215,9483,9484,9487,9489,9491,9493,9495,9497,9500,9502,9504,9506,9508,9510,9512],{"class":217,"line":1144},[215,9485,9486],{"class":596},"          newPath",[215,9488,810],{"class":599},[215,9490,7033],{"class":596},[215,9492,600],{"class":599},[215,9494,9424],{"class":596},[215,9496,600],{"class":599},[215,9498,9499],{"class":683},"slice",[215,9501,687],{"class":771},[215,9503,794],{"class":823},[215,9505,820],{"class":599},[215,9507,6775],{"class":596},[215,9509,843],{"class":599},[215,9511,1219],{"class":823},[215,9513,1764],{"class":771},[215,9515,9516],{"class":217,"line":3788},[215,9517,8775],{"class":599},[215,9519,9520],{"class":217,"line":3794},[215,9521,9522],{"class":590},"        // 定义首字母大写函数\n",[215,9524,9525,9527,9530,9532,9534,9537,9539,9541,9543,9545,9548,9550,9553,9555,9557,9559,9561,9564,9567,9570,9572,9574,9576,9578,9580],{"class":217,"line":3811},[215,9526,8552],{"class":674},[215,9528,9529],{"class":596}," capitalize",[215,9531,810],{"class":599},[215,9533,740],{"class":599},[215,9535,9536],{"class":743},"str",[215,9538,747],{"class":599},[215,9540,751],{"class":750},[215,9542,827],{"class":599},[215,9544,693],{"class":674},[215,9546,9547],{"class":596}," str",[215,9549,600],{"class":599},[215,9551,9552],{"class":683},"charAt",[215,9554,687],{"class":771},[215,9556,794],{"class":823},[215,9558,827],{"class":771},[215,9560,600],{"class":599},[215,9562,9563],{"class":683},"toUpperCase",[215,9565,9566],{"class":771},"() ",[215,9568,9569],{"class":599},"+",[215,9571,9547],{"class":596},[215,9573,600],{"class":599},[215,9575,9499],{"class":683},[215,9577,687],{"class":771},[215,9579,1944],{"class":823},[215,9581,1764],{"class":771},[215,9583,9584],{"class":217,"line":3828},[215,9585,9586],{"class":590},"        // 分割路径并过滤空字符串\n",[215,9588,9589,9591,9594,9596,9598,9600,9602,9604,9606,9608,9610,9612,9614,9617,9619,9621,9623,9626],{"class":217,"line":3845},[215,9590,8552],{"class":674},[215,9592,9593],{"class":596}," paths",[215,9595,810],{"class":599},[215,9597,9447],{"class":596},[215,9599,600],{"class":599},[215,9601,706],{"class":683},[215,9603,687],{"class":771},[215,9605,1761],{"class":599},[215,9607,126],{"class":651},[215,9609,1761],{"class":599},[215,9611,827],{"class":771},[215,9613,600],{"class":599},[215,9615,9616],{"class":683},"filter",[215,9618,687],{"class":771},[215,9620,9424],{"class":743},[215,9622,693],{"class":674},[215,9624,9625],{"class":596}," path",[215,9627,1764],{"class":771},[215,9629,9630],{"class":217,"line":3855},[215,9631,9632],{"class":590},"        // 获取倒数第二个路径段并首字母大写\n",[215,9634,9635,9637,9640,9642,9644,9646,9649,9652,9654,9656,9658,9660,9663],{"class":217,"line":3883},[215,9636,8552],{"class":674},[215,9638,9639],{"class":596}," secondLastPath",[215,9641,810],{"class":599},[215,9643,9529],{"class":683},[215,9645,687],{"class":771},[215,9647,9648],{"class":596},"paths",[215,9650,9651],{"class":771},"[",[215,9653,9648],{"class":596},[215,9655,600],{"class":599},[215,9657,7275],{"class":596},[215,9659,843],{"class":599},[215,9661,9662],{"class":823}," 2",[215,9664,9665],{"class":771},"])\n",[215,9667,9668],{"class":217,"line":3910},[215,9669,9670],{"class":590},"        // 获取最后一个路径段并首字母大写\n",[215,9672,9673,9675,9678,9680,9682,9684,9686,9688,9690,9692,9694,9696,9698],{"class":217,"line":3937},[215,9674,8552],{"class":674},[215,9676,9677],{"class":596}," lastPath",[215,9679,810],{"class":599},[215,9681,9529],{"class":683},[215,9683,687],{"class":771},[215,9685,9648],{"class":596},[215,9687,9651],{"class":771},[215,9689,9648],{"class":596},[215,9691,600],{"class":599},[215,9693,7275],{"class":596},[215,9695,843],{"class":599},[215,9697,1219],{"class":823},[215,9699,9665],{"class":771},[215,9701,9702],{"class":217,"line":3964},[215,9703,9704],{"class":590},"        // 返回组合的方法名：HTTP方法名 + 倒数第二路径 + 最后路径(如：get:/api/user/list -> getUserList,post:/api/user/add -> postAddUser)\n",[215,9706,9707,9710,9712,9714,9716,9719,9722,9725,9727,9730],{"class":217,"line":3991},[215,9708,9709],{"class":767},"        return",[215,9711,1459],{"class":599},[215,9713,7006],{"class":596},[215,9715,600],{"class":599},[215,9717,9718],{"class":596},"method",[215,9720,9721],{"class":599},"}${",[215,9723,9724],{"class":596},"secondLastPath",[215,9726,9721],{"class":599},[215,9728,9729],{"class":596},"lastPath",[215,9731,9732],{"class":599},"}`\n",[215,9734,9735],{"class":217,"line":3997},[215,9736,1986],{"class":599},[215,9738,9739],{"class":217,"line":4003},[215,9740,1991],{"class":599},[215,9742,9743],{"class":217,"line":4009},[215,9744,948],{"class":599},[215,9746,9747,9749,9751,9753],{"class":217,"line":4016},[215,9748,2846],{"class":596},[215,9750,2849],{"class":767},[215,9752,9188],{"class":750},[215,9754,9755],{"class":596},"[]\n",[206,9757,9761],{"className":9758,"code":9759,"filename":9760,"language":6989,"meta":211,"style":211},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"scripts\": {\n    \"openapi-ts-request\": \"openapi-ts\"\n  }\n}\n","package.json",[153,9762,9763,9767,9781,9799,9803],{"__ignoreMap":211},[215,9764,9765],{"class":217,"line":218},[215,9766,1683],{"class":599},[215,9768,9769,9772,9775,9777,9779],{"class":217,"line":236},[215,9770,9771],{"class":599},"  \"",[215,9773,9774],{"class":674},"scripts",[215,9776,648],{"class":599},[215,9778,747],{"class":599},[215,9780,761],{"class":599},[215,9782,9783,9786,9788,9790,9792,9794,9797],{"class":217,"line":469},[215,9784,9785],{"class":599},"    \"",[215,9787,9150],{"class":750},[215,9789,648],{"class":599},[215,9791,747],{"class":599},[215,9793,779],{"class":599},[215,9795,9796],{"class":651},"openapi-ts",[215,9798,655],{"class":599},[215,9800,9801],{"class":217,"line":724},[215,9802,3447],{"class":599},[215,9804,9805],{"class":217,"line":730},[215,9806,2351],{"class":599},[206,9808,9811],{"className":2105,"code":9809,"filename":9810,"language":2107,"meta":211,"style":211},"# 安装依赖\npnpm add -D openapi-ts-request\n\n# 运行生成命令\npnpm openapi-ts-request\n","终端命令",[153,9812,9813,9818,9830,9834,9839],{"__ignoreMap":211},[215,9814,9815],{"class":217,"line":218},[215,9816,9817],{"class":590},"# 安装依赖\n",[215,9819,9820,9822,9824,9827],{"class":217,"line":236},[215,9821,2114],{"class":750},[215,9823,2117],{"class":651},[215,9825,9826],{"class":651}," -D",[215,9828,9829],{"class":651}," openapi-ts-request\n",[215,9831,9832],{"class":217,"line":469},[215,9833,721],{"emptyLinePlaceholder":108},[215,9835,9836],{"class":217,"line":724},[215,9837,9838],{"class":590},"# 运行生成命令\n",[215,9840,9841,9843],{"class":217,"line":730},[215,9842,2114],{"class":750},[215,9844,9829],{"class":651},[195,9846,9847],{"id":9847},"配置项详解",[345,9849,9850,9859],{},[348,9851,9852],{},[351,9853,9854,9857],{},[354,9855,9856],{},"配置项",[354,9858,360],{},[362,9860,9861,9871,9881,9891,9901,9911,9921],{},[351,9862,9863,9868],{},[367,9864,9865],{},[153,9866,9867],{},"serversPath",[367,9869,9870],{},"生成文件的存放路径",[351,9872,9873,9878],{},[367,9874,9875],{},[153,9876,9877],{},"requestLibPath",[367,9879,9880],{},"自定义请求库的引入路径",[351,9882,9883,9888],{},[367,9884,9885],{},[153,9886,9887],{},"requestOptionsType",[367,9889,9890],{},"请求选项的类型定义",[351,9892,9893,9898],{},[367,9894,9895],{},[153,9896,9897],{},"reactQueryMode",[367,9899,9900],{},"设置为 'vue' 以适配 Vue 项目",[351,9902,9903,9908],{},[367,9904,9905],{},[153,9906,9907],{},"enableLogging",[367,9909,9910],{},"是否启用日志输出",[351,9912,9913,9918],{},[367,9914,9915],{},[153,9916,9917],{},"isGenJavaScript",[367,9919,9920],{},"是否生成 JavaScript 代码（false 表示生成 TypeScript）",[351,9922,9923,9928],{},[367,9924,9925],{},[153,9926,9927],{},"apifoxConfig",[367,9929,9930],{},"Apifox 项目配置",[145,9932,9933],{"id":9933},"生成的文件结构",[149,9935,9936],{},"运行命令后，工具会在指定位置自动生成以下文件：",[206,9938,9941],{"className":9939,"code":9940,"language":558},[556],"src/\n└── api/\n    └── openApiRequest/\n        ├── common.ts\n        ├── index.ts\n        ├── types.ts\n        └── v1.ts\n",[153,9942,9940],{"__ignoreMap":211},[145,9944,9945],{"id":9945},"生成代码示例",[149,9947,9948],{},"生成的 API 请求函数具有完整的类型支持：",[206,9950,9954],{"className":9951,"code":9952,"language":9953,"meta":211,"style":211},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","/** 派遣战舰远征 POST /api/v1/game/warshipAdventure */\nexport async function postGameWarshipAdventure({\n  body,\n  options,\n}: {\n  body: API.PostGameWarshipAdventureBody;\n  options?: CustomRequestOptions;\n}) {\n  return request\u003CAPI.PostGameWarshipAdventureResponse>(\n    '/api/v1/game/warshipAdventure',\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      data: body,\n      ...(options || {}),\n    }\n  );\n}\n","typescript",[153,9955,9956,9961,9975,9982,9989,9996,10012,10023,10030,10051,10062,10066,10081,10090,10111,10115,10126,10145,10149,10155],{"__ignoreMap":211},[215,9957,9958],{"class":217,"line":218},[215,9959,9960],{"class":590},"/** 派遣战舰远征 POST /api/v1/game/warshipAdventure */\n",[215,9962,9963,9965,9967,9969,9972],{"class":217,"line":236},[215,9964,1672],{"class":767},[215,9966,2211],{"class":674},[215,9968,2214],{"class":674},[215,9970,9971],{"class":683}," postGameWarshipAdventure",[215,9973,9974],{"class":599},"({\n",[215,9976,9977,9980],{"class":217,"line":469},[215,9978,9979],{"class":743},"  body",[215,9981,906],{"class":599},[215,9983,9984,9987],{"class":217,"line":724},[215,9985,9986],{"class":743},"  options",[215,9988,906],{"class":599},[215,9990,9991,9994],{"class":217,"line":730},[215,9992,9993],{"class":599},"}:",[215,9995,761],{"class":599},[215,9997,9998,10000,10002,10005,10007,10010],{"class":217,"line":764},[215,9999,9979],{"class":771},[215,10001,747],{"class":599},[215,10003,10004],{"class":750}," API",[215,10006,600],{"class":599},[215,10008,10009],{"class":750},"PostGameWarshipAdventureBody",[215,10011,612],{"class":599},[215,10013,10014,10016,10018,10021],{"class":217,"line":801},[215,10015,9986],{"class":771},[215,10017,8268],{"class":599},[215,10019,10020],{"class":750}," CustomRequestOptions",[215,10022,612],{"class":599},[215,10024,10025,10028],{"class":217,"line":832},[215,10026,10027],{"class":599},"})",[215,10029,761],{"class":599},[215,10031,10032,10034,10037,10039,10042,10044,10047,10049],{"class":217,"line":861},[215,10033,835],{"class":767},[215,10035,10036],{"class":683}," request",[215,10038,1425],{"class":599},[215,10040,10041],{"class":750},"API",[215,10043,600],{"class":599},[215,10045,10046],{"class":750},"PostGameWarshipAdventureResponse",[215,10048,986],{"class":599},[215,10050,889],{"class":771},[215,10052,10053,10055,10058,10060],{"class":217,"line":966},[215,10054,3306],{"class":599},[215,10056,10057],{"class":651},"/api/v1/game/warshipAdventure",[215,10059,1761],{"class":599},[215,10061,906],{"class":599},[215,10063,10064],{"class":217,"line":1000},[215,10065,3791],{"class":599},[215,10067,10068,10071,10073,10075,10077,10079],{"class":217,"line":1005},[215,10069,10070],{"class":771},"      method",[215,10072,747],{"class":599},[215,10074,1755],{"class":599},[215,10076,6946],{"class":651},[215,10078,1761],{"class":599},[215,10080,906],{"class":599},[215,10082,10083,10086,10088],{"class":217,"line":1022},[215,10084,10085],{"class":771},"      headers",[215,10087,747],{"class":599},[215,10089,761],{"class":599},[215,10091,10092,10095,10098,10100,10102,10104,10107,10109],{"class":217,"line":1045},[215,10093,10094],{"class":599},"        '",[215,10096,10097],{"class":771},"Content-Type",[215,10099,1761],{"class":599},[215,10101,747],{"class":599},[215,10103,1755],{"class":599},[215,10105,10106],{"class":651},"application/json",[215,10108,1761],{"class":599},[215,10110,906],{"class":599},[215,10112,10113],{"class":217,"line":1050},[215,10114,1986],{"class":599},[215,10116,10117,10119,10121,10124],{"class":217,"line":1055},[215,10118,3848],{"class":771},[215,10120,747],{"class":599},[215,10122,10123],{"class":596}," body",[215,10125,906],{"class":599},[215,10127,10128,10131,10133,10136,10138,10141,10143],{"class":217,"line":1062},[215,10129,10130],{"class":599},"      ...",[215,10132,687],{"class":771},[215,10134,10135],{"class":596},"options",[215,10137,1743],{"class":599},[215,10139,10140],{"class":599}," {}",[215,10142,827],{"class":771},[215,10144,906],{"class":599},[215,10146,10147],{"class":217,"line":1077},[215,10148,4000],{"class":599},[215,10150,10151,10153],{"class":217,"line":1086},[215,10152,5940],{"class":771},[215,10154,612],{"class":599},[215,10156,10157],{"class":217,"line":1099},[215,10158,2351],{"class":599},[145,10160,10161],{"id":10161},"优势特点",[302,10163,10164,10170,10176,10182,10188],{},[305,10165,10166,10169],{},[163,10167,10168],{},"类型安全","：自动生成 TypeScript 类型定义，编译时捕获错误",[305,10171,10172,10175],{},[163,10173,10174],{},"减少重复工作","：无需手动编写 API 请求函数",[305,10177,10178,10181],{},[163,10179,10180],{},"与 Apifox 集成","：直接从最新的 API 文档生成代码",[305,10183,10184,10187],{},[163,10185,10186],{},"可定制化","：通过 hooks 自定义函数命名规则",[305,10189,10190,10193],{},[163,10191,10192],{},"Vue 生态适配","：支持 Vue 项目中的请求模式",[145,10195,10196],{"id":10196},"最佳实践",[302,10198,10199,10202,10205,10208],{},[305,10200,10201],{},"将生成的 API 文件加入版本控制",[305,10203,10204],{},"定期重新生成以同步最新的 API 变更",[305,10206,10207],{},"结合 Git hooks 在提交前自动更新 API 代码",[305,10209,10210],{},"在 CI/CD 流程中验证生成的代码",[149,10212,10213,10214,10216],{},"通过使用 ",[153,10215,9150],{},"，我们可以显著提高 API 对接的效率，同时确保类型安全，减少人为错误。",[158,10218,10219],{},[149,10220,1585],{},[460,10222,10223],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":211,"searchDepth":236,"depth":236,"links":10225},[10226,10227,10230,10231,10232,10233],{"id":9154,"depth":236,"text":9155},{"id":9163,"depth":236,"text":9163,"children":10228},[10229],{"id":9847,"depth":469,"text":9847},{"id":9933,"depth":236,"text":9933},{"id":9945,"depth":236,"text":9945},{"id":10161,"depth":236,"text":10161},{"id":10196,"depth":236,"text":10196},"2025-12-04T00:00:00.000Z","介绍如何根据 Apifox 文档自动生成类型安全的 API 请求文件，提高开发效率",{"src":10237},"https://picsum.photos/id/106/640/360",{},{"title":64,"description":10235},"SmbNN4HWjlwr7sIFtQtcOJW-Wv39NDxwGN4rghG3wuQ",{"id":10242,"title":60,"authors":10243,"badge":10246,"body":10247,"date":11696,"description":11697,"extension":477,"image":11698,"meta":11700,"navigation":108,"path":61,"seo":11701,"stem":62,"__hash__":11702},"posts/3.blog/1.asian-cuisine.md",[10244],{"name":135,"avatar":10245},{"src":138},{"label":5437},{"type":142,"value":10248,"toc":11679},[10249,10260,10264,10270,10303,10311,10315,10319,10322,10419,10423,10429,10557,10561,10567,10751,10755,10762,10766,10774,10906,10910,10921,11140,11144,11151,11361,11365,11372,11556,11560,11569,11594,11597,11601,11651,11660,11663,11672,11676],[149,10250,10251,10252,10255,10256,10259],{},"在 Vue 3 开发中使用 ",[153,10253,10254],{},"\u003CTransition>"," 组件实现动画效果时，很多开发者都会遇到一个常见警告：",[163,10257,10258],{},"“Transition 组件的直接子元素必须是单一的根 DOM 元素”","。本文将深入解析这个问题的原因、常见错误场景，并提供完整的解决方案。",[145,10261,10263],{"id":10262},"一核心规则transition-组件的子元素要求","一、核心规则：Transition 组件的子元素要求",[149,10265,10266,10267,10269],{},"Vue 3 的 ",[153,10268,10254],{}," 组件对其直接子元素有明确限制，必须满足：",[505,10271,10272,10290,10293],{},[305,10273,10274,10275,10278,10279,10282,10283,10282,10286,10289],{},"必须是 ",[163,10276,10277],{},"单一的根 DOM 元素","（即 ",[153,10280,10281],{},"\u003Cdiv>","、",[153,10284,10285],{},"\u003Cspan>",[153,10287,10288],{},"\u003Csection>"," 等真实 HTML 标签）；",[305,10291,10292],{},"不能是纯文本、注释、多个根节点；",[305,10294,10295,10296,10282,10299,10302],{},"不能是 ",[153,10297,10298],{},"\u003CTeleport>",[153,10300,10301],{},"\u003CKeepAlive>"," 等特殊内置组件。",[149,10304,10305,10306,10282,10308,10310],{},"💡 关键提醒：尽管 Vue 3 支持多根组件（Fragments），但 ",[153,10307,10254],{},[153,10309,10301],{}," 等动画 / 缓存相关组件并不兼容这种结构。",[145,10312,10314],{"id":10313},"二常见错误场景及示例","二、常见错误场景及示例",[195,10316,10318],{"id":10317},"场景-1组件模板只有纯文本无根元素","场景 1：组件模板只有纯文本（无根元素）",[149,10320,10321],{},"组件模板中直接写文本，没有任何 DOM 元素包裹，会触发警告：",[206,10323,10325],{"className":3478,"code":10324,"language":3480,"meta":211,"style":211},"\u003C!-- ❌ 错误：无任何包裹元素，纯文本作为子元素 -->\n\n\u003Ctemplate>\n\n Hello, Vue 3 Transition!\n\n\u003C/template>\n\n\u003C!-- 对应的 Transition 使用方式（同样报错） -->\n\n\u003CTransition name=\"fade\">\n\n \u003CTextComponent /> \\\u003C!-- 该组件无DOM根元素 -->\n\n\u003C/Transition>\n",[153,10326,10327,10332,10336,10344,10348,10353,10357,10365,10369,10374,10378,10398,10402,10407,10411],{"__ignoreMap":211},[215,10328,10329],{"class":217,"line":218},[215,10330,10331],{"class":590},"\u003C!-- ❌ 错误：无任何包裹元素，纯文本作为子元素 -->\n",[215,10333,10334],{"class":217,"line":236},[215,10335,721],{"emptyLinePlaceholder":108},[215,10337,10338,10340,10342],{"class":217,"line":469},[215,10339,1425],{"class":599},[215,10341,3489],{"class":771},[215,10343,3505],{"class":599},[215,10345,10346],{"class":217,"line":724},[215,10347,721],{"emptyLinePlaceholder":108},[215,10349,10350],{"class":217,"line":730},[215,10351,10352],{"class":596}," Hello, Vue 3 Transition!\n",[215,10354,10355],{"class":217,"line":764},[215,10356,721],{"emptyLinePlaceholder":108},[215,10358,10359,10361,10363],{"class":217,"line":801},[215,10360,3521],{"class":599},[215,10362,3489],{"class":771},[215,10364,3505],{"class":599},[215,10366,10367],{"class":217,"line":832},[215,10368,721],{"emptyLinePlaceholder":108},[215,10370,10371],{"class":217,"line":861},[215,10372,10373],{"class":590},"\u003C!-- 对应的 Transition 使用方式（同样报错） -->\n",[215,10375,10376],{"class":217,"line":966},[215,10377,721],{"emptyLinePlaceholder":108},[215,10379,10380,10382,10385,10387,10389,10391,10394,10396],{"class":217,"line":1000},[215,10381,1425],{"class":599},[215,10383,10384],{"class":771},"Transition",[215,10386,2739],{"class":674},[215,10388,606],{"class":599},[215,10390,648],{"class":599},[215,10392,10393],{"class":651},"fade",[215,10395,648],{"class":599},[215,10397,3505],{"class":599},[215,10399,10400],{"class":217,"line":1005},[215,10401,721],{"emptyLinePlaceholder":108},[215,10403,10404],{"class":217,"line":1022},[215,10405,10406],{"class":596}," \u003CTextComponent /> \\\u003C!-- 该组件无DOM根元素 -->\n",[215,10408,10409],{"class":217,"line":1045},[215,10410,721],{"emptyLinePlaceholder":108},[215,10412,10413,10415,10417],{"class":217,"line":1050},[215,10414,3521],{"class":599},[215,10416,10384],{"class":771},[215,10418,3505],{"class":599},[195,10420,10422],{"id":10421},"场景-2组件存在多个根节点fragments","场景 2：组件存在多个根节点（Fragments）",[149,10424,10425,10426,10428],{},"Vue 3 允许组件有多个根节点，但 ",[153,10427,10254],{}," 不支持这种结构：",[206,10430,10432],{"className":3478,"code":10431,"language":3480,"meta":211,"style":211},"\u003C!-- ❌ 错误：多根节点（h1 和 p 并列，无外层包裹） -->\n\n\u003Ctemplate>\n\n \u003Ch1>Transition 动画演示\\\u003C/h1>\n\n \u003Cp>这是一个多根节点的组件\\\u003C/p>\n\n\u003C/template>\n\n\u003C!-- 对应的 Transition 使用方式（报错） -->\n\n\u003CTransition name=\"fade\">\n\n \u003CMultiRootComponent /> \u003C!-- 该组件有多个根节点 -->\n\n\u003C/Transition>\n",[153,10433,10434,10439,10443,10451,10455,10472,10476,10493,10497,10505,10509,10514,10518,10536,10540,10545,10549],{"__ignoreMap":211},[215,10435,10436],{"class":217,"line":218},[215,10437,10438],{"class":590},"\u003C!-- ❌ 错误：多根节点（h1 和 p 并列，无外层包裹） -->\n",[215,10440,10441],{"class":217,"line":236},[215,10442,721],{"emptyLinePlaceholder":108},[215,10444,10445,10447,10449],{"class":217,"line":469},[215,10446,1425],{"class":599},[215,10448,3489],{"class":771},[215,10450,3505],{"class":599},[215,10452,10453],{"class":217,"line":724},[215,10454,721],{"emptyLinePlaceholder":108},[215,10456,10457,10459,10461,10463,10466,10468,10470],{"class":217,"line":730},[215,10458,8676],{"class":599},[215,10460,3513],{"class":771},[215,10462,986],{"class":599},[215,10464,10465],{"class":596},"Transition 动画演示\\",[215,10467,3521],{"class":599},[215,10469,3513],{"class":771},[215,10471,3505],{"class":599},[215,10473,10474],{"class":217,"line":764},[215,10475,721],{"emptyLinePlaceholder":108},[215,10477,10478,10480,10482,10484,10487,10489,10491],{"class":217,"line":801},[215,10479,8676],{"class":599},[215,10481,149],{"class":771},[215,10483,986],{"class":599},[215,10485,10486],{"class":596},"这是一个多根节点的组件\\",[215,10488,3521],{"class":599},[215,10490,149],{"class":771},[215,10492,3505],{"class":599},[215,10494,10495],{"class":217,"line":832},[215,10496,721],{"emptyLinePlaceholder":108},[215,10498,10499,10501,10503],{"class":217,"line":861},[215,10500,3521],{"class":599},[215,10502,3489],{"class":771},[215,10504,3505],{"class":599},[215,10506,10507],{"class":217,"line":966},[215,10508,721],{"emptyLinePlaceholder":108},[215,10510,10511],{"class":217,"line":1000},[215,10512,10513],{"class":590},"\u003C!-- 对应的 Transition 使用方式（报错） -->\n",[215,10515,10516],{"class":217,"line":1005},[215,10517,721],{"emptyLinePlaceholder":108},[215,10519,10520,10522,10524,10526,10528,10530,10532,10534],{"class":217,"line":1022},[215,10521,1425],{"class":599},[215,10523,10384],{"class":771},[215,10525,2739],{"class":674},[215,10527,606],{"class":599},[215,10529,648],{"class":599},[215,10531,10393],{"class":651},[215,10533,648],{"class":599},[215,10535,3505],{"class":599},[215,10537,10538],{"class":217,"line":1045},[215,10539,721],{"emptyLinePlaceholder":108},[215,10541,10542],{"class":217,"line":1050},[215,10543,10544],{"class":596}," \u003CMultiRootComponent /> \u003C!-- 该组件有多个根节点 -->\n",[215,10546,10547],{"class":217,"line":1055},[215,10548,721],{"emptyLinePlaceholder":108},[215,10550,10551,10553,10555],{"class":217,"line":1062},[215,10552,3521],{"class":599},[215,10554,10384],{"class":771},[215,10556,3505],{"class":599},[195,10558,10560],{"id":10559},"场景-3动态组件未保证单一根节点","场景 3：动态组件未保证单一根节点",[149,10562,3020,10563,10566],{},[153,10564,10565],{},"\u003Ccomponent :is=\"...\">"," 切换组件时，如果某个候选组件不符合要求，会触发警告：",[206,10568,10570],{"className":3478,"code":10569,"language":3480,"meta":211,"style":211},"\u003C!-- 父组件中使用动态组件 -->\n\n\u003CTransition name=\"fade\">\n\n \u003Ccomponent :is=\"currentView\" :key=\"currentView\" />\n\n\u003C/Transition>\n\n\u003C!-- 问题：若 currentView 对应的组件（如 About.vue）是多根节点，则报错 -->\n\n\u003C!-- About.vue（❌ 错误示例） -->\n\n\u003Ctemplate>\n\n \u003Ch2>关于我们\\\u003C/h2>\n\n \u003Cul>\n\n   \u003Cli>公司简介\\\u003C/li>\n\n   \u003Cli>联系我们\\\u003C/li>\n\n \u003C/ul>\n\n\u003C/template>\n",[153,10571,10572,10577,10581,10599,10603,10608,10612,10620,10624,10629,10633,10638,10642,10650,10654,10671,10675,10683,10687,10705,10709,10726,10730,10739,10743],{"__ignoreMap":211},[215,10573,10574],{"class":217,"line":218},[215,10575,10576],{"class":590},"\u003C!-- 父组件中使用动态组件 -->\n",[215,10578,10579],{"class":217,"line":236},[215,10580,721],{"emptyLinePlaceholder":108},[215,10582,10583,10585,10587,10589,10591,10593,10595,10597],{"class":217,"line":469},[215,10584,1425],{"class":599},[215,10586,10384],{"class":771},[215,10588,2739],{"class":674},[215,10590,606],{"class":599},[215,10592,648],{"class":599},[215,10594,10393],{"class":651},[215,10596,648],{"class":599},[215,10598,3505],{"class":599},[215,10600,10601],{"class":217,"line":724},[215,10602,721],{"emptyLinePlaceholder":108},[215,10604,10605],{"class":217,"line":730},[215,10606,10607],{"class":596}," \u003Ccomponent :is=\"currentView\" :key=\"currentView\" />\n",[215,10609,10610],{"class":217,"line":764},[215,10611,721],{"emptyLinePlaceholder":108},[215,10613,10614,10616,10618],{"class":217,"line":801},[215,10615,3521],{"class":599},[215,10617,10384],{"class":771},[215,10619,3505],{"class":599},[215,10621,10622],{"class":217,"line":832},[215,10623,721],{"emptyLinePlaceholder":108},[215,10625,10626],{"class":217,"line":861},[215,10627,10628],{"class":590},"\u003C!-- 问题：若 currentView 对应的组件（如 About.vue）是多根节点，则报错 -->\n",[215,10630,10631],{"class":217,"line":966},[215,10632,721],{"emptyLinePlaceholder":108},[215,10634,10635],{"class":217,"line":1000},[215,10636,10637],{"class":590},"\u003C!-- About.vue（❌ 错误示例） -->\n",[215,10639,10640],{"class":217,"line":1005},[215,10641,721],{"emptyLinePlaceholder":108},[215,10643,10644,10646,10648],{"class":217,"line":1022},[215,10645,1425],{"class":599},[215,10647,3489],{"class":771},[215,10649,3505],{"class":599},[215,10651,10652],{"class":217,"line":1045},[215,10653,721],{"emptyLinePlaceholder":108},[215,10655,10656,10658,10660,10662,10665,10667,10669],{"class":217,"line":1050},[215,10657,8676],{"class":599},[215,10659,145],{"class":771},[215,10661,986],{"class":599},[215,10663,10664],{"class":596},"关于我们\\",[215,10666,3521],{"class":599},[215,10668,145],{"class":771},[215,10670,3505],{"class":599},[215,10672,10673],{"class":217,"line":1055},[215,10674,721],{"emptyLinePlaceholder":108},[215,10676,10677,10679,10681],{"class":217,"line":1062},[215,10678,8676],{"class":599},[215,10680,505],{"class":771},[215,10682,3505],{"class":599},[215,10684,10685],{"class":217,"line":1077},[215,10686,721],{"emptyLinePlaceholder":108},[215,10688,10689,10692,10694,10696,10699,10701,10703],{"class":217,"line":1086},[215,10690,10691],{"class":599},"   \u003C",[215,10693,305],{"class":771},[215,10695,986],{"class":599},[215,10697,10698],{"class":596},"公司简介\\",[215,10700,3521],{"class":599},[215,10702,305],{"class":771},[215,10704,3505],{"class":599},[215,10706,10707],{"class":217,"line":1099},[215,10708,721],{"emptyLinePlaceholder":108},[215,10710,10711,10713,10715,10717,10720,10722,10724],{"class":217,"line":1127},[215,10712,10691],{"class":599},[215,10714,305],{"class":771},[215,10716,986],{"class":599},[215,10718,10719],{"class":596},"联系我们\\",[215,10721,3521],{"class":599},[215,10723,305],{"class":771},[215,10725,3505],{"class":599},[215,10727,10728],{"class":217,"line":1132},[215,10729,721],{"emptyLinePlaceholder":108},[215,10731,10732,10735,10737],{"class":217,"line":1139},[215,10733,10734],{"class":599}," \u003C/",[215,10736,505],{"class":771},[215,10738,3505],{"class":599},[215,10740,10741],{"class":217,"line":1144},[215,10742,721],{"emptyLinePlaceholder":108},[215,10744,10745,10747,10749],{"class":217,"line":3788},[215,10746,3521],{"class":599},[215,10748,3489],{"class":771},[215,10750,3505],{"class":599},[145,10752,10754],{"id":10753},"三解决方案确保单一根-dom-元素","三、解决方案：确保单一根 DOM 元素",[149,10756,10757,10758,10761],{},"解决思路非常简单：",[163,10759,10760],{},"给组件模板添加一个外层包裹元素","，将多根节点、纯文本等统一包裹为单一的根 DOM 元素。",[195,10763,10765],{"id":10764},"方案-1修复纯文本问题","方案 1：修复纯文本问题",[149,10767,10768,10769,10282,10771,10773],{},"用 ",[153,10770,10285],{},[153,10772,10281],{}," 等行内 / 块级元素包裹纯文本：",[206,10775,10777],{"className":3478,"code":10776,"language":3480,"meta":211,"style":211},"\u003C!-- ✅ 正确：用 span 包裹纯文本（适合行内内容） -->\n\n\u003Ctemplate>\n\n \u003Cspan>Hello, Vue 3 Transition!\\\u003C/span>\n\n\u003C/template>\n\n\u003C!-- 或用 div 包裹（适合块级内容） -->\n\n\u003Ctemplate>\n\n \u003Cdiv class=\"text-container\">\n\n   Hello, Vue 3 Transition!\n\n \u003C/div>\n\n\u003C/template>\n",[153,10778,10779,10784,10788,10796,10800,10817,10821,10829,10833,10838,10842,10850,10854,10873,10877,10882,10886,10894,10898],{"__ignoreMap":211},[215,10780,10781],{"class":217,"line":218},[215,10782,10783],{"class":590},"\u003C!-- ✅ 正确：用 span 包裹纯文本（适合行内内容） -->\n",[215,10785,10786],{"class":217,"line":236},[215,10787,721],{"emptyLinePlaceholder":108},[215,10789,10790,10792,10794],{"class":217,"line":469},[215,10791,1425],{"class":599},[215,10793,3489],{"class":771},[215,10795,3505],{"class":599},[215,10797,10798],{"class":217,"line":724},[215,10799,721],{"emptyLinePlaceholder":108},[215,10801,10802,10804,10806,10808,10811,10813,10815],{"class":217,"line":730},[215,10803,8676],{"class":599},[215,10805,215],{"class":771},[215,10807,986],{"class":599},[215,10809,10810],{"class":596},"Hello, Vue 3 Transition!\\",[215,10812,3521],{"class":599},[215,10814,215],{"class":771},[215,10816,3505],{"class":599},[215,10818,10819],{"class":217,"line":764},[215,10820,721],{"emptyLinePlaceholder":108},[215,10822,10823,10825,10827],{"class":217,"line":801},[215,10824,3521],{"class":599},[215,10826,3489],{"class":771},[215,10828,3505],{"class":599},[215,10830,10831],{"class":217,"line":832},[215,10832,721],{"emptyLinePlaceholder":108},[215,10834,10835],{"class":217,"line":861},[215,10836,10837],{"class":590},"\u003C!-- 或用 div 包裹（适合块级内容） -->\n",[215,10839,10840],{"class":217,"line":966},[215,10841,721],{"emptyLinePlaceholder":108},[215,10843,10844,10846,10848],{"class":217,"line":1000},[215,10845,1425],{"class":599},[215,10847,3489],{"class":771},[215,10849,3505],{"class":599},[215,10851,10852],{"class":217,"line":1005},[215,10853,721],{"emptyLinePlaceholder":108},[215,10855,10856,10858,10860,10862,10864,10866,10869,10871],{"class":217,"line":1022},[215,10857,8676],{"class":599},[215,10859,3502],{"class":771},[215,10861,4341],{"class":674},[215,10863,606],{"class":599},[215,10865,648],{"class":599},[215,10867,10868],{"class":651},"text-container",[215,10870,648],{"class":599},[215,10872,3505],{"class":599},[215,10874,10875],{"class":217,"line":1045},[215,10876,721],{"emptyLinePlaceholder":108},[215,10878,10879],{"class":217,"line":1050},[215,10880,10881],{"class":596},"   Hello, Vue 3 Transition!\n",[215,10883,10884],{"class":217,"line":1055},[215,10885,721],{"emptyLinePlaceholder":108},[215,10887,10888,10890,10892],{"class":217,"line":1062},[215,10889,10734],{"class":599},[215,10891,3502],{"class":771},[215,10893,3505],{"class":599},[215,10895,10896],{"class":217,"line":1077},[215,10897,721],{"emptyLinePlaceholder":108},[215,10899,10900,10902,10904],{"class":217,"line":1086},[215,10901,3521],{"class":599},[215,10903,3489],{"class":771},[215,10905,3505],{"class":599},[195,10907,10909],{"id":10908},"方案-2修复多根节点问题","方案 2：修复多根节点问题",[149,10911,10768,10912,10914,10915,10282,10917,10920],{},[153,10913,10281],{}," 或语义化标签（",[153,10916,10288],{},[153,10918,10919],{},"\u003Carticle>"," 等）包裹所有根节点：",[206,10922,10924],{"className":3478,"code":10923,"language":3480,"meta":211,"style":211},"\u003C!-- ✅ 正确：用 div 包裹多根节点 -->\n\n\u003Ctemplate>\n\n \u003Cdiv class=\"component-container\">\n\n   \u003Ch1>Transition 动画演示\\\u003C/h1>\n\n   \u003Cp>这是一个修复后的单根节点组件\\\u003C/p>\n\n \u003C/div>\n\n\u003C/template>\n\n\u003C!-- 或使用语义化标签（推荐，提升可读性） -->\n\n\u003Ctemplate>\n\n \u003Csection class=\"component-section\">\n\n   \u003Ch1>Transition 动画演示\\\u003C/h1>\n\n   \u003Cp>这是一个修复后的单根节点组件\\\u003C/p>\n\n \u003C/section>\n\n\u003C/template>\n",[153,10925,10926,10931,10935,10943,10947,10966,10970,10986,10990,11007,11011,11019,11023,11031,11035,11040,11044,11052,11056,11076,11080,11096,11100,11116,11120,11128,11132],{"__ignoreMap":211},[215,10927,10928],{"class":217,"line":218},[215,10929,10930],{"class":590},"\u003C!-- ✅ 正确：用 div 包裹多根节点 -->\n",[215,10932,10933],{"class":217,"line":236},[215,10934,721],{"emptyLinePlaceholder":108},[215,10936,10937,10939,10941],{"class":217,"line":469},[215,10938,1425],{"class":599},[215,10940,3489],{"class":771},[215,10942,3505],{"class":599},[215,10944,10945],{"class":217,"line":724},[215,10946,721],{"emptyLinePlaceholder":108},[215,10948,10949,10951,10953,10955,10957,10959,10962,10964],{"class":217,"line":730},[215,10950,8676],{"class":599},[215,10952,3502],{"class":771},[215,10954,4341],{"class":674},[215,10956,606],{"class":599},[215,10958,648],{"class":599},[215,10960,10961],{"class":651},"component-container",[215,10963,648],{"class":599},[215,10965,3505],{"class":599},[215,10967,10968],{"class":217,"line":764},[215,10969,721],{"emptyLinePlaceholder":108},[215,10971,10972,10974,10976,10978,10980,10982,10984],{"class":217,"line":801},[215,10973,10691],{"class":599},[215,10975,3513],{"class":771},[215,10977,986],{"class":599},[215,10979,10465],{"class":596},[215,10981,3521],{"class":599},[215,10983,3513],{"class":771},[215,10985,3505],{"class":599},[215,10987,10988],{"class":217,"line":832},[215,10989,721],{"emptyLinePlaceholder":108},[215,10991,10992,10994,10996,10998,11001,11003,11005],{"class":217,"line":861},[215,10993,10691],{"class":599},[215,10995,149],{"class":771},[215,10997,986],{"class":599},[215,10999,11000],{"class":596},"这是一个修复后的单根节点组件\\",[215,11002,3521],{"class":599},[215,11004,149],{"class":771},[215,11006,3505],{"class":599},[215,11008,11009],{"class":217,"line":966},[215,11010,721],{"emptyLinePlaceholder":108},[215,11012,11013,11015,11017],{"class":217,"line":1000},[215,11014,10734],{"class":599},[215,11016,3502],{"class":771},[215,11018,3505],{"class":599},[215,11020,11021],{"class":217,"line":1005},[215,11022,721],{"emptyLinePlaceholder":108},[215,11024,11025,11027,11029],{"class":217,"line":1022},[215,11026,3521],{"class":599},[215,11028,3489],{"class":771},[215,11030,3505],{"class":599},[215,11032,11033],{"class":217,"line":1045},[215,11034,721],{"emptyLinePlaceholder":108},[215,11036,11037],{"class":217,"line":1050},[215,11038,11039],{"class":590},"\u003C!-- 或使用语义化标签（推荐，提升可读性） -->\n",[215,11041,11042],{"class":217,"line":1055},[215,11043,721],{"emptyLinePlaceholder":108},[215,11045,11046,11048,11050],{"class":217,"line":1062},[215,11047,1425],{"class":599},[215,11049,3489],{"class":771},[215,11051,3505],{"class":599},[215,11053,11054],{"class":217,"line":1077},[215,11055,721],{"emptyLinePlaceholder":108},[215,11057,11058,11060,11063,11065,11067,11069,11072,11074],{"class":217,"line":1086},[215,11059,8676],{"class":599},[215,11061,11062],{"class":771},"section",[215,11064,4341],{"class":674},[215,11066,606],{"class":599},[215,11068,648],{"class":599},[215,11070,11071],{"class":651},"component-section",[215,11073,648],{"class":599},[215,11075,3505],{"class":599},[215,11077,11078],{"class":217,"line":1099},[215,11079,721],{"emptyLinePlaceholder":108},[215,11081,11082,11084,11086,11088,11090,11092,11094],{"class":217,"line":1127},[215,11083,10691],{"class":599},[215,11085,3513],{"class":771},[215,11087,986],{"class":599},[215,11089,10465],{"class":596},[215,11091,3521],{"class":599},[215,11093,3513],{"class":771},[215,11095,3505],{"class":599},[215,11097,11098],{"class":217,"line":1132},[215,11099,721],{"emptyLinePlaceholder":108},[215,11101,11102,11104,11106,11108,11110,11112,11114],{"class":217,"line":1139},[215,11103,10691],{"class":599},[215,11105,149],{"class":771},[215,11107,986],{"class":599},[215,11109,11000],{"class":596},[215,11111,3521],{"class":599},[215,11113,149],{"class":771},[215,11115,3505],{"class":599},[215,11117,11118],{"class":217,"line":1144},[215,11119,721],{"emptyLinePlaceholder":108},[215,11121,11122,11124,11126],{"class":217,"line":3788},[215,11123,10734],{"class":599},[215,11125,11062],{"class":771},[215,11127,3505],{"class":599},[215,11129,11130],{"class":217,"line":3794},[215,11131,721],{"emptyLinePlaceholder":108},[215,11133,11134,11136,11138],{"class":217,"line":3811},[215,11135,3521],{"class":599},[215,11137,3489],{"class":771},[215,11139,3505],{"class":599},[195,11141,11143],{"id":11142},"方案-3处理动态组件场景","方案 3：处理动态组件场景",[149,11145,11146,11147,11150],{},"确保所有可能被切换的组件（",[153,11148,11149],{},"currentView"," 对应的候选组件）都满足 “单一根 DOM 元素” 要求：",[206,11152,11154],{"className":3478,"code":11153,"language":3480,"meta":211,"style":211},"\u003C!-- 父组件：动态组件用法不变 -->\n\n\u003CTransition name=\"fade\">    \n\n \u003Ccomponent :is=\"currentView\" :key=\"currentView\" />\n\n\u003C/Transition>\n\n\u003C!-- 所有候选组件需修复为单根节点，例如 About.vue（✅ 正确示例） -->\n\n\u003Ctemplate>\n\n \u003Cdiv class=\"about-container\">\n\n   \u003Ch2>关于我们\\\u003C/h2>\n\n   \u003Cul>\n\n     \u003Cli>公司简介\u003C/li>\n\n     \u003Cli>联系我们\u003C/li>\n\n   \u003C/ul>\n\n \u003C/div>\n\n\u003C/template>\n",[153,11155,11156,11161,11165,11185,11189,11193,11197,11205,11209,11214,11218,11226,11230,11249,11253,11269,11273,11281,11285,11303,11307,11324,11328,11337,11341,11349,11353],{"__ignoreMap":211},[215,11157,11158],{"class":217,"line":218},[215,11159,11160],{"class":590},"\u003C!-- 父组件：动态组件用法不变 -->\n",[215,11162,11163],{"class":217,"line":236},[215,11164,721],{"emptyLinePlaceholder":108},[215,11166,11167,11169,11171,11173,11175,11177,11179,11181,11183],{"class":217,"line":469},[215,11168,1425],{"class":599},[215,11170,10384],{"class":771},[215,11172,2739],{"class":674},[215,11174,606],{"class":599},[215,11176,648],{"class":599},[215,11178,10393],{"class":651},[215,11180,648],{"class":599},[215,11182,986],{"class":599},[215,11184,4385],{"class":596},[215,11186,11187],{"class":217,"line":724},[215,11188,721],{"emptyLinePlaceholder":108},[215,11190,11191],{"class":217,"line":730},[215,11192,10607],{"class":596},[215,11194,11195],{"class":217,"line":764},[215,11196,721],{"emptyLinePlaceholder":108},[215,11198,11199,11201,11203],{"class":217,"line":801},[215,11200,3521],{"class":599},[215,11202,10384],{"class":771},[215,11204,3505],{"class":599},[215,11206,11207],{"class":217,"line":832},[215,11208,721],{"emptyLinePlaceholder":108},[215,11210,11211],{"class":217,"line":861},[215,11212,11213],{"class":590},"\u003C!-- 所有候选组件需修复为单根节点，例如 About.vue（✅ 正确示例） -->\n",[215,11215,11216],{"class":217,"line":966},[215,11217,721],{"emptyLinePlaceholder":108},[215,11219,11220,11222,11224],{"class":217,"line":1000},[215,11221,1425],{"class":599},[215,11223,3489],{"class":771},[215,11225,3505],{"class":599},[215,11227,11228],{"class":217,"line":1005},[215,11229,721],{"emptyLinePlaceholder":108},[215,11231,11232,11234,11236,11238,11240,11242,11245,11247],{"class":217,"line":1022},[215,11233,8676],{"class":599},[215,11235,3502],{"class":771},[215,11237,4341],{"class":674},[215,11239,606],{"class":599},[215,11241,648],{"class":599},[215,11243,11244],{"class":651},"about-container",[215,11246,648],{"class":599},[215,11248,3505],{"class":599},[215,11250,11251],{"class":217,"line":1045},[215,11252,721],{"emptyLinePlaceholder":108},[215,11254,11255,11257,11259,11261,11263,11265,11267],{"class":217,"line":1050},[215,11256,10691],{"class":599},[215,11258,145],{"class":771},[215,11260,986],{"class":599},[215,11262,10664],{"class":596},[215,11264,3521],{"class":599},[215,11266,145],{"class":771},[215,11268,3505],{"class":599},[215,11270,11271],{"class":217,"line":1055},[215,11272,721],{"emptyLinePlaceholder":108},[215,11274,11275,11277,11279],{"class":217,"line":1062},[215,11276,10691],{"class":599},[215,11278,505],{"class":771},[215,11280,3505],{"class":599},[215,11282,11283],{"class":217,"line":1077},[215,11284,721],{"emptyLinePlaceholder":108},[215,11286,11287,11290,11292,11294,11297,11299,11301],{"class":217,"line":1086},[215,11288,11289],{"class":599},"     \u003C",[215,11291,305],{"class":771},[215,11293,986],{"class":599},[215,11295,11296],{"class":596},"公司简介",[215,11298,3521],{"class":599},[215,11300,305],{"class":771},[215,11302,3505],{"class":599},[215,11304,11305],{"class":217,"line":1099},[215,11306,721],{"emptyLinePlaceholder":108},[215,11308,11309,11311,11313,11315,11318,11320,11322],{"class":217,"line":1127},[215,11310,11289],{"class":599},[215,11312,305],{"class":771},[215,11314,986],{"class":599},[215,11316,11317],{"class":596},"联系我们",[215,11319,3521],{"class":599},[215,11321,305],{"class":771},[215,11323,3505],{"class":599},[215,11325,11326],{"class":217,"line":1132},[215,11327,721],{"emptyLinePlaceholder":108},[215,11329,11330,11333,11335],{"class":217,"line":1139},[215,11331,11332],{"class":599},"   \u003C/",[215,11334,505],{"class":771},[215,11336,3505],{"class":599},[215,11338,11339],{"class":217,"line":1144},[215,11340,721],{"emptyLinePlaceholder":108},[215,11342,11343,11345,11347],{"class":217,"line":3788},[215,11344,10734],{"class":599},[215,11346,3502],{"class":771},[215,11348,3505],{"class":599},[215,11350,11351],{"class":217,"line":3794},[215,11352,721],{"emptyLinePlaceholder":108},[215,11354,11355,11357,11359],{"class":217,"line":3811},[215,11356,3521],{"class":599},[215,11358,3489],{"class":771},[215,11360,3505],{"class":599},[195,11362,11364],{"id":11363},"方案-4异步组件-函数式组件处理","方案 4：异步组件 / 函数式组件处理",[149,11366,11367,11368,11371],{},"即使是通过 ",[153,11369,11370],{},"defineAsyncComponent"," 加载的异步组件，或函数式组件，也需遵循同样规则：",[206,11373,11375],{"className":3478,"code":11374,"language":3480,"meta":211,"style":211},"\u003C!-- 异步组件示例（✅ 正确） -->\n\u003Cscript setup lang=\"ts\">\nimport { defineAsyncComponent } from 'vue';\n\nconst AsyncComponent = defineAsyncComponent(() =>\n\n import('./AsyncComponent.vue')\n\n);\n\u003C/script>\n\n\n\u003Ctemplate>\n  // AsyncComponent.vue 必须有单一根 DOM 元素\n \u003Cdiv class=\"async-container\">\n\n   这是一个异步组件，有单一根元素\n\n \u003C/div>\n\n\u003C/template>\n\n",[153,11376,11377,11382,11402,11423,11427,11445,11449,11465,11469,11475,11483,11487,11491,11499,11504,11523,11527,11532,11536,11544,11548],{"__ignoreMap":211},[215,11378,11379],{"class":217,"line":218},[215,11380,11381],{"class":590},"\u003C!-- 异步组件示例（✅ 正确） -->\n",[215,11383,11384,11386,11388,11390,11392,11394,11396,11398,11400],{"class":217,"line":236},[215,11385,1425],{"class":599},[215,11387,3615],{"class":771},[215,11389,3618],{"class":674},[215,11391,3621],{"class":674},[215,11393,606],{"class":599},[215,11395,648],{"class":599},[215,11397,583],{"class":651},[215,11399,648],{"class":599},[215,11401,3505],{"class":599},[215,11403,11404,11406,11408,11411,11413,11415,11417,11419,11421],{"class":217,"line":469},[215,11405,2140],{"class":767},[215,11407,2184],{"class":599},[215,11409,11410],{"class":596}," defineAsyncComponent",[215,11412,2190],{"class":599},[215,11414,2193],{"class":767},[215,11416,1755],{"class":599},[215,11418,3480],{"class":651},[215,11420,1761],{"class":599},[215,11422,612],{"class":599},[215,11424,11425],{"class":217,"line":724},[215,11426,721],{"emptyLinePlaceholder":108},[215,11428,11429,11431,11434,11436,11438,11440,11442],{"class":217,"line":730},[215,11430,675],{"class":674},[215,11432,11433],{"class":596}," AsyncComponent ",[215,11435,606],{"class":599},[215,11437,11410],{"class":683},[215,11439,687],{"class":596},[215,11441,690],{"class":599},[215,11443,11444],{"class":674}," =>\n",[215,11446,11447],{"class":217,"line":764},[215,11448,721],{"emptyLinePlaceholder":108},[215,11450,11451,11454,11456,11458,11461,11463],{"class":217,"line":801},[215,11452,11453],{"class":599}," import",[215,11455,687],{"class":596},[215,11457,1761],{"class":599},[215,11459,11460],{"class":651},"./AsyncComponent.vue",[215,11462,1761],{"class":599},[215,11464,1764],{"class":596},[215,11466,11467],{"class":217,"line":832},[215,11468,721],{"emptyLinePlaceholder":108},[215,11470,11471,11473],{"class":217,"line":861},[215,11472,827],{"class":596},[215,11474,612],{"class":599},[215,11476,11477,11479,11481],{"class":217,"line":966},[215,11478,3521],{"class":599},[215,11480,3615],{"class":771},[215,11482,3505],{"class":599},[215,11484,11485],{"class":217,"line":1000},[215,11486,721],{"emptyLinePlaceholder":108},[215,11488,11489],{"class":217,"line":1005},[215,11490,721],{"emptyLinePlaceholder":108},[215,11492,11493,11495,11497],{"class":217,"line":1022},[215,11494,1425],{"class":599},[215,11496,3489],{"class":771},[215,11498,3505],{"class":599},[215,11500,11501],{"class":217,"line":1045},[215,11502,11503],{"class":596},"  // AsyncComponent.vue 必须有单一根 DOM 元素\n",[215,11505,11506,11508,11510,11512,11514,11516,11519,11521],{"class":217,"line":1050},[215,11507,8676],{"class":599},[215,11509,3502],{"class":771},[215,11511,4341],{"class":674},[215,11513,606],{"class":599},[215,11515,648],{"class":599},[215,11517,11518],{"class":651},"async-container",[215,11520,648],{"class":599},[215,11522,3505],{"class":599},[215,11524,11525],{"class":217,"line":1055},[215,11526,721],{"emptyLinePlaceholder":108},[215,11528,11529],{"class":217,"line":1062},[215,11530,11531],{"class":596},"   这是一个异步组件，有单一根元素\n",[215,11533,11534],{"class":217,"line":1077},[215,11535,721],{"emptyLinePlaceholder":108},[215,11537,11538,11540,11542],{"class":217,"line":1086},[215,11539,10734],{"class":599},[215,11541,3502],{"class":771},[215,11543,3505],{"class":599},[215,11545,11546],{"class":217,"line":1099},[215,11547,721],{"emptyLinePlaceholder":108},[215,11549,11550,11552,11554],{"class":217,"line":1127},[215,11551,3521],{"class":599},[215,11553,3489],{"class":771},[215,11555,3505],{"class":599},[145,11557,11559],{"id":11558},"四为什么-vue-要做这样的限制","四、为什么 Vue 要做这样的限制？",[149,11561,11562,11564,11565,11568],{},[153,11563,10254],{}," 组件的核心原理是 ",[163,11566,11567],{},"通过操作 DOM 元素的 CSS 类名和监听过渡事件实现动画","，具体依赖：",[302,11570,11571,11584],{},[305,11572,11573,11574,10282,11577,10282,11580,11583],{},"向根 DOM 元素添加 / 移除过渡类名（如 ",[153,11575,11576],{},"v-enter-from",[153,11578,11579],{},"v-enter-active",[153,11581,11582],{},"v-leave-to"," 等）；",[305,11585,11586,11587,2126,11590,11593],{},"监听根 DOM 元素的 ",[153,11588,11589],{},"transitionend",[153,11591,11592],{},"animationend"," 事件，判断动画是否完成。",[149,11595,11596],{},"如果根节点不是真实 DOM 元素（如纯文本、Fragment），Vue 无法挂载这些类名，也无法监听过渡事件，最终导致动画失效，因此必须强制要求 “单一根 DOM 元素”。",[145,11598,11600],{"id":11599},"五总结问题与解决方案对照表","五、总结：问题与解决方案对照表",[345,11602,11603,11611],{},[348,11604,11605],{},[351,11606,11607,11609],{},[354,11608,1396],{},[354,11610,1648],{},[362,11612,11613,11625,11635,11643],{},[351,11614,11615,11618],{},[367,11616,11617],{},"组件模板只有纯文本",[367,11619,10768,11620,126,11622,11624],{},[153,11621,10285],{},[153,11623,10281],{}," 包裹文本",[351,11626,11627,11630],{},[367,11628,11629],{},"组件存在多个根节点",[367,11631,10768,11632,11634],{},[153,11633,10281],{},"/ 语义化标签包裹所有节点",[351,11636,11637,11640],{},[367,11638,11639],{},"动态组件切换时报错",[367,11641,11642],{},"确保所有候选组件均为单一根 DOM 元素",[351,11644,11645,11648],{},[367,11646,11647],{},"异步 / 函数式组件报错",[367,11649,11650],{},"组件内部添加单一外层 DOM 包裹",[149,11652,11653,11654,11656,11659],{},"只要记住核心原则：",[153,11655,10254],{},[163,11657,11658],{},"内部的直接子组件，必须有且仅有一个真实的 DOM 根元素","，就能彻底消除警告，让过渡动画正常工作。",[145,11661,11662],{"id":11662},"延伸阅读",[505,11664,11665],{},[305,11666,11667],{},[1247,11668,11671],{"href":11669,"rel":11670},"https://cn.vuejs.org/guide/built-ins/transition.html",[1251],"Vue 3 官方文档 - Transition 组件",[158,11673,11674],{},[149,11675,1585],{},[460,11677,11678],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":211,"searchDepth":236,"depth":236,"links":11680},[11681,11682,11687,11693,11694,11695],{"id":10262,"depth":236,"text":10263},{"id":10313,"depth":236,"text":10314,"children":11683},[11684,11685,11686],{"id":10317,"depth":469,"text":10318},{"id":10421,"depth":469,"text":10422},{"id":10559,"depth":469,"text":10560},{"id":10753,"depth":236,"text":10754,"children":11688},[11689,11690,11691,11692],{"id":10764,"depth":469,"text":10765},{"id":10908,"depth":469,"text":10909},{"id":11142,"depth":469,"text":11143},{"id":11363,"depth":469,"text":11364},{"id":11558,"depth":236,"text":11559},{"id":11599,"depth":236,"text":11600},{"id":11662,"depth":236,"text":11662},"2025-11-10T00:00:00.000Z","[Vue warn]: Component inside \u003CTransition> renders non-element root node that cannot be  （导致页面切换后无法渲染）",{"src":11699},"https://picsum.photos/id/199/640/360",{},{"title":60,"description":11697},"3WN8owhzdWo4pPZO0F9ZpVHM_kOheYWf4fBqWtD6g5I",1774239526791]