update

.vitepress/config.mts

@@ -3,6 +3,9 @@ import { defineConfig } from 'vitepress'
 export default defineConfig({
 	title: "OpenMCP",
 	description: "为开发者和科研人员准备的MCP开发环境和SDK",
+	head: [
+		['link', { rel: 'icon', href: '/images/favicon.png' }]
+	],
 	themeConfig: {
 		// https://vitepress.dev/reference/default-theme-config
 		nav: [
@@ -24,10 +27,11 @@ export default defineConfig({
 			{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
 		],
 		footer: {
-      message: '缩短LLM到Agent的最后一公里'
+			message: '缩短LLM到Agent的最后一公里',
+			copyright: 'OpenMCP All rights reserved'
 		},
 
 		// 添加右侧图片配置
-    logo: '/openmcp.png',  // 确保图片放在public目录下
+		logo: '/images/openmcp.png',  // 确保图片放在public目录下
 	}
 })

.vitepress/theme/components/home/HeroImage.vue

@@ -1,5 +1,7 @@
 <template>
-	<img class="VPImage image-src" src="/openmcp.png" alt="">
+	<div style="height: 420px;">
+		<img class="VPImage image-src" src="/images/openmcp.png" alt="">
+	</div>
 </template>
 
 <style scoped>
@@ -27,10 +29,9 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    max-width: 352px;
+    max-width: 500px;
-    max-height: 352px;
+    max-height: 500px;
-    width: 100%;
+	height: 99%;
-    height: 100%;
     object-fit: contain;
     transform: translate(-50%, -50%);
 }

.vitepress/theme/components/home/TwoSideLayout.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="two-side-layout">
+        <div :class="['content-container', { 'reverse': imagePlacement === 'left' }]">
+            <div class="text-content">
+                <div v-for="(item, index) in texts" :key="index" class="text-item">
+                    <span class="prefix">{{ index + 1 }}.</span> {{ item }}
+                </div>
+            </div>
+            <div class="image-container">
+                <img :src="image" alt="双栏布局图片" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    imagePlacement: {
+        type: String,
+        default: 'left',
+        validator: (value) => ['left', 'right'].includes(value)
+    },
+    texts: {
+        type: Array,
+        required: true
+    },
+    image: {
+        type: String,
+        required: true
+    }
+});
+</script>
+
+<style>
+.two-side-layout {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.content-container {
+    display: flex;
+    gap: 2rem;
+    max-width: 1200px;
+    width: 100%;
+}
+
+.content-container.reverse {
+    flex-direction: row-reverse;
+}
+
+.text-content {
+    flex: 1;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.text-item {
+    width: 100%;
+    border-bottom: 1px solid var(--vp-c-default-3);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.prefix {
+    color: var(--vp-c-brand-1);
+    margin-right: 0.5rem;
+}
+
+.image-container {
+    flex: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.image-container img {
+    max-width: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+    .content-container {
+        flex-direction: column;
+    }
+
+    .content-container.reverse {
+        flex-direction: column-reverse;
+    }
+}
+</style>

.vitepress/theme/index.mts

@@ -2,7 +2,8 @@
 import { h } from 'vue';
 import type { Theme } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
-import HeroImage from './openmcp-hero-image.vue';
+import HeroImage from './components/home/HeroImage.vue';
+import TwoSideLayout from './components/home/TwoSideLayout.vue';
 
 import './style.css';
 
@@ -14,6 +15,6 @@ export default {
 		})
 	},
 	enhanceApp({ app, router, siteData }) {
-		// ...
+		app.component('TwoSideLayout', TwoSideLayout);
 	}
 } satisfies Theme

.vitepress/theme/style.css

@@ -137,3 +137,6 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
+.two-side-layout .image-container {
+  display: unset !important;
+}

.vscode/vue.code-snippets

@@ -0,0 +1,20 @@
+{
+	"Vue 3 TypeScript Component": {
+		"prefix": "vue3ts",
+		"body": [
+			"<template>",
+			"\t$1",
+			"</template>",
+			"",
+			"<script setup lang=\"ts\">",
+			"import { defineComponent } from 'vue';",
+			"",
+			"defineComponent({ name: '$TEMPLATE_NAME' });",
+			"</script>",
+			"",
+			"<style>",
+			"</style>"
+		],
+		"description": "Vue 3 TypeScript component template"
+	}
+}

index.md

@@ -4,26 +4,45 @@ layout: home
 
 hero:
   name: "OpenMCP"
-  text: "elegant mcp debuggers and sdk for developers"
+  text: "面向开发者的优雅 MCP 调试器和 SDK"
-  tagline: Shortening the last mile from LLM to Agent
+  tagline: 缩短从大语言模型到智能体的最后一公里
 
   actions:
     - theme: brand
-      text: OpenMCP Client
+      text: OpenMCP 客户端
       link: /markdown-examples
     - theme: alt
       text: openmcp-sdk
       link: /api-examples
     - theme: alt
-      text: Github
+      text: GitHub
-      link: /api-examples
+      link: https://github.com/LSTM-Kirigaya/openmcp-client
 
 features:
-  - title: Integrated Debugging Environment
+  - title: 集成调试环境
-    details: Combines Inspector with MCP client functions for seamless development and testing
+    details: 将检查器与 MCP 客户端功能相结合，实现无缝开发和测试
-  - title: Comprehensive Project Management
+  - title: 全面的项目管理
-    details: Offers complete project-level control panels for efficient MCP project oversight
+    details: 提供完整的项目级控制面板，实现高效的 MCP 项目监督
-  - title: Multi-Model Support
+  - title: 多模型支持
-    details: Supports various large language models with flexible integration capabilities
+    details: 支持多种大语言模型，具备灵活的集成能力
 ---
 
+<br>
+<br>
+<br>
+
+# OpenMCP 为谁准备？
+
+<a href="https://qm.qq.com/cgi-bin/qm/qr?k=C6ZUTZvfqWoI12lWe7L93cWa1hUsuVT0&jump_from=webapi&authKey=McW6B1ogTPjPDrCyGttS890tMZGQ1KB3QLuG4aqVNRaYp4vlTSgf2c6dMcNjMuBD" target="_blank" style="display: inline-block; padding: 2px 8px; font-size: 0.8rem; background-color: var(--vp-c-brand-3); color: white; border-radius: .5em; text-decoration: none; margin-right: 10px;">开源社区爱好者</a><a href="https://qm.qq.com/cgi-bin/qm/qr?k=C6ZUTZvfqWoI12lWe7L93cWa1hUsuVT0&jump_from=webapi&authKey=McW6B1ogTPjPDrCyGttS890tMZGQ1KB3QLuG4aqVNRaYp4vlTSgf2c6dMcNjMuBD" target="_blank" style="display: inline-block; padding: 2px 8px; font-size: 0.8rem; background-color: var(--vp-button-alt-bg); color: white; border-radius: .5em; text-decoration: none; margin-right: 10px;">专业软件工程师</a><a href="https://qm.qq.com/cgi-bin/qm/qr?k=C6ZUTZvfqWoI12lWe7L93cWa1hUsuVT0&jump_from=webapi&authKey=McW6B1ogTPjPDrCyGttS890tMZGQ1KB3QLuG4aqVNRaYp4vlTSgf2c6dMcNjMuBD" target="_blank" style="display: inline-block; padding: 2px 8px; font-size: 0.8rem; background-color: var(--vp-button-alt-bg); color: white; border-radius: .5em; text-decoration: none; margin-right: 10px;">AI研发科学家</a>
+
+<TwoSideLayout
+  :texts="[
+    '在编辑器中写完代码直接测试，无需打开第三方软件。提供极其丰富的功能和特性。',
+    '在左侧面板自由而优雅地管理、调试和测试你的智能体。',
+    '大模型调用工具的每一个细节一览无余，不满意的调用结果直接一键复现。',
+    '每一次对话都会显示各项性能指标，方便进行成本管理。',
+    '系统提示词管理面板，让您轻松用 mcp 服务器和系统提示词构建您的智能体应用。',
+    '每一次测试的细节都会 100% 跟随 git 进行版本控制，方便你分享你的每一次试验结果，也方便你零成本复现别人的 mcp 项目。'
+  ]"
+  image="/images/openmcp.chatbot.png"
+/>