[{"data":1,"prerenderedAt":537},["ShallowReactive",2],{"/blog/2":3,"surround-/blog/2":531},{"id":4,"title":5,"body":6,"category":516,"date":517,"description":518,"extension":519,"image":520,"meta":521,"navigation":522,"path":523,"seo":524,"stem":525,"tags":526,"__hash__":530},"blog/blog/2.md","前端项目总体概览",{"type":7,"value":8,"toc":512},"minimark",[9,16,50,55,88,93,146,151,203,208,241,246,280,285,304,309,361,366,398,403,436,441,488,491,505],[10,11,12],"p",{},[13,14,15],"strong",{},"总体概览",[17,18,19,23,26,29,32,35,38,41,44,47],"ul",{},[20,21,22],"li",{},"前端框架：Nuxt 4 + Vue 3 Composition API + TypeScript",[20,24,25],{},"构建与运行：Nitro static/SSG，Vite（含 Tailwind v4 的 vite 插件）",[20,27,28],{},"样式与组件：Tailwind CSS v4、@nuxt/ui 组件库、PostCSS",[20,30,31],{},"内容系统：@nuxt/content v3（Alpha），SQLite 内容数据库",[20,33,34],{},"SEO/站点：useSeoMeta、@nuxtjs/sitemap、全局 app.head",[20,36,37],{},"主题与模式：@nuxtjs/color-mode（classSuffix=''，使用 dark 类）",[20,39,40],{},"图标体系：Heroicons、Lucide、Iconify（Phosphor 别名）",[20,42,43],{},"动效库：AOS（页面中以 data-aos 属性使用）",[20,45,46],{},"开发工具：Vitest、@nuxt/test-utils、vue-tsc、Nuxt DevTools",[20,48,49],{},"其他依赖：@nuxt/fonts（禁用 Google providers），sass（暂未使用 .scss）",[10,51,52],{},[13,53,54],{},"核心框架",[17,56,57,71],{},[20,58,59,60,65,66,70],{},"Nuxt 4 与 SSG：脚本与配置表明采用静态预渲染与 generate 构建。参考 ",[61,62,64],"a",{"href":63},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/package.json#L7-L10","package.json"," 与 ",[61,67,69],{"href":68},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/nuxt.config.ts#L95-L106","nuxt.config.ts","。",[20,72,73,74,78,79,83,84,70],{},"Vue 3 + TS：全项目页面与组件采用 ",[75,76,77],"code",{},"\u003Cscript setup lang=\"ts\">","，如 ",[61,80,82],{"href":81},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/app.vue#L9-L18","app.vue","、",[61,85,87],{"href":86},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/agent.vue#L265-L273","agent.vue",[10,89,90],{},[13,91,92],{},"样式与 UI",[17,94,95,112,131],{},[20,96,97,98,101,102,106,107,111],{},"Tailwind v4：通过新式 ",[75,99,100],{},"@import \"tailwindcss\""," 引入，见 ",[61,103,105],{"href":104},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/assets/css/main.css#L1-L3","main.css","。配置在 ",[61,108,110],{"href":109},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/tailwind.config.js","tailwind.config.js","（含 colors/animation/keyframes）。",[20,113,114,115,118,119,123,124,83,127,70],{},"Nuxt UI：在 ",[61,116,69],{"href":117},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/nuxt.config.ts#L19-L23"," 启用；全局主题色在 ",[61,120,122],{"href":121},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/app.config.ts#L18-L21","app.config.ts"," 设为 violet；页面广泛使用 UButton/UPageCard 等，如 ",[61,125,87],{"href":126},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/agent.vue#L243-L257",[61,128,130],{"href":129},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.vue#L194-L210","智言万象.vue",[20,132,133,134,137,138,141,142,145],{},"自定义主题变量：在 ",[61,135,105],{"href":136},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/assets/css/main.css#L8-L19"," 覆盖 ",[75,139,140],{},"--ui-primary"," 与圆角；封装了 ",[75,143,144],{},".text-ui-primary"," 等桥接类，便于统一品牌色使用（符合项目规则的主色桥接做法）。",[10,147,148],{},[13,149,150],{},"内容与数据",[17,152,153,163,183,193],{},[20,154,155,156,159,160,70],{},"内容模块：@nuxt/content v3 Alpha，数据库选型为 SQLite，见 ",[61,157,69],{"href":158},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/nuxt.config.ts#L34-L40","。SQLite 文件位于 ",[75,161,162],{},".data/content/contents.sqlite",[20,164,165,166,169,170,83,179,70],{},"查询 API：文档与博客通过 ",[75,167,168],{},"queryCollection"," 系列 API 获取，示例 ",[61,171,173,174,178],{"href":172},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/docs/%5B...slug%5D.vue#L179-L214","docs/",[175,176,177],"span",{},"...slug",".vue",[61,180,182],{"href":181},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/blog/index.vue#L121-L123","blog/index.vue",[20,184,185,186,65,190,70],{},"路由预渲染：自研遍历工具生成 docs 路由并注入 prerender，见 ",[61,187,189],{"href":188},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/utils/getDocsRoutes.ts","getDocsRoutes.ts",[61,191,69],{"href":192},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/nuxt.config.ts#L101-L106",[20,194,195,196,65,200,70],{},"Sitemap：静态路由 + 文档动态路由合并，见 ",[61,197,199],{"href":198},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/utils/getSitemapRoutes.ts","getSitemapRoutes.ts",[61,201,69],{"href":202},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/nuxt.config.ts#L47-L93",[10,204,205],{},[13,206,207],{},"SEO 与站点配置",[17,209,210,228,235],{},[20,211,212,213,216,217,83,220,83,223,70],{},"页面级 SEO：广泛使用 ",[75,214,215],{},"useSeoMeta","，例如 ",[61,218,87],{"href":219},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/agent.vue#L315-L323",[61,221,182],{"href":222},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/blog/index.vue#L110-L114",[61,224,173,226,178],{"href":225},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/docs/%5B...slug%5D.vue#L273-L276",[175,227,177],{},[20,229,230,231,234],{},"全局 head：标题、meta、icon 与 Google Fonts 预连接在 ",[61,232,69],{"href":233},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/nuxt.config.ts#L115-L139","。注意：同时禁用了 @nuxt/fonts 的 Google providers（手动引入字体），设计上更可控。",[20,236,237,238,70],{},"站点 URL：Sitemap 中的基础 URL 见 ",[61,239,69],{"href":240},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/nuxt.config.ts#L43-L45",[10,242,243],{},[13,244,245],{},"图标体系",[17,247,248,263,270],{},[20,249,250,251,254,255,83,258,70],{},"Heroicons：页面中通过 ",[75,252,253],{},"@heroicons/vue/24/outline"," 组件导入使用，如 ",[61,256,87],{"href":257},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/agent.vue#L267-L283",[61,259,173,261,178],{"href":260},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/docs/%5B...slug%5D.vue#L160-L162",[175,262,177],{},[20,264,265,266,70],{},"Lucide：悬浮按钮等场景使用 lucide-vue-next，如 ",[61,267,269],{"href":268},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/components/BackToTop.vue#L211-L217","BackToTop.vue",[20,271,272,273,276,277,70],{},"Iconify + Ph 别名：Nuxt UI 内部图标映射到 ",[75,274,275],{},"i-ph-*","，见 ",[61,278,122],{"href":279},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/app.config.ts#L30-L80",[10,281,282],{},[13,283,284],{},"动效与交互",[17,286,287,298],{},[20,288,289,290,293,294,297],{},"AOS：页面通过 ",[75,291,292],{},"data-aos"," 属性使用滚动动画，如 ",[61,295,130],{"href":296},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.vue#L88-L93"," 与场景卡片区域；依赖已安装但尚未看到全局初始化插件文件，建议后续补充 Nuxt 插件初始化以启用动画。",[20,299,300,301,70],{},"交互细节：大量过渡/动画类基于 Tailwind + CSS keyframes（tailwind.config 中定义）与自定义 utility 类，如 ",[61,302,105],{"href":303},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/assets/css/main.css#L121-L134",[10,305,306],{},[13,307,308],{},"构建与开发工具",[17,310,311,333,346],{},[20,312,313,314,317,318,321,322,325,326,329,330,70],{},"构建脚本：",[75,315,316],{},"nuxt generate","（SSG），",[75,319,320],{},"nuxt preview","（本地预览），",[75,323,324],{},"nuxt dev","（开发），",[75,327,328],{},"nuxt typecheck","（类型检查）。参考 ",[61,331,64],{"href":332},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/package.json#L6-L11",[20,334,335,336,339,340,70],{},"类型检查：建议按项目规则执行 ",[75,337,338],{},"npm run typecheck","（已在规则中明确）。参考 ",[61,341,345],{"href":342,"rel":343},"////.com//.trae/rules/project_rules",[344],"nofollow","project_rules.md",[20,347,348,349,352,353,356,357,360],{},"测试：Vitest、@nuxt/test-utils、happy-dom/jsdom 已配置为依赖，但仓库尚未看到本地 ",[75,350,351],{},"tests/"," 用例与 ",[75,354,355],{},"scripts/test-sitemap.mjs"," 脚本文件（",[61,358,64],{"href":359},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/package.json#L11"," 中存在命令）。后续如需启用测试，建议补充相应目录与脚本。",[10,362,363],{},[13,364,365],{},"文件与资源组织",[17,367,368,376,383,391],{},[20,369,370,371,375],{},"路由页面：见 ",[61,372,374],{"href":373},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/pages","pages"," 目录（首页、Agent、解决方案、插件、博客、文档等）。",[20,377,378,379,70],{},"组件：通用与落地页组件拆分，见 ",[61,380,382],{"href":381},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/components","components",[20,384,385,386,390],{},"静态资源：集中在 ",[61,387,389],{"href":388},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/public","public","（图片、icon、robots.txt 等）。",[20,392,393,394,70],{},"全局样式：在 ",[61,395,397],{"href":396},"file:///e:/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1.com/%E6%99%BA%E8%A8%80%E4%B8%87%E8%B1%A1/assets/css/main.css","assets/css/main.css",[10,399,400],{},[13,401,402],{},"设计思路与技术考量",[17,404,405,412,418,424,427,433],{},[20,406,407,408,411],{},"选择 Nuxt 4 + SSG：静态化输出降低运维复杂度，利于 CDN 部署与性能优化；Nitro preset=static 明确禁用平台特定自动检测，输出统一到 ",[75,409,410],{},"dist","，部署一致性更好。",[20,413,414,415,417],{},"内容以 @nuxt/content v3 α + SQLite：无需后端 API 即可进行内容查询与路由生成；通过 ",[61,416,189],{"href":188}," 保证预渲染路由完整性，避免文档页遗漏。",[20,419,420,421,423],{},"UI 采用 @nuxt/ui + Tailwind v4：减少自研组件成本，保持一致的设计系统；在 ",[61,422,105],{"href":396}," 封装品牌色桥接类，符合项目规则对主色来源和中性色的约束（避免直接使用非规范灰度色系）。",[20,425,426],{},"图标混合方案：Heroicons 用于业务页面一致性，Lucide 用于特定互动组件，Iconify 的 Ph 别名满足 Nuxt UI 内部；三者配合灵活覆盖不同场景。",[20,428,429,430,432],{},"SEO 与可访问性：使用 ",[75,431,215],{}," 保证类型安全与清晰结构；页面交互元素均有可见焦点与足够对比度；图片懒加载与 alt 文本在业务页有体现。",[20,434,435],{},"动效 AOS 与自有动画：AOS 适合滚动触发类效果；Tailwind + keyframes 适合定制、轻量动画；二者组合覆盖动效需求但需注意初始化与性能（建议在大段列表中做节流或观察器控制）。",[10,437,438],{},[13,439,440],{},"潜在影响与后续建议",[17,442,443,449,459,472,485],{},[20,444,445,446,448],{},"AOS 初始化：当前页面使用了 ",[75,447,292],{},"，建议增加 Nuxt 插件对 AOS init，避免属性不生效。",[20,450,451,452,454,455,458],{},"测试与脚本：",[75,453,355],{}," 缺失，若保留命令应补齐脚本；建议新建 ",[75,456,457],{},"tests"," 目录并添加基础用例（路由生成、内容查询）。",[20,460,461,462,83,465,83,468,471],{},"依赖清理：",[75,463,464],{},"vue-router",[75,466,467],{},"@headlessui/vue",[75,469,470],{},"@storybook/vue3"," 等目前未在代码中使用，后续可以按需移除或补齐使用场景，避免体积与维护成本。",[20,473,474,475,477,478,481,482,484],{},"主题一致性：全局 ",[75,476,122],{}," 使用 ",[75,479,480],{},"primary: 'violet'","，而 ",[75,483,105],{}," 用 OkLCH 主色且项目规则要求统一主色来源；建议统一来源并通过封装类使用，减少视觉偏差。",[20,486,487],{},"字体策略：已禁用 @nuxt/fonts 的 Google provider，但仍通过 head 链接加载 Google Fonts；长远看可迁移到本地字体以提升隐私与加载稳定性。",[10,489,490],{},"如果你希望，我可以继续补充：",[17,492,493,496,502],{},[20,494,495],{},"初始化 AOS 插件并在开发预览中验证动效",[20,497,498,499,501],{},"补齐 ",[75,500,355],{}," 与基础 Vitest 用例，确保路由/内容的稳定性",[20,503,504],{},"清理未使用依赖或添加其使用示例，以保持技术栈精简一致",[10,506,507,508],{},"你好！",[509,510],"mccoremem",{"id":511},"01KDSQNW83P0S7B4K820BP9SNN",{"title":513,"searchDepth":514,"depth":514,"links":515},"",2,[],"前端","2025-12-31T00:00:00.000Z","项目总体概览","md","/blog/blog-1.webp",{},true,"/blog/2",{"title":5,"description":518},"blog/2",[527,528,529],"CSS","Tailwind","Design","tDgFpxgWyLoq4Iqj2GGDitGD4Cf5RC8mntSkR9DDYHs",{"newer":532,"older":533},null,{"title":534,"path":535,"date":536},"大字报·Pro - Cover Generator","/blog/4","2025-12-18T00:00:00.000Z",1775201095226]