From 9f222b562db5a5d6f82fc6803e8c76b002e61bb2 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Tue, 15 Jul 2025 10:33:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E6=9D=BF=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86UI/UX=E5=85=A8=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 视觉设计优化:
- 重新设计信息架构，按重要性分层展示
- 优化颜色系统，减少视觉噪音
- 统一间距和字体层次，提升可读性
- 使用渐变背景和卡片设计增强视觉层次

 交互体验改进:
- 实现渐进披露，核心信息优先展示
- 添加可折叠区域，减少信息密度
- 优化状态指示器，更清晰的文件状态展示
- 改进匹配规则编辑器的位置和样式

 响应式适配:
- 移动端友好的布局设计
- 自适应网格系统
- 触摸友好的交互元素
- 优化小屏幕下的信息展示

 信息架构重构:
- 概览页：核心信息卡片 + 可折叠技术详情
- 素材页：主要信息 + 可展开详细信息
- 轨道页：轨道概览 + 片段详情 + 可展开属性

遵循frontend-developer规范，提升用户体验
---
 .../template/TemplateDetailModal.tsx          | 663 +++++++++++-------
 1 file changed, 420 insertions(+), 243 deletions(-)

diff --git a/apps/desktop/src/components/template/TemplateDetailModal.tsx b/apps/desktop/src/components/template/TemplateDetailModal.tsx
index 2435cdb..7ae2b8f 100644
--- a/apps/desktop/src/components/template/TemplateDetailModal.tsx
+++ b/apps/desktop/src/components/template/TemplateDetailModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { X, Calendar, Clock, Monitor, Layers, FileText, Image, Video, Music, Type, Sparkles, CheckCircle, XCircle, AlertCircle, Upload, Cloud } from 'lucide-react';
+import { X, Calendar, Clock, Monitor, Layers, FileText, Image, Video, Music, Type, Sparkles, CheckCircle, XCircle, AlertCircle, Upload, Cloud, ChevronDown, ChevronRight, Info } from 'lucide-react';
 import { Template, TemplateMaterial, TemplateMaterialType, TrackType } from '../../types/template';
 import { SegmentMatchingRuleEditor } from './SegmentMatchingRuleEditor';
 
@@ -13,6 +13,31 @@ export const TemplateDetailModal: React.FC<TemplateDetailModalProps> = ({
   onClose,
 }) => {
   const [activeTab, setActiveTab] = useState<'overview' | 'materials' | 'tracks'>('overview');
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({});
+  const [expandedMaterials, setExpandedMaterials] = useState<Record<string, boolean>>({});
+  const [expandedSegments, setExpandedSegments] = useState<Record<string, boolean>>({});
+
+  // 切换展开状态
+  const toggleSection = (sectionId: string) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [sectionId]: !prev[sectionId]
+    }));
+  };
+
+  const toggleMaterial = (materialId: string) => {
+    setExpandedMaterials(prev => ({
+      ...prev,
+      [materialId]: !prev[materialId]
+    }));
+  };
+
+  const toggleSegment = (segmentId: string) => {
+    setExpandedSegments(prev => ({
+      ...prev,
+      [segmentId]: !prev[segmentId]
+    }));
+  };
 
   // 格式化时长
   const formatDuration = (microseconds: number) => {
@@ -207,40 +232,41 @@ export const TemplateDetailModal: React.FC<TemplateDetailModalProps> = ({
   }
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-hidden">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-2xl w-full max-w-5xl max-h-[95vh] overflow-hidden">
         {/* 模态框头部 */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200">
-          <div>
-            <h2 className="text-xl font-semibold text-gray-900">{template.name}</h2>
+        <div className="flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
+          <div className="flex-1 min-w-0">
+            <h2 className="text-lg sm:text-xl font-semibold text-gray-900 truncate">{template.name}</h2>
             {template.description && (
-              <p className="text-sm text-gray-600 mt-1">{template.description}</p>
+              <p className="text-sm text-gray-600 mt-1 line-clamp-2">{template.description}</p>
             )}
           </div>
           <button
             onClick={onClose}
-            className="p-1 rounded-full hover:bg-gray-100 transition-colors"
+            className="ml-4 p-2 rounded-full hover:bg-gray-100 transition-colors flex-shrink-0"
           >
             <X className="w-5 h-5 text-gray-500" />
           </button>
         </div>
 
         {/* 标签页导航 */}
-        <div className="border-b border-gray-200">
-          <nav className="flex space-x-8 px-6">
+        <div className="border-b border-gray-200 bg-white">
+          <nav className="flex space-x-4 sm:space-x-8 px-4 sm:px-6 overflow-x-auto">
             {tabs.map((tab) => {
               const Icon = tab.icon;
               return (
                 <button
                   key={tab.id}
                   onClick={() => setActiveTab(tab.id as any)}
-                  className={`flex items-center py-4 px-1 border-b-2 font-medium text-sm transition-colors ${activeTab === tab.id
+                  className={`flex items-center py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap ${activeTab === tab.id
                     ? 'border-blue-500 text-blue-600'
                     : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                     }`}
                 >
-                  <Icon className="w-4 h-4 mr-2" />
-                  {tab.label}
+                  <Icon className="w-4 h-4 mr-2 flex-shrink-0" />
+                  <span className="hidden sm:inline">{tab.label}</span>
+                  <span className="sm:hidden">{tab.label.charAt(0)}</span>
                 </button>
               );
             })}
@@ -248,144 +274,224 @@ export const TemplateDetailModal: React.FC<TemplateDetailModalProps> = ({
         </div>
 
         {/* 标签页内容 */}
-        <div className="p-6 overflow-y-auto max-h-[60vh]">
+        <div className="p-4 sm:p-6 overflow-y-auto max-h-[60vh] sm:max-h-[65vh]">
           {activeTab === 'overview' && (
-            <div className="space-y-6">
-              {/* 基本信息 */}
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                <div className="bg-gray-50 p-4 rounded-lg">
-                  <div className="flex items-center mb-2">
-                    <Monitor className="w-4 h-4 text-gray-600 mr-2" />
-                    <span className="text-sm font-medium text-gray-700">分辨率</span>
-                  </div>
-                  <div className="text-lg font-semibold text-gray-900">
-                    {template.canvas_config.width}×{template.canvas_config.height}
-                  </div>
-                  <div className="text-xs text-gray-500">{template.canvas_config.ratio}</div>
-                </div>
-
-                <div className="bg-gray-50 p-4 rounded-lg">
-                  <div className="flex items-center mb-2">
-                    <Clock className="w-4 h-4 text-gray-600 mr-2" />
-                    <span className="text-sm font-medium text-gray-700">时长</span>
-                  </div>
-                  <div className="text-lg font-semibold text-gray-900">
-                    {formatDuration(template.duration)}
-                  </div>
-                  <div className="text-xs text-gray-500">{template.fps} FPS</div>
-                </div>
-
-                <div className="bg-gray-50 p-4 rounded-lg">
-                  <div className="flex items-center mb-2">
-                    <FileText className="w-4 h-4 text-gray-600 mr-2" />
-                    <span className="text-sm font-medium text-gray-700">素材</span>
-                  </div>
-                  <div className="text-lg font-semibold text-gray-900">
-                    {template.materials.length}
-                  </div>
-                  <div className="text-xs text-gray-500">个素材</div>
-                </div>
-
-                <div className="bg-gray-50 p-4 rounded-lg">
-                  <div className="flex items-center mb-2">
-                    <Layers className="w-4 h-4 text-gray-600 mr-2" />
-                    <span className="text-sm font-medium text-gray-700">轨道</span>
-                  </div>
-                  <div className="text-lg font-semibold text-gray-900">
-                    {template.tracks.length}
-                  </div>
-                  <div className="text-xs text-gray-500">个轨道</div>
-                </div>
-              </div>
-
-              {/* 模板信息 */}
-              <div className="bg-gray-50 p-4 rounded-lg">
-                <h3 className="text-sm font-medium text-gray-700 mb-3">模板信息</h3>
-                <div className="grid grid-cols-1 gap-3 text-sm">
-                  <div className="flex items-center">
-                    <FileText className="w-4 h-4 text-gray-500 mr-2" />
-                    <span className="text-gray-600">模板ID：</span>
-                    <span className="ml-1 font-mono text-blue-600 text-xs">{template.id}</span>
-                  </div>
-                  {template.source_file_path && (
-                    <div className="flex items-center">
-                      <FileText className="w-4 h-4 text-gray-500 mr-2" />
-                      <span className="text-gray-600">源文件：</span>
-                      <span className="ml-1 text-gray-900 break-all">{template.source_file_path}</span>
+            <div className="space-y-8">
+              {/* 核心信息卡片 */}
+              <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-xl p-4 sm:p-6">
+                <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+                  <div className="text-center">
+                    <div className="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-3">
+                      <Monitor className="w-6 h-6 text-blue-600" />
                     </div>
-                  )}
+                    <div className="text-2xl font-bold text-gray-900">
+                      {template.canvas_config.width}×{template.canvas_config.height}
+                    </div>
+                    <div className="text-sm text-gray-600 mt-1">分辨率</div>
+                    <div className="text-xs text-gray-500">{template.canvas_config.ratio}</div>
+                  </div>
+
+                  <div className="text-center">
+                    <div className="inline-flex items-center justify-center w-12 h-12 bg-green-100 rounded-lg mb-3">
+                      <Clock className="w-6 h-6 text-green-600" />
+                    </div>
+                    <div className="text-2xl font-bold text-gray-900">
+                      {formatDuration(template.duration)}
+                    </div>
+                    <div className="text-sm text-gray-600 mt-1">时长</div>
+                    <div className="text-xs text-gray-500">{template.fps} FPS</div>
+                  </div>
+
+                  <div className="text-center">
+                    <div className="inline-flex items-center justify-center w-12 h-12 bg-purple-100 rounded-lg mb-3">
+                      <FileText className="w-6 h-6 text-purple-600" />
+                    </div>
+                    <div className="text-2xl font-bold text-gray-900">
+                      {template.materials.length}
+                    </div>
+                    <div className="text-sm text-gray-600 mt-1">素材</div>
+                  </div>
+
+                  <div className="text-center">
+                    <div className="inline-flex items-center justify-center w-12 h-12 bg-orange-100 rounded-lg mb-3">
+                      <Layers className="w-6 h-6 text-orange-600" />
+                    </div>
+                    <div className="text-2xl font-bold text-gray-900">
+                      {template.tracks.length}
+                    </div>
+                    <div className="text-sm text-gray-600 mt-1">轨道</div>
+                  </div>
                 </div>
               </div>
 
-              {/* 创建信息 */}
-              <div className="bg-gray-50 p-4 rounded-lg">
-                <h3 className="text-sm font-medium text-gray-700 mb-3">创建信息</h3>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-                  <div className="flex items-center">
-                    <Calendar className="w-4 h-4 text-gray-500 mr-2" />
-                    <span className="text-gray-600">创建时间：</span>
-                    <span className="ml-1 text-gray-900">{formatDate(template.created_at)}</span>
+              {/* 技术详情 - 可折叠 */}
+              <div className="border border-gray-200 rounded-lg overflow-hidden">
+                <button
+                  onClick={() => toggleSection('technical')}
+                  className="w-full px-6 py-4 bg-gray-50 hover:bg-gray-100 transition-colors flex items-center justify-between"
+                >
+                  <div className="flex items-center space-x-3">
+                    <Info className="w-5 h-5 text-gray-600" />
+                    <span className="font-medium text-gray-900">技术详情</span>
                   </div>
-                  <div className="flex items-center">
-                    <Calendar className="w-4 h-4 text-gray-500 mr-2" />
-                    <span className="text-gray-600">更新时间：</span>
-                    <span className="ml-1 text-gray-900">{formatDate(template.updated_at)}</span>
+                  {expandedSections.technical ? (
+                    <ChevronDown className="w-5 h-5 text-gray-600" />
+                  ) : (
+                    <ChevronRight className="w-5 h-5 text-gray-600" />
+                  )}
+                </button>
+
+                {expandedSections.technical && (
+                  <div className="px-6 py-4 bg-white border-t border-gray-200">
+                    <div className="space-y-4">
+                      <div className="flex items-center justify-between py-2">
+                        <span className="text-sm text-gray-600">模板ID</span>
+                        <code className="text-xs bg-gray-100 px-2 py-1 rounded font-mono text-blue-600">
+                          {template.id}
+                        </code>
+                      </div>
+                      {template.source_file_path && (
+                        <div className="flex items-start justify-between py-2">
+                          <span className="text-sm text-gray-600">源文件路径</span>
+                          <span className="text-xs text-gray-900 text-right max-w-md break-all">
+                            {template.source_file_path}
+                          </span>
+                        </div>
+                      )}
+                    </div>
                   </div>
-                </div>
+                )}
+              </div>
+
+              {/* 时间信息 - 可折叠 */}
+              <div className="border border-gray-200 rounded-lg overflow-hidden">
+                <button
+                  onClick={() => toggleSection('timestamps')}
+                  className="w-full px-6 py-4 bg-gray-50 hover:bg-gray-100 transition-colors flex items-center justify-between"
+                >
+                  <div className="flex items-center space-x-3">
+                    <Calendar className="w-5 h-5 text-gray-600" />
+                    <span className="font-medium text-gray-900">时间信息</span>
+                  </div>
+                  {expandedSections.timestamps ? (
+                    <ChevronDown className="w-5 h-5 text-gray-600" />
+                  ) : (
+                    <ChevronRight className="w-5 h-5 text-gray-600" />
+                  )}
+                </button>
+
+                {expandedSections.timestamps && (
+                  <div className="px-6 py-4 bg-white border-t border-gray-200">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      <div className="flex items-center justify-between py-2">
+                        <span className="text-sm text-gray-600">创建时间</span>
+                        <span className="text-sm text-gray-900">{formatDate(template.created_at)}</span>
+                      </div>
+                      <div className="flex items-center justify-between py-2">
+                        <span className="text-sm text-gray-600">更新时间</span>
+                        <span className="text-sm text-gray-900">{formatDate(template.updated_at)}</span>
+                      </div>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           )}
 
           {activeTab === 'materials' && (
-            <div className="space-y-4">
+            <div className="space-y-6">
               <div className="flex items-center justify-between">
-                <h3 className="text-lg font-medium text-gray-900">
-                  素材列表 ({template.materials.length})
+                <h3 className="text-xl font-semibold text-gray-900">
+                  素材列表
                 </h3>
+                <span className="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
+                  {template.materials.length} 个素材
+                </span>
               </div>
 
-              <div className="space-y-3">
+              <div className="grid gap-4">
                 {template.materials.map((material) => {
                   const uploadStatus = getUploadStatusInfo(material);
                   const fileExistence = getFileExistenceInfo(material);
+                  const isExpanded = expandedMaterials[material.id];
 
                   return (
-                    <div key={material.id} className="bg-gray-50 p-4 rounded-lg">
-                      <div className="flex items-start justify-between">
-                        <div className="flex items-start space-x-3">
-                          {getMaterialIcon(material.material_type)}
-                          <div className="flex-1 min-w-0">
-                            <div className="text-sm font-medium text-gray-900 truncate">
-                              {getMaterialName(material)}
+                    <div key={material.id} className="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
+                      {/* 主要信息 */}
+                      <div className="p-4">
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-start space-x-3 flex-1">
+                            <div className="flex-shrink-0">
+                              {getMaterialIcon(material.material_type)}
                             </div>
-                            <div className="text-xs text-gray-500 mt-1 space-y-1">
-                              <div>ID: <span className="font-mono text-blue-600">{material.id}</span></div>
-                              <div>原始ID: <span className="font-mono text-purple-600">{material.original_id}</span></div>
-                              <div>类型: {material.material_type}</div>
-
-                              {/* 文件存在状态 */}
-                              <div className="flex items-center space-x-1">
-                                {fileExistence.icon}
-                                <span className={fileExistence.color}>{fileExistence.text}</span>
+                            <div className="flex-1 min-w-0">
+                              <div className="flex items-center space-x-2 mb-2">
+                                <h4 className="text-base font-medium text-gray-900 truncate">
+                                  {getMaterialName(material)}
+                                </h4>
+                                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                                  {material.material_type}
+                                </span>
                               </div>
 
-                              {/* 上传状态 */}
-                              <div className="flex items-center space-x-1">
-                                {uploadStatus.icon}
-                                <span className={uploadStatus.color}>{uploadStatus.text}</span>
+                              {/* 状态指示器 */}
+                              <div className="flex items-center space-x-4">
+                                <div className="flex items-center space-x-1">
+                                  {fileExistence.icon}
+                                  <span className={`text-xs font-medium ${fileExistence.color}`}>
+                                    {fileExistence.text}
+                                  </span>
+                                </div>
+                                <div className="flex items-center space-x-1">
+                                  {uploadStatus.icon}
+                                  <span className={`text-xs font-medium ${uploadStatus.color}`}>
+                                    {uploadStatus.text}
+                                  </span>
+                                </div>
                               </div>
                             </div>
+                          </div>
+
+                          {/* 文件信息摘要 */}
+                          <div className="flex-shrink-0 text-right text-xs text-gray-500 space-y-1">
+                            {material.duration && (
+                              <div className="font-medium">{formatDuration(material.duration)}</div>
+                            )}
+                            {material.file_size && (
+                              <div>{formatFileSize(material.file_size)}</div>
+                            )}
+                            {material.width && material.height && (
+                              <div>{material.width}×{material.height}</div>
+                            )}
+                          </div>
+
+                          {/* 展开按钮 */}
+                          <button
+                            onClick={() => toggleMaterial(material.id)}
+                            className="ml-4 p-1 rounded-full hover:bg-gray-100 transition-colors"
+                          >
+                            {isExpanded ? (
+                              <ChevronDown className="w-4 h-4 text-gray-600" />
+                            ) : (
+                              <ChevronRight className="w-4 h-4 text-gray-600" />
+                            )}
+                          </button>
+                        </div>
+
+                        {/* 详细信息 - 可展开 */}
+                        {isExpanded && (
+                          <div className="mt-4 pt-4 border-t border-gray-100 space-y-4">
                             {/* 文字素材显示文本内容 */}
                             {material.material_type === 'Text' && material.metadata && (() => {
                               const textData = parseTextContent(material.metadata);
                               return textData ? (
-                                <div className="text-xs text-gray-700 bg-gray-100 p-2 rounded mt-1">
-                                  <div className="font-medium text-gray-600 mb-1">文本内容:</div>
-                                  <div className="break-words mb-2">
+                                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                                  <div className="text-sm font-medium text-blue-900 mb-2">文本内容</div>
+                                  <div className="text-sm text-blue-800 break-words mb-3">
                                     {textData.content?.text || '无文本内容'}
                                   </div>
                                   {(textData.font_family || textData.font_size || textData.color) && (
-                                    <div className="text-xs text-gray-500 space-y-1">
+                                    <div className="text-xs text-blue-700 space-y-1">
                                       {textData.font_family && (
                                         <div>字体: {textData.font_family}</div>
                                       )}
@@ -399,37 +505,48 @@ export const TemplateDetailModal: React.FC<TemplateDetailModalProps> = ({
                                   )}
                                 </div>
                               ) : (
-                                <div className="text-xs text-gray-500 bg-gray-100 p-2 rounded mt-1">
+                                <div className="text-xs text-gray-500 bg-gray-100 p-2 rounded">
                                   无法解析文本内容
                                 </div>
                               );
                             })()}
 
-                            {/* 非文字素材显示文件路径 */}
-                            {material.material_type !== 'Text' && material.original_path && (
-                              <div className="text-xs text-gray-500 break-all mt-1">
-                                路径: {material.original_path}
+                            {/* 技术详情 */}
+                            <div className="bg-gray-50 rounded-lg p-3">
+                              <div className="text-sm font-medium text-gray-900 mb-2">技术详情</div>
+                              <div className="space-y-2 text-xs text-gray-600">
+                                <div className="flex justify-between">
+                                  <span>素材ID</span>
+                                  <code className="bg-white px-2 py-1 rounded font-mono text-blue-600">
+                                    {material.id}
+                                  </code>
+                                </div>
+                                <div className="flex justify-between">
+                                  <span>原始ID</span>
+                                  <code className="bg-white px-2 py-1 rounded font-mono text-purple-600">
+                                    {material.original_id}
+                                  </code>
+                                </div>
+                                {material.original_path && material.material_type !== 'Text' && (
+                                  <div className="flex justify-between items-start">
+                                    <span>文件路径</span>
+                                    <span className="text-right max-w-xs break-all">
+                                      {material.original_path}
+                                    </span>
+                                  </div>
+                                )}
+                                {material.remote_url && (
+                                  <div className="flex justify-between items-start">
+                                    <span>云端URL</span>
+                                    <span className="text-right max-w-xs break-all">
+                                      {material.remote_url}
+                                    </span>
+                                  </div>
+                                )}
                               </div>
-                            )}
-                            {material.remote_url && (
-                              <div className="text-xs text-gray-500 break-all mt-1">
-                                云端URL: {material.remote_url}
-                              </div>
-                            )}
+                            </div>
                           </div>
-                        </div>
-
-                        <div className="text-right text-xs text-gray-500">
-                          {material.duration && (
-                            <div>时长: {formatDuration(material.duration)}</div>
-                          )}
-                          {material.file_size && (
-                            <div>大小: {formatFileSize(material.file_size)}</div>
-                          )}
-                          {material.width && material.height && (
-                            <div>尺寸: {material.width}×{material.height}</div>
-                          )}
-                        </div>
+                        )}
                       </div>
                     </div>
                   );
@@ -439,128 +556,188 @@ export const TemplateDetailModal: React.FC<TemplateDetailModalProps> = ({
           )}
 
           {activeTab === 'tracks' && (
-            <div className="space-y-4">
+            <div className="space-y-6">
               <div className="flex items-center justify-between">
-                <h3 className="text-lg font-medium text-gray-900">
-                  轨道列表 ({template.tracks.length})
+                <h3 className="text-xl font-semibold text-gray-900">
+                  轨道列表
                 </h3>
+                <span className="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
+                  {template.tracks.length} 个轨道
+                </span>
               </div>
 
               <div className="space-y-4">
                 {template.tracks.map((track) => (
-                  <div key={track.id} className="bg-gray-50 p-4 rounded-lg">
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="flex items-center space-x-2">
-                        {getTrackIcon(track.track_type)}
-                        <div className="flex flex-col">
-                          <span className="text-sm font-medium text-gray-900">
-                            {track.name}
-                          </span>
-                          <div className="text-xs text-gray-500">
-                            <span>ID: <span className="font-mono text-green-600">{track.id}</span></span>
-                            <span className="ml-3">类型: {track.track_type}</span>
-                            <span className="ml-3">索引: {track.track_index}</span>
+                  <div key={track.id} className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+                    {/* 轨道头部 */}
+                    <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                          <div className="flex-shrink-0">
+                            {getTrackIcon(track.track_type)}
+                          </div>
+                          <div>
+                            <h4 className="text-base font-medium text-gray-900">
+                              {track.name}
+                            </h4>
+                            <div className="flex items-center space-x-4 text-xs text-gray-500 mt-1">
+                              <span className="inline-flex items-center px-2 py-1 rounded-full bg-gray-100 text-gray-800">
+                                {track.track_type}
+                              </span>
+                              <span>轨道 {track.track_index}</span>
+                            </div>
                           </div>
                         </div>
+                        <div className="text-right">
+                          <div className="text-sm font-medium text-gray-900">
+                            {track.segments.length} 个片段
+                          </div>
+                          <button
+                            onClick={() => toggleSection(`track-${track.id}`)}
+                            className="text-xs text-blue-600 hover:text-blue-800 mt-1"
+                          >
+                            {expandedSections[`track-${track.id}`] ? '收起详情' : '查看详情'}
+                          </button>
+                        </div>
                       </div>
-                      <span className="text-xs text-gray-500">
-                        {track.segments.length} 个片段
-                      </span>
                     </div>
 
+                    {/* 轨道技术详情 */}
+                    {expandedSections[`track-${track.id}`] && (
+                      <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
+                        <div className="text-xs text-gray-600">
+                          <span>轨道ID: </span>
+                          <code className="bg-white px-2 py-1 rounded font-mono text-green-600">
+                            {track.id}
+                          </code>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* 片段列表 */}
                     {track.segments.length > 0 && (
-                      <div className="space-y-2">
+                      <div className="divide-y divide-gray-100">
                         {track.segments.map((segment) => {
                           const segmentProps = parseSegmentProperties(segment.properties || null);
+                          const isSegmentExpanded = expandedSegments[segment.id];
 
                           return (
-                            <div key={segment.id} className="bg-white p-3 rounded border">
-                              <div className="flex items-center justify-between mb-2">
-                                <span className="text-sm text-gray-900">{segment.name}</span>
-                                <span className="text-xs text-gray-500">
-                                  {formatDurationWithMs(segment.start_time)} - {formatDurationWithMs(segment.end_time)}
-                                </span>
-                              </div>
-                              <div className="text-xs text-gray-500 space-y-1">
-                                <div>
-                                  <span>片段ID: <span className="font-mono text-orange-600">{segment.id}</span></span>
-                                  <span className="ml-3">索引: {segment.segment_index}</span>
-                                </div>
-                                <div className="flex items-center space-x-4">
-                                  <span>时长: {formatDurationWithMs(segment.duration)}</span>
-                                  {segmentProps?.speed && segmentProps.speed !== 1.0 && (
-                                    <span className={`px-2 py-0.5 rounded text-xs ${
-                                      segmentProps.speed > 1.0
-                                        ? 'bg-red-100 text-red-800'
-                                        : 'bg-green-100 text-green-800'
-                                    }`}>
-                                      速度: {segmentProps.speed.toFixed(3)}x {segmentProps.speed > 1.0 ? '(加速)' : '(减速)'}
+                            <div key={segment.id} className="p-4">
+                              {/* 片段主要信息 */}
+                              <div className="flex items-start justify-between mb-3">
+                                <div className="flex-1">
+                                  <div className="flex items-center space-x-3 mb-2">
+                                    <h5 className="text-sm font-medium text-gray-900">
+                                      {segment.name}
+                                    </h5>
+                                    <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                                      #{segment.segment_index}
                                     </span>
-                                  )}
-                                  {segmentProps?.speed === 1.0 && (
-                                    <span className="bg-gray-100 text-gray-600 px-2 py-0.5 rounded text-xs">正常速度</span>
-                                  )}
-                                </div>
-                                {/* 播放速度不影响片段时长，移除实际播放时长显示 */}
-                                {/* 时间轴位置信息 */}
-                                {segmentProps?.target_timerange && (
-                                  <div className="bg-blue-50 p-2 rounded mt-1">
-                                    <div className="text-xs font-medium text-blue-700 mb-1">时间轴位置:</div>
-                                    <div className="text-xs text-blue-600 space-y-0.5">
-                                      <div>开始: {formatDurationWithMs(segmentProps.target_timerange.start)}</div>
-                                      <div>时长: {formatDurationWithMs(segmentProps.target_timerange.duration)}</div>
-                                      <div>结束: {formatDurationWithMs(segmentProps.target_timerange.start + segmentProps.target_timerange.duration)}</div>
-                                    </div>
                                   </div>
-                                )}
 
-                                {/* 源素材时间范围 */}
-                                {segmentProps?.source_timerange && (
-                                  <div className="bg-purple-50 p-2 rounded mt-1">
-                                    <div className="text-xs font-medium text-purple-700 mb-1">源素材时间范围:</div>
-                                    <div className="text-xs text-purple-600 space-y-0.5">
-                                      <div>开始位置: {formatDurationWithMs(segmentProps.source_timerange.start)}</div>
-                                      <div>截取时长: {formatDurationWithMs(segmentProps.source_timerange.duration)}</div>
-                                      <div>结束位置: {formatDurationWithMs(segmentProps.source_timerange.start + segmentProps.source_timerange.duration)}</div>
-                                    </div>
+                                  <div className="flex items-center space-x-4 text-xs text-gray-600">
+                                    <span className="font-medium">
+                                      {formatDurationWithMs(segment.start_time)} - {formatDurationWithMs(segment.end_time)}
+                                    </span>
+                                    <span>时长: {formatDurationWithMs(segment.duration)}</span>
+                                    {segmentProps?.speed && segmentProps.speed !== 1.0 && (
+                                      <span className={`px-2 py-1 rounded text-xs font-medium ${
+                                        segmentProps.speed > 1.0
+                                          ? 'bg-red-100 text-red-700'
+                                          : 'bg-green-100 text-green-700'
+                                      }`}>
+                                        {segmentProps.speed.toFixed(2)}x
+                                      </span>
+                                    )}
                                   </div>
-                                )}
-                                {/* 其他属性信息 */}
-                                {(segmentProps?.visible !== undefined || segmentProps?.volume !== undefined) && (
-                                  <div className="bg-gray-50 p-2 rounded mt-1">
-                                    <div className="text-xs font-medium text-gray-700 mb-1">其他属性:</div>
-                                    <div className="text-xs text-gray-600 space-y-0.5">
-                                      {segmentProps?.visible !== undefined && (
-                                        <div>可见性: {segmentProps.visible ? '可见' : '隐藏'}</div>
-                                      )}
-                                      {segmentProps?.volume !== undefined && (
-                                        <div>音量: {(segmentProps.volume * 100).toFixed(0)}%</div>
-                                      )}
-                                    </div>
-                                  </div>
-                                )}
-
-                                {/* 匹配规则编辑器 */}
-                                <div className="bg-yellow-50 p-2 rounded mt-1">
-                                  <SegmentMatchingRuleEditor
-                                    segmentId={segment.id}
-                                    currentRule={segment.matching_rule}
-                                    onRuleUpdated={(newRule) => {
-                                      // 可以在这里添加更新后的回调逻辑
-                                      console.log('片段匹配规则已更新:', segment.id, newRule);
-                                    }}
-                                  />
                                 </div>
 
-                                {segment.template_material_id && (
-                                  <div>
-                                    使用素材ID: <span className="font-mono text-blue-600">{segment.template_material_id}</span>
-                                  </div>
-                                )}
-                                {!segment.template_material_id && (
-                                  <div className="text-gray-400">未关联素材</div>
-                                )}
+                                <button
+                                  onClick={() => toggleSegment(segment.id)}
+                                  className="ml-4 p-1 rounded-full hover:bg-gray-100 transition-colors"
+                                >
+                                  {isSegmentExpanded ? (
+                                    <ChevronDown className="w-4 h-4 text-gray-600" />
+                                  ) : (
+                                    <ChevronRight className="w-4 h-4 text-gray-600" />
+                                  )}
+                                </button>
                               </div>
+
+                              {/* 匹配规则 - 始终显示 */}
+                              <div className="mb-3">
+                                <SegmentMatchingRuleEditor
+                                  segmentId={segment.id}
+                                  currentRule={segment.matching_rule}
+                                  onRuleUpdated={(newRule) => {
+                                    console.log('片段匹配规则已更新:', segment.id, newRule);
+                                  }}
+                                />
+                              </div>
+
+                              {/* 关联素材信息 */}
+                              {segment.template_material_id && (
+                                <div className="text-xs text-gray-600 mb-3">
+                                  <span>关联素材: </span>
+                                  <code className="bg-blue-50 text-blue-700 px-2 py-1 rounded font-mono">
+                                    {segment.template_material_id}
+                                  </code>
+                                </div>
+                              )}
+                              {/* 详细属性 - 可展开 */}
+                              {isSegmentExpanded && (
+                                <div className="mt-4 pt-4 border-t border-gray-100 space-y-4">
+                                  {/* 技术详情 */}
+                                  <div className="bg-gray-50 rounded-lg p-3">
+                                    <div className="text-sm font-medium text-gray-900 mb-2">技术详情</div>
+                                    <div className="text-xs text-gray-600">
+                                      <span>片段ID: </span>
+                                      <code className="bg-white px-2 py-1 rounded font-mono text-orange-600">
+                                        {segment.id}
+                                      </code>
+                                    </div>
+                                  </div>
+
+                                  {/* 时间轴位置信息 */}
+                                  {segmentProps?.target_timerange && (
+                                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                                      <div className="text-sm font-medium text-blue-900 mb-2">时间轴位置</div>
+                                      <div className="text-xs text-blue-700 space-y-1">
+                                        <div>开始: {formatDurationWithMs(segmentProps.target_timerange.start)}</div>
+                                        <div>时长: {formatDurationWithMs(segmentProps.target_timerange.duration)}</div>
+                                        <div>结束: {formatDurationWithMs(segmentProps.target_timerange.start + segmentProps.target_timerange.duration)}</div>
+                                      </div>
+                                    </div>
+                                  )}
+
+                                  {/* 源素材时间范围 */}
+                                  {segmentProps?.source_timerange && (
+                                    <div className="bg-purple-50 border border-purple-200 rounded-lg p-3">
+                                      <div className="text-sm font-medium text-purple-900 mb-2">源素材时间范围</div>
+                                      <div className="text-xs text-purple-700 space-y-1">
+                                        <div>开始位置: {formatDurationWithMs(segmentProps.source_timerange.start)}</div>
+                                        <div>截取时长: {formatDurationWithMs(segmentProps.source_timerange.duration)}</div>
+                                        <div>结束位置: {formatDurationWithMs(segmentProps.source_timerange.start + segmentProps.source_timerange.duration)}</div>
+                                      </div>
+                                    </div>
+                                  )}
+
+                                  {/* 播放属性 */}
+                                  {(segmentProps?.visible !== undefined || segmentProps?.volume !== undefined) && (
+                                    <div className="bg-green-50 border border-green-200 rounded-lg p-3">
+                                      <div className="text-sm font-medium text-green-900 mb-2">播放属性</div>
+                                      <div className="text-xs text-green-700 space-y-1">
+                                        {segmentProps?.visible !== undefined && (
+                                          <div>可见性: {segmentProps.visible ? '可见' : '隐藏'}</div>
+                                        )}
+                                        {segmentProps?.volume !== undefined && (
+                                          <div>音量: {(segmentProps.volume * 100).toFixed(0)}%</div>
+                                        )}
+                                      </div>
+                                    </div>
+                                  )}
+                                </div>
+                              )}
                             </div>
                           );
                         })}
@@ -574,10 +751,10 @@ export const TemplateDetailModal: React.FC<TemplateDetailModalProps> = ({
         </div>
 
         {/* 模态框底部 */}
-        <div className="flex items-center justify-end p-6 border-t border-gray-200">
+        <div className="flex items-center justify-end p-4 sm:p-6 border-t border-gray-200 bg-gray-50">
           <button
             onClick={onClose}
-            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors shadow-sm"
           >
             关闭
           </button>