diff --git a/src/components/SearchDemo.tsx b/src/components/SearchDemo.tsx
new file mode 100644
index 0000000..9c72ef8
--- /dev/null
+++ b/src/components/SearchDemo.tsx
@@ -0,0 +1,269 @@
+import React, { useState } from 'react';
+import { Search, Bot, Lightbulb, Play, CheckCircle } from 'lucide-react';
+import { useAppStore } from '../store/useAppStore';
+
+interface SearchExample {
+ query: string;
+ type: 'realtime' | 'ai';
+ description: string;
+ expectedResults: string[];
+}
+
+const searchExamples: SearchExample[] = [
+ {
+ query: 'react',
+ type: 'realtime',
+ description: '实时搜索仓库名称',
+ expectedResults: ['匹配名称包含"react"的仓库']
+ },
+ {
+ query: 'vue',
+ type: 'realtime',
+ description: '快速匹配Vue相关仓库',
+ expectedResults: ['Vue.js相关项目']
+ },
+ {
+ query: '查找所有笔记应用',
+ type: 'ai',
+ description: 'AI语义搜索中文查询',
+ expectedResults: ['Obsidian', 'Notion', 'Logseq等笔记工具']
+ },
+ {
+ query: 'find machine learning frameworks',
+ type: 'ai',
+ description: 'AI跨语言搜索',
+ expectedResults: ['TensorFlow', 'PyTorch', 'scikit-learn等ML框架']
+ },
+ {
+ query: '代码编辑器',
+ type: 'ai',
+ description: 'AI理解中文意图',
+ expectedResults: ['VSCode', 'Vim', 'Emacs等编辑器']
+ },
+ {
+ query: 'web development tools',
+ type: 'ai',
+ description: 'AI匹配开发工具',
+ expectedResults: ['Webpack', 'Vite', 'React等前端工具']
+ }
+];
+
+export const SearchDemo: React.FC = () => {
+ const { language } = useAppStore();
+ const [selectedExample, setSelectedExample] = useState
(null);
+ const [showDemo, setShowDemo] = useState(false);
+
+ const t = (zh: string, en: string) => language === 'zh' ? zh : en;
+
+ const handleExampleClick = (example: SearchExample) => {
+ setSelectedExample(example);
+ // 这里可以触发实际的搜索演示
+ console.log(`演示搜索: ${example.query} (${example.type})`);
+ };
+
+ if (!showDemo) {
+ return (
+
+
+
+
+
+
+
+
+ {t('搜索功能升级', 'Search Feature Upgrade')}
+
+
+ {t('体验全新的实时搜索和AI语义搜索功能', 'Experience new real-time and AI semantic search features')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('搜索功能演示', 'Search Feature Demo')}
+
+
+ {t('点击下方示例体验不同的搜索模式', 'Click examples below to experience different search modes')}
+
+
+
+
+
+
+
+ {/* 实时搜索示例 */}
+
+
+
+
+ {t('实时搜索', 'Real-time Search')}
+
+
+ {searchExamples
+ .filter(example => example.type === 'realtime')
+ .map((example, index) => (
+
+ ))}
+
+
+ {/* AI搜索示例 */}
+
+
+
+
+ {t('AI语义搜索', 'AI Semantic Search')}
+
+
+ {searchExamples
+ .filter(example => example.type === 'ai')
+ .map((example, index) => (
+
+ ))}
+
+
+
+ {/* 选中示例的详细信息 */}
+ {selectedExample && (
+
+
+ {selectedExample.type === 'realtime' ? (
+
+ ) : (
+
+ )}
+
+ {selectedExample.description}
+
+
+
+
+
+ {t('预期结果:', 'Expected Results:')}
+
+
+ {selectedExample.expectedResults.map((result, index) => (
+ -
+
+ {result}
+
+ ))}
+
+
+
+
+
+ {selectedExample.type === 'realtime' ? (
+ t(
+ '💡 实时搜索会在您输入时立即显示匹配的仓库名称，响应速度极快。',
+ '💡 Real-time search instantly shows matching repository names as you type, with extremely fast response.'
+ )
+ ) : (
+ t(
+ '🤖 AI搜索使用语义理解，能够跨语言匹配并智能排序结果，适合复杂查询。',
+ '🤖 AI search uses semantic understanding, can match across languages and intelligently rank results, perfect for complex queries.'
+ )
+ )}
+
+
+
+ )}
+
+ {/* 使用提示 */}
+
+
+ {t('使用技巧', 'Usage Tips')}
+
+
+
+
+
+
+ {t('实时搜索', 'Real-time Search')}
+
+
+
+ - • {t('输入时自动触发', 'Automatically triggered while typing')}
+ - • {t('匹配仓库名称', 'Matches repository names')}
+ - • {t('支持中文输入法', 'Supports Chinese IME')}
+ - • {t('响应速度快', 'Fast response time')}
+
+
+
+
+
+
+ {t('AI语义搜索', 'AI Semantic Search')}
+
+
+
+ - • {t('点击AI搜索按钮触发', 'Click AI Search button to trigger')}
+ - • {t('支持自然语言查询', 'Supports natural language queries')}
+ - • {t('跨语言匹配', 'Cross-language matching')}
+ - • {t('智能结果排序', 'Intelligent result ranking')}
+
+
+
+
+