add some animation

This commit is contained in:
锦恢 2025-06-05 04:19:07 +08:00
parent 48b60b059d
commit 644d537ec3
4 changed files with 544 additions and 260 deletions

View File

@ -13,239 +13,239 @@ import { customIcons } from './theme/hook/icons';
export const baseUrl = '/openmcp'; export const baseUrl = '/openmcp';
export default withMermaid({ export default withMermaid({
title: "OpenMCP", title: "OpenMCP",
description: "为开发者和科研人员准备的MCP开发环境和SDK", description: "为开发者和科研人员准备的MCP开发环境和SDK",
base: baseUrl, base: baseUrl,
ignoreDeadLinks: true, ignoreDeadLinks: true,
sitemap: { sitemap: {
hostname: 'https://kirigaya.cn/' + baseUrl hostname: 'https://kirigaya.cn/' + baseUrl
}, },
vite: { vite: {
plugins: [ plugins: [
GitChangelog({ GitChangelog({
// 填写在此处填写您的仓库链接 // 填写在此处填写您的仓库链接
repoURL: () => 'https://gitea.3geeks.top/kirigaya/openmcp-document', repoURL: () => 'https://gitea.3geeks.top/kirigaya/openmcp-document',
mapAuthors: contributors mapAuthors: contributors
}), }),
GitChangelogMarkdownSection({ GitChangelogMarkdownSection({
excludes: ['preview/contributors.md', 'index.md'] excludes: ['preview/contributors.md', 'index.md']
}), }),
ThumbnailHashImages(), ThumbnailHashImages(),
], ],
optimizeDeps: { optimizeDeps: {
include: [ include: [
'mermaid' 'mermaid'
], ],
exclude: [ exclude: [
'@nolebase/vitepress-plugin-inline-link-preview/client', '@nolebase/vitepress-plugin-inline-link-preview/client',
], ],
}, },
ssr: { ssr: {
noExternal: [ noExternal: [
// 如果还有别的解析失败的依赖需要添加的话,并排填写和配置到这里即可 // // 如果还有别的解析失败的依赖需要添加的话,并排填写和配置到这里即可 //
'@nolebase/vitepress-plugin-inline-link-preview', '@nolebase/vitepress-plugin-inline-link-preview',
'@unlazy/vue' '@unlazy/vue'
], ],
}, },
}, },
markdown: { markdown: {
config: (md) => { config: (md) => {
md.use(lightbox); md.use(lightbox);
md.use(InlineLinkPreviewElementTransform); md.use(InlineLinkPreviewElementTransform);
md.use(BiDirectionalLinks()); md.use(BiDirectionalLinks());
md.use(UnlazyImages(), { md.use(UnlazyImages(), {
imgElementTag: 'NolebaseUnlazyImg', imgElementTag: 'NolebaseUnlazyImg',
}); });
} }
}, },
head: [ head: [
['link', { rel: 'icon', href: baseUrl + '/images/favicon.png' }] ['link', { rel: 'icon', href: baseUrl + '/images/favicon.png' }]
], ],
themeConfig: { themeConfig: {
// https://vitepress.dev/reference/default-theme-config // https://vitepress.dev/reference/default-theme-config
nav: [ nav: [
{ text: '首页', link: '/' }, { text: '首页', link: '/' },
{ {
text: '教程', text: '教程',
items: [ items: [
{ {
component: 'KNavItem', component: 'KNavItem',
props: { props: {
title: '简介', title: '简介',
description: '关于 mcp 和 openmcp阁下需要知道的 ...', description: '关于 mcp 和 openmcp阁下需要知道的 ...',
icon: 'openmcp', icon: 'openmcp',
link: '/plugin-tutorial/' link: '/plugin-tutorial/'
} }
}, },
{ {
component: 'KNavItem', component: 'KNavItem',
props: { props: {
title: '快速开始', title: '快速开始',
description: '通过一个例子快速了解 OpenMCP 的基本概念', description: '通过一个例子快速了解 OpenMCP 的基本概念',
icon: 'quick-fill', icon: 'quick-fill',
link: '/plugin-tutorial/quick-start/' link: '/plugin-tutorial/quick-start/'
} }
}, },
{ {
component: 'KNavItem', component: 'KNavItem',
props: { props: {
title: 'OpenMCP 使用手册', title: 'OpenMCP 使用手册',
description: 'OpenMCP Client 的基本使用', description: 'OpenMCP Client 的基本使用',
icon: 'shiyongshouce', icon: 'shiyongshouce',
link: '/plugin-tutorial/usage/connect-mcp' link: '/plugin-tutorial/usage/connect-mcp'
} }
}, },
{ {
component: 'KNavItem', component: 'KNavItem',
props: { props: {
title: 'MCP 服务器开发案例', title: 'MCP 服务器开发案例',
description: '使用不同语言开发的不同模式的 MCP 服务器', description: '使用不同语言开发的不同模式的 MCP 服务器',
icon: 'yibangonggongyusuan', icon: 'yibangonggongyusuan',
link: '/plugin-tutorial/examples/mcp-examples' link: '/plugin-tutorial/examples/mcp-examples'
} }
}, },
{ {
component: 'KNavItem', component: 'KNavItem',
props: { props: {
title: 'FAQ', title: 'FAQ',
description: '为您答疑解惑,排忧解难', description: '为您答疑解惑,排忧解难',
icon: 'yijianchuli', icon: 'yijianchuli',
link: '/plugin-tutorial/faq/help' link: '/plugin-tutorial/faq/help'
} }
}, },
] ]
}, },
{ text: 'SDK', link: '/sdk-tutorial' }, { text: 'SDK', link: '/sdk-tutorial' },
{ {
text: '更多', text: '更多',
items: [ items: [
{ {
component: 'KNavItem', component: 'KNavItem',
props: { props: {
title: '更新日志', title: '更新日志',
description: '查看项目的更新历史记录', description: '查看项目的更新历史记录',
icon: 'a-yusuan2', icon: 'a-yusuan2',
link: '/preview/changelog' link: '/preview/changelog'
} }
}, },
{ {
component: 'KNavItem', component: 'KNavItem',
props: { props: {
title: '参与 OpenMCP', title: '参与 OpenMCP',
description: '了解如何参与 OpenMCP 项目的开发和维护', description: '了解如何参与 OpenMCP 项目的开发和维护',
icon: 'shujuzhongxin', icon: 'shujuzhongxin',
link: '/preview/join' link: '/preview/join'
} }
}, },
{ {
component: 'KNavItem', component: 'KNavItem',
props: { props: {
title: 'OpenMCP 贡献者列表', title: 'OpenMCP 贡献者列表',
description: '关于参与 OpenMCP 的贡献者们', description: '关于参与 OpenMCP 的贡献者们',
icon: 'heike', icon: 'heike',
link: '/preview/contributors' link: '/preview/contributors'
} }
}, },
{ {
component: 'KNavItem', component: 'KNavItem',
props: { props: {
title: '资源频道', title: '资源频道',
description: '获取项目相关的资源和信息', description: '获取项目相关的资源和信息',
icon: 'xinxiang', icon: 'xinxiang',
link: '/preview/channel' link: '/preview/channel'
} }
} }
] ]
}, },
], ],
sidebar: { sidebar: {
'/plugin-tutorial/': [ '/plugin-tutorial/': [
{ {
text: '简介', text: '简介',
items: [ items: [
{ text: 'OpenMCP 概述', link: '/plugin-tutorial/index' }, { text: 'OpenMCP 概述', link: '/plugin-tutorial/index' },
{ text: '什么是 MCP', link: '/plugin-tutorial/what-is-mcp' }, { text: '什么是 MCP', link: '/plugin-tutorial/what-is-mcp' },
{ text: 'MCP 基础概念', link: '/plugin-tutorial/concept' } { text: 'MCP 基础概念', link: '/plugin-tutorial/concept' }
] ]
}, },
{ {
text: '快速开始', text: '快速开始',
items: [ items: [
{ text: '快速开始', link: '/plugin-tutorial/quick-start' }, { text: '快速开始', link: '/plugin-tutorial/quick-start' },
{ text: '安装 OpenMCP', link: '/plugin-tutorial/quick-start/acquire-openmcp' }, { text: '安装 OpenMCP', link: '/plugin-tutorial/quick-start/acquire-openmcp' },
{ text: '你的第一个 MCP', link: '/plugin-tutorial/quick-start/first-mcp' }, { text: '你的第一个 MCP', link: '/plugin-tutorial/quick-start/first-mcp' },
{ text: '快速调试 MCP', link: '/plugin-tutorial/quick-start/quick-debug' }, { text: '快速调试 MCP', link: '/plugin-tutorial/quick-start/quick-debug' },
{ text: '扔进大模型里面测测好坏!', link: '/plugin-tutorial/quick-start/put-into-llm' }, { text: '扔进大模型里面测测好坏!', link: '/plugin-tutorial/quick-start/put-into-llm' },
] ]
}, },
{ {
text: "OpenMCP 使用手册", text: "OpenMCP 使用手册",
items: [ items: [
{ text: 'UI 配色', link: '/plugin-tutorial/usage/ui-color' }, { text: 'UI 配色', link: '/plugin-tutorial/usage/ui-color' },
{ text: '连接 mcp 服务器', link: '/plugin-tutorial/usage/connect-mcp' }, { text: '连接 mcp 服务器', link: '/plugin-tutorial/usage/connect-mcp' },
{ text: '调试 tools, resources 和 prompts', link: '/plugin-tutorial/usage/debug' }, { text: '调试 tools, resources 和 prompts', link: '/plugin-tutorial/usage/debug' },
{ text: '连接大模型', link: '/plugin-tutorial/usage/connect-llm' }, { text: '连接大模型', link: '/plugin-tutorial/usage/connect-llm' },
{ text: '用大模型测试您的 mcp', link: '/plugin-tutorial/usage/test-with-llm' }, { text: '用大模型测试您的 mcp', link: '/plugin-tutorial/usage/test-with-llm' },
{ text: '连接多个 MCP 服务器', link: '/plugin-tutorial/usage/multi-server' }, { text: '连接多个 MCP 服务器', link: '/plugin-tutorial/usage/multi-server' },
{ text: '分发您的实验结果', link: '/plugin-tutorial/usage/distribute-result' }, { text: '分发您的实验结果', link: '/plugin-tutorial/usage/distribute-result' },
{ text: 'SSE 在线部署的鉴权器实现', link: '/plugin-tutorial/usage/sse-oauth2' }, { text: 'SSE 在线部署的鉴权器实现', link: '/plugin-tutorial/usage/sse-oauth2' },
] ]
}, },
{ {
text: "MCP 服务器开发案例", text: "MCP 服务器开发案例",
items: [ items: [
{ text: 'MCP 服务器开发案例', link: '/plugin-tutorial/examples/mcp-examples' }, { text: 'MCP 服务器开发案例', link: '/plugin-tutorial/examples/mcp-examples' },
{ text: '例子 1. python 实现天气信息 mcp 服务器 (STDIO)', link: '/plugin-tutorial/examples/python-simple-stdio' }, { text: '例子 1. python 实现天气信息 mcp 服务器 (STDIO)', link: '/plugin-tutorial/examples/python-simple-stdio' },
{ text: '例子 2. go 实现 neo4j 的只读 mcp 服务器 (SSE)', link: '/plugin-tutorial/examples/go-neo4j-sse' }, { text: '例子 2. go 实现 neo4j 的只读 mcp 服务器 (SSE)', link: '/plugin-tutorial/examples/go-neo4j-sse' },
{ text: '例子 3. java 实现文档数据库的只读 mcp (HTTP)', link: '/plugin-tutorial/examples/java-es-http' }, { text: '例子 3. java 实现文档数据库的只读 mcp (HTTP)', link: '/plugin-tutorial/examples/java-es-http' },
{ text: '例子 4. typescript 实现基于 crawl4ai 的超级网页爬虫 mcp (STDIO)', link: '/plugin-tutorial/examples/typescript-crawl4ai-stdio' }, { text: '例子 4. typescript 实现基于 crawl4ai 的超级网页爬虫 mcp (STDIO)', link: '/plugin-tutorial/examples/typescript-crawl4ai-stdio' },
{ text: '例子 5. python 实现进行通用表单填充 的 mcp (STDIO)', link: '/plugin-tutorial/examples/python-form-stdio' }, { text: '例子 5. python 实现进行通用表单填充 的 mcp (STDIO)', link: '/plugin-tutorial/examples/python-form-stdio' },
{ text: '例子 6. python 实现基于 blender 的 mcp (STDIO)', link: '/plugin-tutorial/examples/python-blender-stdio' }, { text: '例子 6. python 实现基于 blender 的 mcp (STDIO)', link: '/plugin-tutorial/examples/python-blender-stdio' },
{ text: '例子 7. python 实现 cadence EDA 的 mcp (STDIO)', link: '/plugin-tutorial/examples/python-cadence-stdio' }, { text: '例子 7. python 实现 cadence EDA 的 mcp (STDIO)', link: '/plugin-tutorial/examples/python-cadence-stdio' },
] ]
}, },
{ {
text: 'FAQ', text: 'FAQ',
items: [ items: [
{ text: '帮助', link: '/plugin-tutorial/faq/help' }, { text: '帮助', link: '/plugin-tutorial/faq/help' },
] ]
} }
], ],
'/sdk-tutorial/': [ '/sdk-tutorial/': [
{ {
text: '简介', text: '简介',
items: [ items: [
{ text: 'openmcp-sdk.js', link: '/sdk-tutorial/' }, { text: 'openmcp-sdk.js', link: '/sdk-tutorial/' },
] ]
}, },
{ {
text: '基本使用', text: '基本使用',
items: [ items: [
{ text: '最简单的对话', link: '/sdk-tutorial/usage/greet' }, { text: '最简单的对话', link: '/sdk-tutorial/usage/greet' },
{ text: '任务循环', link: '/sdk-tutorial/usage/task-loop' }, { text: '任务循环', link: '/sdk-tutorial/usage/task-loop' },
{ text: '多服务器连接', link: '/sdk-tutorial/usage/multi-server' }, { text: '多服务器连接', link: '/sdk-tutorial/usage/multi-server' },
] ]
} }
] ]
}, },
socialLinks: [ socialLinks: [
{ icon: 'github', link: 'https://github.com/LSTM-Kirigaya/openmcp-client' }, { icon: 'github', link: 'https://github.com/LSTM-Kirigaya/openmcp-client' },
{ icon: customIcons.share, link: 'https://kirigaya.cn/home' }, { icon: customIcons.share, link: 'https://kirigaya.cn/home' },
], ],
footer: { footer: {
message: '缩短LLM到Agent的最后一公里', message: '缩短LLM到Agent的最后一公里',
copyright: 'OpenMCP All rights reserved' copyright: 'OpenMCP All rights reserved'
}, },
// 左上角的 logo // 左上角的 logo
logo: '/images/openmcp.png', logo: '/images/openmcp.png',
} }
}) })

File diff suppressed because one or more lines are too long

View File

@ -1,23 +1,21 @@
<template> <template>
<DefaultTheme.Layout id="k-layout"> <DefaultTheme.Layout id="k-layout">
</DefaultTheme.Layout> </DefaultTheme.Layout>
<ScrollBar /> <ClientOnly>
<ScrollBar v-if="mounted" />
</ClientOnly>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useData, useRouter } from 'vitepress'; import { useData, useRouter } from 'vitepress';
import DefaultTheme from 'vitepress/theme'; import DefaultTheme from 'vitepress/theme';
import { nextTick, onMounted, provide } from 'vue'; import { nextTick, onMounted, provide, ref } from 'vue';
import mediumZoom from "medium-zoom"; import mediumZoom from "medium-zoom";
import { animateIn, animateOut } from './hook/animate'; import { animateIn, animateOut } from './hook/animate';
import ScrollBar from './components/scrollbar/index.vue'; import ScrollBar from './components/scrollbar/index.vue';
import { gsap } from "gsap"; import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
//
gsap.registerPlugin(ScrollTrigger);
const data = useData() const data = useData()
const router = useRouter() const router = useRouter()
@ -26,7 +24,7 @@ const enableTransitions = () =>
window.matchMedia('(prefers-reduced-motion: no-preference)').matches; window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
const isDark = data.isDark; const isDark = data.isDark;
const mounted = ref(false);
const setupMediumZoom = () => { const setupMediumZoom = () => {
mediumZoom("[data-zoomable]", { mediumZoom("[data-zoomable]", {
@ -141,8 +139,9 @@ function makeHomeAnimation() {
} }
onMounted(() => { onMounted(() => {
mounted.value = true;
setupMediumZoom(); setupMediumZoom();
gsap.registerPlugin(ScrollTrigger);
makeHomeAnimation(); makeHomeAnimation();
}); });
</script> </script>

View File

@ -1,25 +1,25 @@
{ {
"scripts": { "scripts": {
"dev": "vitepress dev", "dev": "vitepress dev",
"build": "vitepress build", "build": "vitepress build",
"postbuild": "node scripts/move-image.js", "postbuild": "node scripts/move-image.js",
"preview": "vitepress preview" "preview": "vitepress preview"
}, },
"dependencies": { "dependencies": {
"element-plus": "^2.9.11", "element-plus": "^2.9.11",
"gsap": "^3.13.0", "gsap": "^3.13.0",
"vitepress": "^1.6.3" "vitepress": "^1.6.3"
}, },
"devDependencies": { "devDependencies": {
"@nolebase/markdown-it-bi-directional-links": "^2.17.1", "@nolebase/markdown-it-bi-directional-links": "^2.17.1",
"@nolebase/markdown-it-unlazy-img": "^2.17.1", "@nolebase/markdown-it-unlazy-img": "^2.17.1",
"@nolebase/vitepress-plugin-enhanced-mark": "^2.17.1", "@nolebase/vitepress-plugin-enhanced-mark": "^2.17.1",
"@nolebase/vitepress-plugin-git-changelog": "^2.17.1", "@nolebase/vitepress-plugin-git-changelog": "^2.17.1",
"@nolebase/vitepress-plugin-inline-link-preview": "^2.17.1", "@nolebase/vitepress-plugin-inline-link-preview": "^2.17.1",
"@nolebase/vitepress-plugin-page-properties": "^2.17.1", "@nolebase/vitepress-plugin-page-properties": "^2.17.1",
"@nolebase/vitepress-plugin-thumbnail-hash": "^2.17.1", "@nolebase/vitepress-plugin-thumbnail-hash": "^2.17.1",
"mermaid": "^11.6.0", "mermaid": "^11.6.0",
"vitepress-plugin-lightbox": "^1.0.2", "vitepress-plugin-lightbox": "^1.0.2",
"vitepress-plugin-mermaid": "^2.0.17" "vitepress-plugin-mermaid": "^2.0.17"
} }
} }