diff --git a/apps/desktop/src/pages/ProjectDetails.tsx b/apps/desktop/src/pages/ProjectDetails.tsx
index c3ff2a5..6042f14 100644
--- a/apps/desktop/src/pages/ProjectDetails.tsx
+++ b/apps/desktop/src/pages/ProjectDetails.tsx
@@ -31,6 +31,8 @@ import { MaterialMatchingResult, MaterialMatchingRequest } from '../types/materi
 import { MaterialSegmentView } from '../components/MaterialSegmentView';
 import { formatDistanceToNow } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
+import { MaterialSegmentStats } from '../components/MaterialSegmentStats';
+import { MaterialSegmentViewMode } from '../types/materialSegmentView';
 
 // 格式化时间
 const formatTime = (dateString: string) => {
@@ -105,15 +107,37 @@ export const ProjectDetails: React.FC = () => {
   const [editingBinding, setEditingBinding] = useState<ProjectTemplateBindingDetail | null>(null);
   const [showMaterialEditDialog, setShowMaterialEditDialog] = useState(false);
   const [editingMaterial, setEditingMaterial] = useState<Material | null>(null);
-  const [activeTab, setActiveTab] = useState<'materials' | 'segments' | 'templates' | 'debug' | 'ai-logs'>('materials');
+  const [activeTab, setActiveTab] = useState<'overview' | 'materials' | 'segments' | 'templates' | 'ai-logs'>('overview');
   const [_batchClassificationResult, setBatchClassificationResult] = useState<ProjectBatchClassificationResponse | null>(null);
 
   // 素材匹配状态
   const [showMatchingResultDialog, setShowMatchingResultDialog] = useState(false);
   const [matchingResult, setMatchingResult] = useState<MaterialMatchingResult | null>(null);
   const [matchingLoading, setMatchingLoading] = useState(false);
+  const [segmentStats, setSegmentStats] = useState<any>(null);
   const [currentMatchingBinding, setCurrentMatchingBinding] = useState<ProjectTemplateBindingDetail | null>(null);
 
+  // 加载片段统计数据
+  const loadSegmentStats = async (projectId: string) => {
+    try {
+      const stats = await invoke('get_material_segment_stats', { projectId });
+      setSegmentStats(stats);
+    } catch (error) {
+      console.error('Failed to load segment stats:', error);
+      // 设置默认统计数据
+      setSegmentStats({
+        total_segments: 0,
+        total_duration: 0,
+        classified_segments: 0,
+        classification_coverage: 0,
+        by_classification: {},
+        by_model: {},
+        by_duration_range: {},
+        avg_segment_duration: 0
+      });
+    }
+  };
+
   // 加载项目详情
   useEffect(() => {
     if (!projects.length) {
@@ -133,9 +157,11 @@ export const ProjectDetails: React.FC = () => {
         loadMaterialStats(foundProject.id);
         // 加载项目的模板绑定
         bindingActions.fetchTemplatesByProject(foundProject.id);
+        // 加载片段统计数据
+        loadSegmentStats(foundProject.id);
       }
     }
-  }, [id, projects, loadMaterials, loadMaterialStats, bindingActions]);
+  }, [id, projects, loadMaterials, loadMaterialStats, bindingActions, loadSegmentStats]);
 
   // 加载模板列表
   useEffect(() => {
@@ -526,88 +552,7 @@ export const ProjectDetails: React.FC = () => {
         </div>
       </div>
 
-      {/* 美观的项目统计概览 */}
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-4 mb-6">
-        {/* 总素材数 */}
-        <div className="bg-gradient-to-br from-white to-primary-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
-          <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-primary-100/50 to-primary-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
-          <div className="flex items-center justify-between relative z-10">
-            <div className="min-w-0 flex-1">
-              <p className="text-xs md:text-sm font-medium text-gray-600 truncate">总素材数</p>
-              <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.total_materials || 0}</p>
-            </div>
-            <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-primary-100 to-primary-200 rounded-xl flex items-center justify-center ml-2 shadow-sm">
-              <FolderOpen className="w-5 h-5 md:w-6 md:h-6 text-primary-600" />
-            </div>
-          </div>
-        </div>
 
-        {/* 视频文件 */}
-        <div className="bg-gradient-to-br from-white to-green-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
-          <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-green-100/50 to-green-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
-          <div className="flex items-center justify-between relative z-10">
-            <div className="min-w-0 flex-1">
-              <p className="text-xs md:text-sm font-medium text-gray-600 truncate">视频文件</p>
-              <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.video_count || 0}</p>
-            </div>
-            <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-green-100 to-green-200 rounded-xl flex items-center justify-center ml-2 shadow-sm">
-              <FileVideo className="w-5 h-5 md:w-6 md:h-6 text-green-600" />
-            </div>
-          </div>
-        </div>
-
-        {/* 音频文件 */}
-        <div className="bg-gradient-to-br from-white to-purple-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
-          <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-purple-100/50 to-purple-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
-          <div className="flex items-center justify-between relative z-10">
-            <div className="min-w-0 flex-1">
-              <p className="text-xs md:text-sm font-medium text-gray-600 truncate">音频文件</p>
-              <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.audio_count || 0}</p>
-            </div>
-            <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-purple-100 to-purple-200 rounded-xl flex items-center justify-center ml-2 shadow-sm">
-              <FileAudio className="w-5 h-5 md:w-6 md:h-6 text-purple-600" />
-            </div>
-          </div>
-        </div>
-
-        {/* 图片文件 */}
-        <div className="bg-gradient-to-br from-white to-orange-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
-          <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-orange-100/50 to-orange-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
-          <div className="flex items-center justify-between relative z-10">
-            <div className="min-w-0 flex-1">
-              <p className="text-xs md:text-sm font-medium text-gray-600 truncate">图片文件</p>
-              <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.image_count || 0}</p>
-            </div>
-            <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-orange-100 to-orange-200 rounded-xl flex items-center justify-center ml-2 shadow-sm">
-              <FileImage className="w-5 h-5 md:w-6 md:h-6 text-orange-600" />
-            </div>
-          </div>
-        </div>
-
-        {/* AI分类状态 */}
-        <div className="bg-gradient-to-br from-white to-purple-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
-          <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-purple-100/50 to-pink-100/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
-          <div className="flex items-center justify-between relative z-10">
-            <div className="min-w-0 flex-1">
-              <p className="text-xs md:text-sm font-medium text-gray-600 truncate">AI分类队列</p>
-              <div className="flex items-center space-x-1">
-                <p className="text-xl md:text-2xl font-bold text-gray-900">
-                  {queueStats?.pending_tasks || 0}
-                </p>
-                <span className="text-xs text-gray-500">待处理</span>
-              </div>
-              {queueStats?.processing_tasks && queueStats.processing_tasks > 0 && (
-                <p className="text-xs text-purple-600 mt-1 font-medium">
-                  {queueStats.processing_tasks} 个正在处理
-                </p>
-              )}
-            </div>
-            <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-purple-100 to-pink-100 rounded-xl flex items-center justify-center ml-2 shadow-sm">
-              <Brain className="w-5 h-5 md:w-6 md:h-6 text-purple-600" />
-            </div>
-          </div>
-        </div>
-      </div>
 
       {/* 主要内容区域 */}
       <div className="space-y-6">
@@ -615,6 +560,20 @@ export const ProjectDetails: React.FC = () => {
         <div className="bg-white rounded-xl shadow-sm border border-gray-200/50 overflow-hidden">
           <div className="border-b border-gray-100">
             <nav className="flex space-x-1 px-4 md:px-6 overflow-x-auto" aria-label="Tabs">
+              <button
+                onClick={() => setActiveTab('overview')}
+                className={`py-3 px-4 font-medium text-sm transition-all duration-200 whitespace-nowrap rounded-t-lg relative ${
+                  activeTab === 'overview'
+                    ? 'text-primary-600 border-b-2 border-primary-500'
+                    : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                <div className="flex items-center space-x-2">
+                  <Brain className="w-4 h-4" />
+                  <span className="hidden sm:inline">项目概述</span>
+                  <span className="sm:hidden">概述</span>
+                </div>
+              </button>
               <button
                 onClick={() => setActiveTab('materials')}
                 className={`py-3 px-4 font-medium text-sm transition-all duration-200 whitespace-nowrap rounded-t-lg relative ${
@@ -675,10 +634,149 @@ export const ProjectDetails: React.FC = () => {
           </div>
 
           {/* 选项卡内容 */}
-          <div className="p-4 md:p-6 max-h-[calc(100vh-20rem)] overflow-y-auto custom-scrollbar">
+          <div className="h-[calc(100vh-16rem)] overflow-y-auto custom-scrollbar">
+            {/* 项目概述选项卡 */}
+            {activeTab === 'overview' && (
+              <div className="p-4 md:p-6 space-y-6">
+                {/* 项目统计概览 */}
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-4">项目统计</h3>
+                  <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-4">
+                    {/* 总素材数 */}
+                    <div className="bg-gradient-to-br from-white to-primary-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
+                      <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-primary-100/50 to-primary-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
+                      <div className="flex items-center justify-between relative z-10">
+                        <div className="min-w-0 flex-1">
+                          <p className="text-xs md:text-sm font-medium text-gray-600 truncate">总素材数</p>
+                          <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.total_materials || 0}</p>
+                        </div>
+                        <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-primary-100 to-primary-200 rounded-xl flex items-center justify-center ml-2 shadow-sm">
+                          <FolderOpen className="w-5 h-5 md:w-6 md:h-6 text-primary-600" />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 视频文件 */}
+                    <div className="bg-gradient-to-br from-white to-green-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
+                      <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-green-100/50 to-green-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
+                      <div className="flex items-center justify-between relative z-10">
+                        <div className="min-w-0 flex-1">
+                          <p className="text-xs md:text-sm font-medium text-gray-600 truncate">视频文件</p>
+                          <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.video_count || 0}</p>
+                        </div>
+                        <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-green-100 to-green-200 rounded-xl flex items-center justify-center ml-2 shadow-sm">
+                          <FileVideo className="w-5 h-5 md:w-6 md:h-6 text-green-600" />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 音频文件 */}
+                    <div className="bg-gradient-to-br from-white to-purple-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
+                      <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-purple-100/50 to-purple-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
+                      <div className="flex items-center justify-between relative z-10">
+                        <div className="min-w-0 flex-1">
+                          <p className="text-xs md:text-sm font-medium text-gray-600 truncate">音频文件</p>
+                          <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.audio_count || 0}</p>
+                        </div>
+                        <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-purple-100 to-purple-200 rounded-xl flex items-center justify-center ml-2 shadow-sm">
+                          <FileAudio className="w-5 h-5 md:w-6 md:h-6 text-purple-600" />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 图片文件 */}
+                    <div className="bg-gradient-to-br from-white to-orange-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
+                      <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-orange-100/50 to-orange-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
+                      <div className="flex items-center justify-between relative z-10">
+                        <div className="min-w-0 flex-1">
+                          <p className="text-xs md:text-sm font-medium text-gray-600 truncate">图片文件</p>
+                          <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.image_count || 0}</p>
+                        </div>
+                        <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-orange-100 to-orange-200 rounded-xl flex items-center justify-center ml-2 shadow-sm">
+                          <FileImage className="w-5 h-5 md:w-6 md:h-6 text-orange-600" />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* AI分类状态 */}
+                    <div className="bg-gradient-to-br from-white to-purple-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
+                      <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-purple-100/50 to-pink-100/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
+                      <div className="flex items-center justify-between relative z-10">
+                        <div className="min-w-0 flex-1">
+                          <p className="text-xs md:text-sm font-medium text-gray-600 truncate">AI分类队列</p>
+                          <div className="flex items-center space-x-1">
+                            <p className="text-xl md:text-2xl font-bold text-gray-900">
+                              {queueStats?.pending_tasks || 0}
+                            </p>
+                            <span className="text-xs text-gray-500">待处理</span>
+                          </div>
+                          {queueStats?.processing_tasks && queueStats.processing_tasks > 0 && (
+                            <p className="text-xs text-purple-600 mt-1 font-medium">
+                              {queueStats.processing_tasks} 个正在处理
+                            </p>
+                          )}
+                        </div>
+                        <div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-purple-100 to-pink-100 rounded-xl flex items-center justify-center ml-2 shadow-sm">
+                          <Brain className="w-5 h-5 md:w-6 md:h-6 text-purple-600" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 片段管理统计 */}
+                {project && (
+                  <div>
+                    <h3 className="text-lg font-semibold text-gray-900 mb-4">片段统计</h3>
+                    <MaterialSegmentStats
+                      stats={segmentStats}
+                      viewMode={MaterialSegmentViewMode.ByClassification}
+                    />
+                  </div>
+                )}
+
+                {/* AI视频分类进度 */}
+                {project && (
+                  <div>
+                    <h3 className="text-lg font-semibold text-gray-900 mb-4">AI分析进度</h3>
+                    <VideoClassificationProgress
+                      projectId={project.id}
+                      autoRefresh={true}
+                      refreshInterval={3000}
+                    />
+                  </div>
+                )}
+
+                {/* 项目信息 */}
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-4">项目信息</h3>
+                  <div className="bg-gray-50 rounded-xl p-4 space-y-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium text-gray-600">项目路径</span>
+                      <span className="text-sm text-gray-900 font-mono bg-white px-2 py-1 rounded border">
+                        {project?.path}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium text-gray-600">创建时间</span>
+                      <span className="text-sm text-gray-900">
+                        {project?.created_at ? formatTime(project.created_at) : '-'}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium text-gray-600">最后更新</span>
+                      <span className="text-sm text-gray-900">
+                        {project?.updated_at ? formatTime(project.updated_at) : '-'}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
             {/* 素材管理选项卡 */}
             {activeTab === 'materials' && (
-              <div className="space-y-6">
+              <div className="p-4 md:p-6 space-y-6">
                 {/* AI视频分类进度 */}
                 {project && (
                   <VideoClassificationProgress
@@ -741,14 +839,14 @@ export const ProjectDetails: React.FC = () => {
 
             {/* 片段管理选项卡 */}
             {activeTab === 'segments' && project && (
-              <div className="space-y-6">
+              <div className="p-4 md:p-6">
                 <MaterialSegmentView projectId={project.id} />
               </div>
             )}
 
             {/* 模板绑定选项卡 */}
             {activeTab === 'templates' && project && (
-              <div className="space-y-6">
+              <div className="p-4 md:p-6 space-y-6">
                 <div className="flex items-center justify-between">
                   <div>
                     <h3 className="text-lg font-medium text-gray-900">模板绑定管理</h3>
@@ -794,7 +892,7 @@ export const ProjectDetails: React.FC = () => {
 
             {/* AI分析日志选项卡 */}
             {activeTab === 'ai-logs' && project && (
-              <div>
+              <div className="p-4 md:p-6 space-y-6">
                 <div className="mb-4">
                   <h3 className="text-lg font-medium text-gray-900 mb-2">AI分析日志</h3>
                   <p className="text-sm text-gray-600">