@movk/nuxt-docs 1.5.1 → 1.6.0

package/README.md

@@ -1,13 +1,16 @@
-[![Movk Nuxt Docs](https://docs.mhaibaraai.cn/__og-image__/static/og.png)](https://docs.mhaibaraai.cn/)
+[![Movk Nuxt Docs](https://docs.mhaibaraai.cn/og-image.png)](https://docs.mhaibaraai.cn/)
 
-> 一款由 Nuxt UI 和 Nuxt Content 强力驱动的优雅文档主题
+> 基于 Nuxt 4 的现代文档主题，集成组件自动化文档、AI 聊天助手、MCP Server 和完整的开发者体验优化
+
+[![Install MCP in Cursor](https://docs.mhaibaraai.cn/mcp/badge.svg)](https://docs.mhaibaraai.cn/mcp/deeplink)
+[![Install MCP in VS Code](https://docs.mhaibaraai.cn/mcp/badge.svg?ide=vscode)](https://docs.mhaibaraai.cn/mcp/deeplink?ide=vscode)
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-使用此主题可以快速构建美观、专业的文档网站，内置内容管理、SEO、暗黑模式、全文搜索等功能。
+使用此主题可以快速构建美观、专业、智能的文档网站，内置组件文档自动生成、AI 聊天助手、MCP Server 支持、SEO 优化、暗黑模式、全文搜索等功能。
 
 - 📖 [在线文档](https://docs.mhaibaraai.cn/)
 
@@ -15,18 +18,30 @@
 
 此主题集成了一系列旨在优化文档管理体验的强大功能：
 
+### 🤖 AI 增强体验
+
+- **AI 聊天助手** - 内置智能文档助手，基于 Vercel AI SDK 支持多种 LLM 模型（Mistral、Qwen、OpenRouter）
+- **MCP Server 支持** - 集成 Model Context Protocol 服务器，为 AI 助手提供结构化的文档访问能力
+- **LLM 优化** - 通过 `nuxt-llms` 模块自动生成 `llms.txt` 和 `llms-full.txt`，为 AI 工具提供优化的文档索引
+- **流式响应** - 支持 AI 响应流式输出和代码高亮，配合 `shiki-stream` 实现实时语法高亮渲染
+
+### 🧩 自动化文档生成
+
+- **组件元数据自动提取** - 基于 `nuxt-component-meta` 自动提取 Vue 组件的 Props、Slots、Emits 定义
+- **交互式示例展示** - 通过 `ComponentExample` 组件自动加载和渲染组件示例，支持代码高亮和实时预览
+- **Git 提交历史集成** - 使用 `CommitChangelog` 和 `PageLastCommit` 组件自动展示文件的提交历史记录
+- **类型定义高亮** - 智能解析 TypeScript 类型定义，支持内联类型高亮和类型导航
+
+### 🎨 开发者体验
+
 - ⚡ **基于 Nuxt 4** - 充分利用最新的 Nuxt 框架，实现卓越性能
 - 🎨 **采用 Nuxt UI** - 集成全面的 UI 组件库，开箱即用
-- 📝 **MDC 语法增强** - 支持 Markdown 与 Vue 组件的无缝集成，实现动态内容
-- 🧩 **组件文档自动生成** - 自动生成 Props、Slots、Emits 文档及交互式示例
-- 📦 **Git 提交历史集成** - 通过 CommitChangelog 组件自动展示文件的提交历史记录
-- 📚 **智能侧边栏导航** - 根据内容结构自动生成导航
-- 🔍 **全文搜索** - 内置强大的全文搜索功能
+- 📝 **MDC 语法增强** - 支持 Markdown 与 Vue 组件的无缝集成
+- 🔍 **全文搜索** - 基于 Nuxt Content 的 `ContentSearch` 组件，支持键盘快捷键（⌘K）
 - 🌙 **暗黑模式** - 支持亮色/暗色主题切换
 - 📱 **响应式设计** - 移动优先的响应式布局
 - 🚀 **SEO 优化** - 内置 SEO 优化功能
 - 🎯 **TypeScript 支持** - 完整的 TypeScript 类型支持
-- 🤖 **AI 助手优化** - 为 LLM 优化，提供更好的 AI 辅助文档体验
 
 ## 🚀 快速开始
 
@@ -80,10 +95,19 @@ pnpm add @movk/nuxt-docs better-sqlite3
 export default defineNuxtConfig({
   extends: ['@movk/nuxt-docs'],
   css: ['~/assets/css/main.css'],
+  aiChat: {
+    model: 'mistral/devstral-2',
+    models: ['mistral/devstral-2', 'openrouter/qwen/qwen3-4b:free']
+  },
+  mcp: {
+    name: 'My Docs',
+    browserRedirect: '/docs'
+  },
   llms: {
-    domain: 'https://docs.mhaibaraai.cn',
-    title: 'Movk Nuxt Docs',
-    description: '一款优雅的 Nuxt 文档主题'
+    domain: 'https://your-domain.com',
+    title: 'My Docs',
+    description: '基于 Movk Nuxt Docs 构建的智能文档站点',
+    notes: ['Nuxt 4', '文档主题', 'TypeScript']
   }
 })
 ```
@@ -129,7 +153,7 @@ movk-nuxt-docs/
 
 ### 基础 Markdown
 
-```md
+```md [md]
 ---
 title: 页面标题
 description: 页面描述
@@ -147,7 +171,7 @@ description: 页面描述
 
 ### MDC 语法
 
-```md
+```md [md]
 ::card
 ---
 title: 卡片标题
@@ -159,14 +183,6 @@ icon: i-lucide-rocket
 
 了解更多关于 MDC 语法，请查看 [Nuxt Content 文档](https://content.nuxt.com/docs/files/markdown#mdc-syntax)。
 
-### 其他工具
-
-- **Google Analytics** - [@nuxtjs/google-analytics](https://google-analytics.nuxtjs.org/)
-- **Plausible** - [vue-plausible](https://github.com/moritzsternemann/vue-plausible)
-- **Umami** - [nuxt-umami](https://github.com/ijkml/nuxt-umami)
-
-按照各工具的 Nuxt 集成文档在 `plugins` 目录中创建插件即可。
-
 ## 🛠️ 开发
 
 ### 本地开发
@@ -206,13 +222,27 @@ pnpm release
 
 本项目基于以下优秀的开源项目构建：
 
+### 核心框架
+
 - [Nuxt 4](https://nuxt.com/) - Web 框架
 - [Nuxt Content](https://content.nuxt.com/) - 基于文件的 CMS
 - [Nuxt UI](https://ui.nuxt.com/) - UI 组件库
-- [Nuxt Image](https://image.nuxt.com/) - 图片优化
 - [Tailwind CSS 4](https://tailwindcss.com/) - CSS 框架
+
+### AI 集成
+
+- [Vercel AI SDK](https://sdk.vercel.ai/) - AI 集成框架
+- [Nuxt LLMs](https://github.com/nuxt-content/nuxt-llms) - LLM 优化
+- [@nuxtjs/mcp-toolkit](https://github.com/nuxt-modules/mcp-toolkit) - MCP Server 支持
+- [Shiki](https://shiki.style/) - 代码语法高亮
+- [Shiki Stream](https://github.com/antfu/shiki-stream) - 流式代码高亮
+
+### 功能增强
+
+- [Nuxt Component Meta](https://github.com/nuxt-content/nuxt-component-meta) - 组件元数据提取
+- [Nuxt Image](https://image.nuxt.com/) - 图片优化
 - [Nuxt SEO](https://nuxtseo.com/) - SEO 优化
-- [Nuxt LLMs](https://github.com/nuxt/llms) - AI 助手优化
+- [Octokit](https://github.com/octokit/rest.js) - GitHub API 集成
 
 ## 📖 文档
 

package/app/components/DocsAsideLeftBody.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const route = useRoute()
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const { navigationByCategory } = useNavigation(navigation!)
+</script>
+
+<template>
+  <UContentNavigation :key="route.path" :navigation="navigationByCategory" highlight />
+</template>

package/app/components/DocsAsideLeftTop.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div />
+</template>

package/app/components/DocsAsideRightBottom.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { aiChat } = useRuntimeConfig().public
+const route = useRoute()
+
+const pageUrl = route.path
+const { open } = useAIChat()
+const { faqQuestions } = useFaq()
+</script>
+
+<template>
+  <div v-if="aiChat.enable">
+    <UButton
+      icon="i-lucide-brain"
+      target="_blank"
+      label="用 AI 解释此页面"
+      size="sm"
+      variant="ghost"
+      color="neutral"
+      @click="open(`解释此页面 ${pageUrl}`, true)"
+    />
+    <AiChatSlideover :faq-questions="faqQuestions" />
+
+    <Teleport to="body">
+      <ClientOnly>
+        <LazyAiChatFloatingInput />
+      </ClientOnly>
+    </Teleport>
+  </div>
+</template>

package/app/components/OgImage/Nuxt.vue

@@ -5,14 +5,14 @@
  */
 import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
-  title: 'title',
-  description: 'description',
-  headline: 'headline'
-})
+const {
+  title = 'title',
+  description = 'description',
+  headline = 'headline'
+} = defineProps<{ title?: string, description?: string, headline?: string }>()
 
-const title = computed(() => (props.title || '').slice(0, 60))
-const description = computed(() => (props.description || '').slice(0, 200))
+const computedTitle = computed(() => (title || '').slice(0, 60))
+const computedDescription = computed(() => (description || '').slice(0, 200))
 </script>
 
 <template>
@@ -26,7 +26,10 @@ const description = computed(() => (props.description || '').slice(0, 200))
       xmlns="http://www.w3.org/2000/svg"
     >
       <g filter="url(#filter0_f_199_94966)">
-        <path d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z" fill="#00DC82" />
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#00DC82"
+        />
       </g>
       <defs>
         <filter
@@ -54,11 +57,19 @@ const description = computed(() => (props.description || '').slice(0, 200))
       <p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 v-if="title" class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
-        {{ title }}
+      <h1
+        v-if="title"
+        class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white"
+        style="display: block; line-clamp: 2; text-overflow: ellipsis;"
+      >
+        {{ computedTitle }}
       </h1>
-      <p v-if="description" class="text-[32px] text-[#E4E4E7] leading-tight" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
-        {{ description }}
+      <p
+        v-if="description"
+        class="text-[32px] text-[#E4E4E7] leading-tight"
+        style="display: block; line-clamp: 3; text-overflow: ellipsis;"
+      >
+        {{ computedDescription }}
       </p>
     </div>
     <svg
@@ -69,8 +80,15 @@ const description = computed(() => (props.description || '').slice(0, 200))
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M86.6286 103.106C88.2099 94.7477 94.7477 88.2099 103.106 86.6286L104.427 86.3788C146.343 78.4485 189.386 78.5576 231.262 86.7002L232.272 86.8967C239.615 88.3244 245.4 93.99 246.981 101.301L247.277 102.671C256.565 145.63 256.438 190.092 246.903 232.997C245.361 239.939 239.939 245.361 232.997 246.903C190.092 256.438 145.63 256.565 102.671 247.277L101.301 246.981C93.99 245.4 88.3244 239.615 86.8967 232.272L86.7002 231.262C78.5576 189.386 78.4485 146.343 86.3788 104.426L86.6286 103.106Z" fill="url(#paint0_linear_199_94959)" />
-      <path d="M86.6286 103.106C88.2099 94.7477 94.7477 88.2099 103.106 86.6286L104.427 86.3788C146.343 78.4485 189.386 78.5576 231.262 86.7002L232.272 86.8967C239.615 88.3244 245.4 93.99 246.981 101.301L247.277 102.671C256.565 145.63 256.438 190.092 246.903 232.997C245.361 239.939 239.939 245.361 232.997 246.903C190.092 256.438 145.63 256.565 102.671 247.277L101.301 246.981C93.99 245.4 88.3244 239.615 86.8967 232.272L86.7002 231.262C78.5576 189.386 78.4485 146.343 86.3788 104.426L86.6286 103.106Z" fill="url(#paint1_radial_199_94959)" fill-opacity="0.06" />
+      <path
+        d="M86.6286 103.106C88.2099 94.7477 94.7477 88.2099 103.106 86.6286L104.427 86.3788C146.343 78.4485 189.386 78.5576 231.262 86.7002L232.272 86.8967C239.615 88.3244 245.4 93.99 246.981 101.301L247.277 102.671C256.565 145.63 256.438 190.092 246.903 232.997C245.361 239.939 239.939 245.361 232.997 246.903C190.092 256.438 145.63 256.565 102.671 247.277L101.301 246.981C93.99 245.4 88.3244 239.615 86.8967 232.272L86.7002 231.262C78.5576 189.386 78.4485 146.343 86.3788 104.426L86.6286 103.106Z"
+        fill="url(#paint0_linear_199_94959)"
+      />
+      <path
+        d="M86.6286 103.106C88.2099 94.7477 94.7477 88.2099 103.106 86.6286L104.427 86.3788C146.343 78.4485 189.386 78.5576 231.262 86.7002L232.272 86.8967C239.615 88.3244 245.4 93.99 246.981 101.301L247.277 102.671C256.565 145.63 256.438 190.092 246.903 232.997C245.361 239.939 239.939 245.361 232.997 246.903C190.092 256.438 145.63 256.565 102.671 247.277L101.301 246.981C93.99 245.4 88.3244 239.615 86.8967 232.272L86.7002 231.262C78.5576 189.386 78.4485 146.343 86.3788 104.426L86.6286 103.106Z"
+        fill="url(#paint1_radial_199_94959)"
+        fill-opacity="0.06"
+      />
       <path
         d="M103.028 86.2151C94.4994 87.8286 87.8286 94.4994 86.2151 103.028L85.9653 104.348C78.0252 146.318 78.1344 189.414 86.2872 231.342L86.4836 232.353C87.9434 239.86 93.7366 245.776 101.212 247.392L102.582 247.688C145.601 256.989 190.124 256.862 233.089 247.314C240.19 245.736 245.736 240.19 247.314 233.089C256.862 190.124 256.989 145.601 247.688 102.582L247.392 101.212C245.776 93.7366 239.86 87.9434 232.353 86.4836L231.342 86.2872C189.414 78.1344 146.318 78.0252 104.348 85.9653L103.028 86.2151Z"
         stroke="url(#paint2_linear_199_94959)"
@@ -95,7 +113,10 @@ const description = computed(() => (props.description || '').slice(0, 200))
         stroke-opacity="0.2"
         stroke-width="2.125"
       />
-      <path d="M174.667 190.325H203.105C204.009 190.325 204.896 190.084 205.678 189.626C206.461 189.168 207.11 188.509 207.561 187.715C208.013 186.921 208.25 186.021 208.25 185.105C208.25 184.188 208.011 183.288 207.559 182.495L188.461 148.938C188.009 148.145 187.36 147.486 186.578 147.028C185.796 146.57 184.909 146.328 184.006 146.328C183.103 146.328 182.215 146.57 181.433 147.028C180.651 147.486 180.002 148.145 179.551 148.938L174.667 157.524L165.119 140.734C164.668 139.941 164.018 139.282 163.236 138.824C162.453 138.366 161.566 138.125 160.663 138.125C159.76 138.125 158.872 138.366 158.09 138.824C157.308 139.282 156.658 139.941 156.206 140.734L132.441 182.495C131.989 183.288 131.75 184.188 131.75 185.105C131.75 186.021 131.987 186.921 132.439 187.715C132.89 188.509 133.539 189.168 134.322 189.626C135.104 190.084 135.991 190.325 136.895 190.325H154.746C161.819 190.325 167.035 187.173 170.624 181.025L179.337 165.717L184.004 157.524L198.011 182.133H179.337L174.667 190.325ZM154.455 182.124L141.997 182.121L160.671 149.312L169.989 165.717L163.75 176.681C161.367 180.671 158.659 182.124 154.455 182.124Z" fill="#00DC82" />
+      <path
+        d="M174.667 190.325H203.105C204.009 190.325 204.896 190.084 205.678 189.626C206.461 189.168 207.11 188.509 207.561 187.715C208.013 186.921 208.25 186.021 208.25 185.105C208.25 184.188 208.011 183.288 207.559 182.495L188.461 148.938C188.009 148.145 187.36 147.486 186.578 147.028C185.796 146.57 184.909 146.328 184.006 146.328C183.103 146.328 182.215 146.57 181.433 147.028C180.651 147.486 180.002 148.145 179.551 148.938L174.667 157.524L165.119 140.734C164.668 139.941 164.018 139.282 163.236 138.824C162.453 138.366 161.566 138.125 160.663 138.125C159.76 138.125 158.872 138.366 158.09 138.824C157.308 139.282 156.658 139.941 156.206 140.734L132.441 182.495C131.989 183.288 131.75 184.188 131.75 185.105C131.75 186.021 131.987 186.921 132.439 187.715C132.89 188.509 133.539 189.168 134.322 189.626C135.104 190.084 135.991 190.325 136.895 190.325H154.746C161.819 190.325 167.035 187.173 170.624 181.025L179.337 165.717L184.004 157.524L198.011 182.133H179.337L174.667 190.325ZM154.455 182.124L141.997 182.121L160.671 149.312L169.989 165.717L163.75 176.681C161.367 180.671 158.659 182.124 154.455 182.124Z"
+        fill="#00DC82"
+      />
       <path
         d="M176.761 189.109H203.105H203.106C203.792 189.109 204.467 188.926 205.064 188.576C205.66 188.227 206.158 187.723 206.504 187.113L207.561 187.715L206.504 187.113C206.851 186.504 207.034 185.811 207.034 185.105C207.033 184.399 206.85 183.707 206.502 183.098L206.502 183.097L187.404 149.54L187.404 149.54C187.057 148.93 186.56 148.427 185.963 148.077C185.367 147.728 184.692 147.545 184.006 147.545C183.32 147.545 182.645 147.728 182.048 148.077C181.452 148.427 180.954 148.93 180.608 149.539C180.608 149.539 180.608 149.54 180.608 149.54L175.725 158.126L174.667 159.985L173.61 158.125L164.062 141.336L176.761 189.109ZM176.761 189.109L180.044 183.349H198.011H200.103L199.069 181.531L185.061 156.922L184.005 155.066L182.947 156.922L178.28 165.115L178.28 165.115L169.57 180.417C166.187 186.208 161.362 189.109 154.746 189.109H136.895H136.894C136.208 189.109 135.533 188.926 134.936 188.576C134.34 188.227 133.842 187.723 133.496 187.113L132.44 187.714L133.496 187.113C133.149 186.504 132.966 185.811 132.966 185.105C132.967 184.399 133.15 183.707 133.498 183.098L133.498 183.097L157.263 141.336C157.263 141.336 157.263 141.336 157.263 141.336C157.61 140.727 158.108 140.223 158.705 139.874C159.301 139.525 159.976 139.341 160.663 139.341C161.349 139.341 162.025 139.525 162.621 139.874L163.236 138.824L162.621 139.874C163.218 140.223 163.715 140.727 164.062 141.336L176.761 189.109ZM154.454 183.34H154.455C156.699 183.34 158.653 182.952 160.391 181.953C162.126 180.957 163.533 179.417 164.794 177.305L164.801 177.294L164.807 177.283L171.046 166.318L171.388 165.717L171.047 165.116L161.729 148.711L160.672 146.851L159.614 148.71L140.94 181.52L139.905 183.337L141.997 183.338L154.454 183.34Z"
         stroke="url(#paint6_linear_199_94959)"
@@ -103,7 +124,10 @@ const description = computed(() => (props.description || '').slice(0, 200))
         stroke-width="2.43271"
       />
       <g filter="url(#filter0_f_199_94959)">
-        <path d="M174.667 190.325H203.105C204.009 190.325 204.896 190.084 205.678 189.626C206.461 189.168 207.11 188.509 207.561 187.715C208.013 186.921 208.25 186.021 208.25 185.105C208.25 184.188 208.011 183.288 207.559 182.495L188.461 148.938C188.009 148.145 187.36 147.486 186.578 147.028C185.796 146.57 184.909 146.328 184.006 146.328C183.103 146.328 182.215 146.57 181.433 147.028C180.651 147.486 180.002 148.145 179.551 148.938L174.667 157.524L165.119 140.734C164.668 139.941 164.018 139.282 163.236 138.824C162.453 138.366 161.566 138.125 160.663 138.125C159.76 138.125 158.872 138.366 158.09 138.824C157.308 139.282 156.658 139.941 156.206 140.734L132.441 182.495C131.989 183.288 131.75 184.188 131.75 185.105C131.75 186.021 131.987 186.921 132.439 187.715C132.89 188.509 133.539 189.168 134.322 189.626C135.104 190.084 135.991 190.325 136.895 190.325H154.746C161.819 190.325 167.035 187.173 170.624 181.025L179.337 165.717L184.004 157.524L198.011 182.133H179.337L174.667 190.325ZM154.455 182.124L141.997 182.121L160.671 149.312L169.989 165.717L163.75 176.681C161.367 180.671 158.659 182.124 154.455 182.124Z" fill="#00DC82" />
+        <path
+          d="M174.667 190.325H203.105C204.009 190.325 204.896 190.084 205.678 189.626C206.461 189.168 207.11 188.509 207.561 187.715C208.013 186.921 208.25 186.021 208.25 185.105C208.25 184.188 208.011 183.288 207.559 182.495L188.461 148.938C188.009 148.145 187.36 147.486 186.578 147.028C185.796 146.57 184.909 146.328 184.006 146.328C183.103 146.328 182.215 146.57 181.433 147.028C180.651 147.486 180.002 148.145 179.551 148.938L174.667 157.524L165.119 140.734C164.668 139.941 164.018 139.282 163.236 138.824C162.453 138.366 161.566 138.125 160.663 138.125C159.76 138.125 158.872 138.366 158.09 138.824C157.308 139.282 156.658 139.941 156.206 140.734L132.441 182.495C131.989 183.288 131.75 184.188 131.75 185.105C131.75 186.021 131.987 186.921 132.439 187.715C132.89 188.509 133.539 189.168 134.322 189.626C135.104 190.084 135.991 190.325 136.895 190.325H154.746C161.819 190.325 167.035 187.173 170.624 181.025L179.337 165.717L184.004 157.524L198.011 182.133H179.337L174.667 190.325ZM154.455 182.124L141.997 182.121L160.671 149.312L169.989 165.717L163.75 176.681C161.367 180.671 158.659 182.124 154.455 182.124Z"
+          fill="#00DC82"
+        />
         <path
           d="M176.761 189.109H203.105H203.106C203.792 189.109 204.467 188.926 205.064 188.576C205.66 188.227 206.158 187.723 206.504 187.113L207.561 187.715L206.504 187.113C206.851 186.504 207.034 185.811 207.034 185.105C207.033 184.399 206.85 183.707 206.502 183.098L206.502 183.097L187.404 149.54L187.404 149.54C187.057 148.93 186.56 148.427 185.963 148.077C185.367 147.728 184.692 147.545 184.006 147.545C183.32 147.545 182.645 147.728 182.048 148.077C181.452 148.427 180.954 148.93 180.608 149.539C180.608 149.539 180.608 149.54 180.608 149.54L175.725 158.126L174.667 159.985L173.61 158.125L164.062 141.336L176.761 189.109ZM176.761 189.109L180.044 183.349H198.011H200.103L199.069 181.531L185.061 156.922L184.005 155.066L182.947 156.922L178.28 165.115L178.28 165.115L169.57 180.417C166.187 186.208 161.362 189.109 154.746 189.109H136.895H136.894C136.208 189.109 135.533 188.926 134.936 188.576C134.34 188.227 133.842 187.723 133.496 187.113L132.44 187.714L133.496 187.113C133.149 186.504 132.966 185.811 132.966 185.105C132.967 184.399 133.15 183.707 133.498 183.098L133.498 183.097L157.263 141.336C157.263 141.336 157.263 141.336 157.263 141.336C157.61 140.727 158.108 140.223 158.705 139.874C159.301 139.525 159.976 139.341 160.663 139.341C161.349 139.341 162.025 139.525 162.621 139.874L163.236 138.824L162.621 139.874C163.218 140.223 163.715 140.727 164.062 141.336L176.761 189.109ZM154.454 183.34H154.455C156.699 183.34 158.653 182.952 160.391 181.953C162.126 180.957 163.533 179.417 164.794 177.305L164.801 177.294L164.807 177.283L171.046 166.318L171.388 165.717L171.047 165.116L161.729 148.711L160.672 146.851L159.614 148.71L140.94 181.52L139.905 183.337L141.997 183.338L154.454 183.34Z"
           stroke="url(#paint7_linear_199_94959)"

package/app/components/PageHeaderLinks.vue

@@ -3,17 +3,19 @@ const route = useRoute()
 const toast = useToast()
 const { copy, copied } = useClipboard()
 const site = useSiteConfig()
-const { vercelAnalytics } = useAppConfig()
+const { vercelAnalytics, ui } = useAppConfig()
 const { track } = useAnalytics()
 
+const appBaseURL = useRuntimeConfig().app?.baseURL || '/'
+
 const mdPath = computed(() => `${site.url}/raw${route.path}.md`)
 
-const items = [
+const items = [[
   {
     label: 'Copy Markdown link',
     icon: 'i-lucide-link',
     onSelect() {
-      if (vercelAnalytics?.debug) track ('Page Action', { action: 'Copy Markdown Link' })
+      if (vercelAnalytics?.debug) track('Page Action', { action: 'Copy Markdown Link' })
       copy(mdPath.value)
       toast.add({
         title: 'Copied to clipboard',
@@ -23,7 +25,7 @@ const items = [
   },
   {
     label: 'View as Markdown',
-    icon: 'i-simple-icons:markdown',
+    icon: 'i-simple-icons-markdown',
     target: '_blank',
     to: `/raw${route.path}.md`,
     onSelect() {
@@ -32,7 +34,7 @@ const items = [
   },
   {
     label: 'Open in ChatGPT',
-    icon: 'i-simple-icons:openai',
+    icon: 'i-simple-icons-openai',
     target: '_blank',
     to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`,
     onSelect() {
@@ -41,14 +43,38 @@ const items = [
   },
   {
     label: 'Open in Claude',
-    icon: 'i-simple-icons:anthropic',
+    icon: 'i-simple-icons-anthropic',
     target: '_blank',
     to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`,
     onSelect() {
       if (vercelAnalytics?.debug) track('Page Action', { action: 'Open in Claude' })
     }
   }
-]
+], [
+  {
+    label: 'Copy MCP Server URL',
+    icon: 'i-lucide-cpu',
+    onSelect() {
+      copy(`${window?.location?.origin}${appBaseURL}mcp`)
+      toast.add({
+        title: 'Copied to clipboard',
+        icon: 'i-lucide-circle-check'
+      })
+    }
+  },
+  {
+    label: 'Add MCP Server to VSCode',
+    icon: 'i-simple-icons-visualstudiocode',
+    target: '_blank',
+    to: `/mcp/deeplink?ide=vscode`
+  },
+  {
+    label: 'Add MCP Server to Cursor',
+    icon: 'i-simple-icons-cursor',
+    target: '_blank',
+    to: `/mcp/deeplink`
+  }
+]]
 
 async function copyPage() {
   if (vercelAnalytics?.debug) track('Page Action', { action: 'Copy Page Content' })
@@ -60,7 +86,7 @@ async function copyPage() {
   <UFieldGroup size="sm">
     <UButton
       label="Copy page"
-      :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+      :icon="copied ? ui.icons.copyCheck : ui.icons.copy"
       color="neutral"
       variant="outline"
       :ui="{
@@ -80,7 +106,7 @@ async function copyPage() {
         content: 'w-48'
       }"
     >
-      <UButton icon="i-lucide-chevron-down" color="neutral" variant="outline" />
+      <UButton :icon="ui.icons.chevronDown" color="neutral" variant="outline" />
     </UDropdownMenu>
   </UFieldGroup>
 </template>

package/app/components/content/CommitChangelog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { camelCase, upperFirst } from '@movk/core'
+import { camelCase, kebabCase, upperFirst } from '@movk/core'
 
 interface Commit {
   sha: string
@@ -8,27 +8,36 @@ interface Commit {
 
 const props = defineProps<{
   /**
-   * The path to the file in the repository.
+   * 仓库中的文件路径
    * @defaultValue 'src'
    */
   commitPath?: string
   /**
-   * The prefix for the file path.
+   * 文件路径的前缀
    */
   prefix?: string
   /**
-   * The file extension.
+   * 文件扩展名
    * @defaultValue 'vue'
    */
   suffix?: string
   /**
-   * The name of the component or file to get the changelog for.
+   * 要获取更新日志的组件或文件名
    */
   name?: string
   /**
-   * The author to filter commits by.
+   * 按作者筛选提交
    */
   author?: string
+  /**
+   * 文件名的命名格式
+   * - 'auto': Vue 文件使用 PascalCase，其他使用 camelCase（默认）
+   * - 'kebab': 保持 kebab-case（如 use-user.ts）
+   * - 'camel': 转换为 camelCase（如 useUser.ts）
+   * - 'pascal': 转换为 PascalCase（如 UseUser.ts）
+   * @defaultValue 'auto'
+   */
+  casing?: 'auto' | 'kebab' | 'camel' | 'pascal'
 }>()
 
 const SHA_SHORT_LENGTH = 5
@@ -46,11 +55,26 @@ const filePath = computed(() => {
   const fileExtension = props.suffix ?? (github && typeof github === 'object' ? github.suffix : 'vue')
   const fileName = props.name ?? routeName.value
 
-  const camelName = fileExtension === 'vue'
-    ? upperFirst(camelCase(fileName))
-    : camelCase(fileName)
+  // 根据 casing 参数转换文件名
+  const transformedName = (() => {
+    const casing = props.casing ?? (github && typeof github === 'object' ? github.casing : undefined) ?? 'auto'
+
+    switch (casing) {
+      case 'kebab':
+        return kebabCase(fileName)
+      case 'camel':
+        return camelCase(fileName)
+      case 'pascal':
+        return upperFirst(camelCase(fileName))
+      case 'auto':
+      default:
+        return fileExtension === 'vue'
+          ? upperFirst(camelCase(fileName))
+          : camelCase(fileName)
+    }
+  })()
 
-  return `${basePath}/${filePrefix}${camelName}.${fileExtension}`
+  return `${basePath}/${filePrefix}${transformedName}.${fileExtension}`
 })
 
 const { data: commits } = await useLazyFetch<Commit[]>('/api/github/commits', {

package/app/components/content/ComponentEmits.vue

@@ -3,8 +3,8 @@ import { camelCase } from 'scule'
 
 const props = defineProps<{
   /**
-   * The slug of the component to fetch emits for.
-   * @defaultValue route path's last segment
+   * 获取组件事件的 slug 标识
+   * @defaultValue 路由路径的最后一段
    */
   slug?: string
 }>()

package/app/components/content/ComponentExample.vue

@@ -9,23 +9,23 @@ const { preview = true, source = true, prettier = false, ...props } = defineProp
   name: string
   class?: any
   /**
-   * Whether to render the component in an iframe
+   * 是否在 iframe 中渲染组件
    * @defaultValue false
    */
   iframe?: boolean | { [key: string]: any }
   /**
-   * Whether to display the component in a mobile-sized iframe viewport
+   * 是否在移动端尺寸的 iframe 视口中显示组件
    * @defaultValue false
    */
   iframeMobile?: boolean
   props?: { [key: string]: any }
   /**
-   * Whether to format the code with Prettier
+   * 是否使用 Prettier 格式化代码
    * @defaultValue false
    */
   prettier?: boolean
   /**
-   * Whether to collapse the code block
+   * 是否折叠代码块
    * @defaultValue false
    */
   collapse?: boolean | {
@@ -36,18 +36,18 @@ const { preview = true, source = true, prettier = false, ...props } = defineProp
     open?: boolean
   }
   /**
-   * Whether to show the preview
-   * When `false`, the filename will be shown instead
+   * 是否显示预览
+   * 当设置为 `false` 时，将显示文件名
    * @defaultValue true
    */
   preview?: boolean
   /**
-   * Whether to show the source code
+   * 是否显示源代码
    * @defaultValue true
    */
   source?: boolean
   /**
-   * A list of variable props to link to the component.
+   * 链接到组件的可变属性列表
    */
   options?: Array<{
     alias?: string
@@ -58,11 +58,11 @@ const { preview = true, source = true, prettier = false, ...props } = defineProp
     multiple?: boolean
   }>
   /**
-   * A list of line numbers to highlight in the code block
+   * 代码块中需要高亮的行号列表
    */
   highlights?: number[]
   /**
-   * Whether to add overflow-hidden to wrapper
+   * 是否在包装器上添加 overflow-hidden
    */
   overflowHidden?: boolean
 }>()

package/app/components/content/ComponentProps.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ComponentMeta } from 'vue-component-meta'
 import { camelCase, kebabCase, upperFirst } from 'scule'
+import { decodeUnicodeEscapes } from '../../utils/unicode'
 
 const { ignore = [
   'activeClass',
@@ -30,12 +31,12 @@ const { ignore = [
   'formtarget'
 ], slug, prose } = defineProps<{
   /**
-   * The slug of the component to fetch props for.
-   * @defaultValue route path's last segment
+   * 获取组件属性的 slug 标识
+   * @defaultValue 路由路径的最后一段
    */
   slug?: string
   /**
-   * An array of prop names to ignore.
+   * 需要忽略的属性名数组
    */
   ignore?: string[]
   prose?: boolean
@@ -56,6 +57,7 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
   }).map((prop) => {
     if (prop.default) {
       prop.default = prop.default.replace(' as never', '').replace(/^"(.*)"$/, '\'$1\'')
+      prop.default = decodeUnicodeEscapes(prop.default)
     } else {
       const tag = prop.tags?.find(tag => tag.name === 'defaultValue')?.text
       if (tag) {

package/app/components/content/ComponentPropsSchema.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { kebabCase } from 'scule'
 import type { PropertyMeta } from 'vue-component-meta'
+import { decodeUnicodeEscapes } from '../../utils/unicode'
 
 const props = defineProps<{
   prop: PropertyMeta
@@ -24,7 +25,10 @@ function getSchemaProps(schema: PropertyMeta['schema']): any {
 const schemaProps = computed(() => {
   const propsObject = getSchemaProps(props.prop.schema).reduce((acc: any, prop: any) => {
     if (!acc[prop.name]) {
-      const defaultValue = prop.default ?? prop.tags?.find((tag: any) => tag.name === 'defaultValue')?.text
+      let defaultValue = prop.default ?? prop.tags?.find((tag: any) => tag.name === 'defaultValue')?.text
+      if (defaultValue && typeof defaultValue === 'string') {
+        defaultValue = decodeUnicodeEscapes(defaultValue)
+      }
       let description = prop.description
       if (defaultValue) {
         description = description ? `${description} Defaults to \`${defaultValue}\`{lang="ts-type"}.` : `Defaults to \`${defaultValue}\`{lang="ts-type"}.`

package/app/components/content/ComponentSlots.vue

@@ -3,8 +3,8 @@ import { camelCase, kebabCase } from 'scule'
 
 const props = defineProps<{
   /**
-   * The slug of the component to fetch slots for.
-   * @defaultValue route path's last segment
+   * 获取组件插槽的 slug 标识
+   * @defaultValue 路由路径的最后一段
    */
   slug?: string
 }>()

package/app/components/content/HighlightInlineType.vue

@@ -24,7 +24,7 @@ const type = computed(() => {
 const ast = ref<any>(null)
 
 onMounted(async () => {
-  ast.value = await parseMarkdown(`\`${type.value}\`{lang="ts-type"}`)
+  ast.value = await parseMarkdown(`\`\` ${type.value} \`\`{lang="ts-type"}`)
 })
 </script>