diff --git a/Controllers/VideoController.cs b/Controllers/VideoController.cs
index 9155622..852bfd5 100644
--- a/Controllers/VideoController.cs
+++ b/Controllers/VideoController.cs
@@ -5,6 +5,7 @@ using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Newtonsoft.Json;
 using System.Drawing.Printing;
+using System.Threading.Tasks;
 
 namespace dy.net.Controllers
 {
@@ -53,28 +54,85 @@ namespace dy.net.Controllers
                 data
             });
         }
-        [AllowAnonymous]
-        [HttpGet]
-        public IActionResult Index()
+
+        /// <summary>
+        /// 播放视频
+        /// </summary>
+        /// <param name="vid"></param>
+        /// <returns></returns>
+        [HttpGet("play/{vid}")]
+        public async Task<IActionResult> StreamVideo([FromRoute] string vid)
         {
-            List<MyClass> myClasses = new List<MyClass>();
-            foreach (var drive in DriveInfo.GetDrives())
+            try
             {
-                myClasses.Add(new MyClass { name=drive.Name, x1= drive.TotalSize, x2= drive.TotalFreeSpace });
-                Serilog.Log.Debug($"Drive: {drive.Name}, Total Size: {drive.TotalSize}, Free Space: {drive.TotalFreeSpace}");
+                var viedo = await dyCollectVideoService.GetById(vid);
+
+                if(viedo == null)
+                {
+                    return NotFound($"视频不存在：{vid}");
+                }
+
+                // 1. 拼接完整物理路径（配置路径 + 文件名）
+                string videoFullPath = viedo.VideoSavePath;
+
+                // 2. 验证文件是否存在
+                if (!System.IO.File.Exists(videoFullPath))
+                {
+                    return NotFound($"视频文件不存在：{videoFullPath}");
+                }
+
+                // 3. 获取文件信息（大小、类型）
+                var fileInfo = new FileInfo(videoFullPath);
+                long fileSize = fileInfo.Length;
+                string contentType = GetContentType(videoFullPath);  // 自动识别视频 MIME 类型
+
+                // 4. 处理分片请求（前端视频标签自动发起，支持断点续传）
+                if (Request.Headers.ContainsKey("Range") && long.TryParse(Request.Headers.Range.ToString().Split('=')[1].Split('-')[0], out long start))
+                {
+                    // 分片起始位置（前端请求的起始字节）
+                    long end = Math.Min(start + 1024 * 1024 * 2, fileSize - 1);  // 每片 2MB（可调整）
+                    long chunkSize = end - start + 1;
+
+                    // 5. 设置分片响应头
+                    Response.StatusCode = StatusCodes.Status206PartialContent;
+                    Response.Headers.Add("Content-Range", $"bytes {start}-{end}/{fileSize}");
+                    Response.Headers.Add("Accept-Ranges", "bytes");
+                    Response.Headers.Add("Content-Length", chunkSize.ToString());
+
+                    // 6. 读取分片并返回流
+                    var stream = new FileStream(videoFullPath, FileMode.Open, FileAccess.Read, FileShare.Read, 4096, true);
+                    stream.Seek(start, SeekOrigin.Begin);
+                    return new FileStreamResult(stream, contentType);
+                }
+                else
+                {
+                    // 完整文件请求（兼容旧浏览器）
+                    return PhysicalFile(videoFullPath, contentType, enableRangeProcessing: true);
+                }
+            }
+            catch (Exception ex)
+            {
+                return StatusCode(500, $"视频加载失败：{ex.Message}");
             }
-            //var disk=DiskInfoHelper.GetDockerHostTotalDiskSpaceGB();
-            return Ok(JsonConvert.SerializeObject(myClasses)+"\r\n"+JsonConvert.SerializeObject(myClasses.Sum(x=>x.x1)+"\r\n"+ JsonConvert.SerializeObject(myClasses.Sum(x => x.x2))));
         }
 
-
-        public class MyClass
+        /// <summary>
+        /// 辅助方法：根据文件名获取 MIME 类型（确保前端正确识别视频格式）
+        /// </summary>
+        private string GetContentType(string filename)
         {
-            public string name { get; set; }
-
-            public long x1 { get; set; }
-
-            public long x2 { get; set; }
+            string extension = Path.GetExtension(filename).ToLowerInvariant();
+            return extension switch
+            {
+                ".mp4" => "video/mp4",
+                ".webm" => "video/webm",
+                ".ogg" => "video/ogg",
+                ".mov" => "video/quicktime",
+                ".avi" => "video/x-msvideo",
+                _ => "application/octet-stream"  // 默认二进制流
+            };
         }
+
+
     }
 }
diff --git a/Program.cs b/Program.cs
index d334844..64b5bd6 100644
--- a/Program.cs
+++ b/Program.cs
@@ -177,6 +177,7 @@ ____/   _|_)_____/   _|  _| \_|\____|
             // API·��ӳ��
             app.MapControllers();
 
+            app.UseStaticFiles();
             // ������������SPA
             if (!environment.IsDevelopment())
             {
diff --git a/Properties/PublishProfiles/FolderProfile.pubxml.user b/Properties/PublishProfiles/FolderProfile.pubxml.user
index 17daa41..13be5d0 100644
--- a/Properties/PublishProfiles/FolderProfile.pubxml.user
+++ b/Properties/PublishProfiles/FolderProfile.pubxml.user
@@ -5,7 +5,7 @@ https://go.microsoft.com/fwlink/?LinkID=208121.
 <Project>
   <PropertyGroup>
     <_PublishTargetUrl>E:\code\dysync\bin\Release\net6.0\publish\</_PublishTargetUrl>
-    <History>True|2025-11-25T16:00:42.1507258Z||;True|2025-11-26T00:00:17.0107229+08:00||;True|2025-11-25T23:42:07.4349629+08:00||;False|2025-11-25T23:41:56.9328658+08:00||;True|2025-11-25T23:19:32.5262917+08:00||;True|2025-11-25T14:08:53.3850967+08:00||;True|2025-11-24T23:53:54.4283003+08:00||;True|2025-11-24T23:41:15.8248332+08:00||;True|2025-11-24T23:33:57.1844427+08:00||;True|2025-11-24T23:31:54.9228836+08:00||;True|2025-11-24T23:24:15.8681502+08:00||;True|2025-11-24T23:22:57.9046229+08:00||;True|2025-11-24T23:18:04.1131647+08:00||;True|2025-11-24T22:47:54.1336448+08:00||;True|2025-11-24T22:47:18.3613833+08:00||;True|2025-11-24T08:17:50.3994607+08:00||;True|2025-11-24T08:07:00.9951205+08:00||;True|2025-11-23T23:34:50.0030826+08:00||;True|2025-11-23T23:32:36.7452616+08:00||;True|2025-11-22T23:18:56.3202345+08:00||;True|2025-11-22T22:52:51.7203302+08:00||;True|2025-11-22T22:52:42.9620946+08:00||;True|2025-11-22T22:52:09.8257640+08:00||;True|2025-11-22T22:39:31.5894141+08:00||;True|2025-11-22T22:31:11.0704815+08:00||;True|2025-11-22T22:20:36.4579131+08:00||;True|2025-11-22T22:19:10.2281364+08:00||;True|2025-11-22T19:34:45.9336901+08:00||;True|2025-11-12T23:06:38.7834109+08:00||;False|2025-11-12T23:01:02.2269478+08:00||;True|2025-10-22T22:08:11.6423148+08:00||;True|2025-10-22T21:54:24.7180547+08:00||;True|2025-10-22T21:40:03.5194315+08:00||;True|2025-10-22T21:28:28.8962766+08:00||;True|2025-10-22T21:22:47.9631689+08:00||;True|2025-10-22T21:18:24.5274318+08:00||;True|2025-10-22T21:14:51.6386326+08:00||;False|2025-10-22T21:14:07.6282769+08:00||;True|2025-10-22T21:03:48.9892860+08:00||;True|2025-10-22T21:00:56.3617243+08:00||;False|2025-10-22T21:00:30.5472941+08:00||;True|2025-10-22T20:51:29.6155916+08:00||;False|2025-10-22T20:50:47.1882956+08:00||;True|2025-10-22T15:01:04.1668366+08:00||;True|2025-10-22T14:49:43.6340569+08:00||;True|2025-10-22T14:38:39.4685603+08:00||;True|2025-10-21T18:35:28.8392541+08:00||;True|2025-10-20T10:31:05.5865212+08:00||;True|2025-10-20T10:20:41.5717101+08:00||;True|2025-10-19T10:08:33.6669332+08:00||;False|2025-10-19T10:07:22.3337545+08:00||;False|2025-10-19T10:05:22.9484805+08:00||;True|2025-10-10T16:54:27.1472888+08:00||;False|2025-10-10T16:53:44.1700030+08:00||;False|2025-10-10T16:52:48.1740453+08:00||;False|2025-10-10T16:51:21.5067253+08:00||;False|2025-10-10T16:50:19.2140597+08:00||;False|2025-10-10T16:49:21.2213290+08:00||;False|2025-10-10T16:48:47.7229948+08:00||;False|2025-10-10T16:48:15.1258700+08:00||;True|2025-09-30T13:29:42.2354235+08:00||;True|2025-09-25T11:44:52.6858389+08:00||;True|2025-09-25T11:08:27.8810109+08:00||;True|2025-09-25T09:28:50.2563374+08:00||;True|2025-09-24T16:14:02.3072184+08:00||;True|2025-09-23T22:38:52.4414757+08:00||;True|2025-09-23T22:19:07.1006356+08:00||;True|2025-09-23T22:18:01.5945225+08:00||;True|2025-09-23T22:06:15.6293613+08:00||;True|2025-09-23T21:53:14.2977444+08:00||;True|2025-09-23T21:46:55.2322411+08:00||;False|2025-09-23T21:45:23.7858854+08:00||;False|2025-09-23T21:03:51.8325689+08:00||;True|2025-09-23T10:03:32.2251920+08:00||;False|2025-09-23T09:38:08.2372201+08:00||;False|2025-09-23T09:37:49.9390545+08:00||;True|2024-03-11T21:31:45.8102398+08:00||;True|2024-03-11T07:26:24.7660541+08:00||;True|2024-03-08T22:08:40.0154831+08:00||;True|2024-03-03T10:14:36.8109114+08:00||;True|2024-03-02T18:44:57.3288537+08:00||;True|2024-01-24T17:51:37.9164415+08:00||;True|2024-01-24T16:36:50.5612157+08:00||;True|2024-01-24T15:51:35.7556653+08:00||;True|2024-01-17T23:40:40.7526618+08:00||;True|2024-01-17T23:36:10.3692844+08:00||;True|2024-01-17T23:22:03.2378834+08:00||;True|2024-01-03T11:35:44.7118292+08:00||;True|2024-01-03T11:11:23.4270453+08:00||;True|2024-01-03T11:04:35.2081526+08:00||;True|2024-01-03T10:57:03.7053107+08:00||;True|2024-01-03T10:51:50.7463989+08:00||;False|2024-01-03T10:50:24.9775312+08:00||;True|2024-01-03T10:47:30.1128183+08:00||;True|2024-01-03T10:42:55.8640657+08:00||;True|2024-01-03T09:24:24.3436056+08:00||;True|2024-01-02T23:40:38.2001198+08:00||;True|2024-01-02T23:08:36.7230444+08:00||;True|2024-01-02T22:53:43.9658255+08:00||;True|2024-01-02T22:25:38.5545279+08:00||;</History>
+    <History>True|2025-11-26T15:48:02.3957186Z||;True|2025-11-26T23:43:06.8154188+08:00||;False|2025-11-26T23:42:05.9191485+08:00||;True|2025-11-26T23:30:11.1295861+08:00||;True|2025-11-26T00:00:42.1507258+08:00||;True|2025-11-26T00:00:17.0107229+08:00||;True|2025-11-25T23:42:07.4349629+08:00||;False|2025-11-25T23:41:56.9328658+08:00||;True|2025-11-25T23:19:32.5262917+08:00||;True|2025-11-25T14:08:53.3850967+08:00||;True|2025-11-24T23:53:54.4283003+08:00||;True|2025-11-24T23:41:15.8248332+08:00||;True|2025-11-24T23:33:57.1844427+08:00||;True|2025-11-24T23:31:54.9228836+08:00||;True|2025-11-24T23:24:15.8681502+08:00||;True|2025-11-24T23:22:57.9046229+08:00||;True|2025-11-24T23:18:04.1131647+08:00||;True|2025-11-24T22:47:54.1336448+08:00||;True|2025-11-24T22:47:18.3613833+08:00||;True|2025-11-24T08:17:50.3994607+08:00||;True|2025-11-24T08:07:00.9951205+08:00||;True|2025-11-23T23:34:50.0030826+08:00||;True|2025-11-23T23:32:36.7452616+08:00||;True|2025-11-22T23:18:56.3202345+08:00||;True|2025-11-22T22:52:51.7203302+08:00||;True|2025-11-22T22:52:42.9620946+08:00||;True|2025-11-22T22:52:09.8257640+08:00||;True|2025-11-22T22:39:31.5894141+08:00||;True|2025-11-22T22:31:11.0704815+08:00||;True|2025-11-22T22:20:36.4579131+08:00||;True|2025-11-22T22:19:10.2281364+08:00||;True|2025-11-22T19:34:45.9336901+08:00||;True|2025-11-12T23:06:38.7834109+08:00||;False|2025-11-12T23:01:02.2269478+08:00||;True|2025-10-22T22:08:11.6423148+08:00||;True|2025-10-22T21:54:24.7180547+08:00||;True|2025-10-22T21:40:03.5194315+08:00||;True|2025-10-22T21:28:28.8962766+08:00||;True|2025-10-22T21:22:47.9631689+08:00||;True|2025-10-22T21:18:24.5274318+08:00||;True|2025-10-22T21:14:51.6386326+08:00||;False|2025-10-22T21:14:07.6282769+08:00||;True|2025-10-22T21:03:48.9892860+08:00||;True|2025-10-22T21:00:56.3617243+08:00||;False|2025-10-22T21:00:30.5472941+08:00||;True|2025-10-22T20:51:29.6155916+08:00||;False|2025-10-22T20:50:47.1882956+08:00||;True|2025-10-22T15:01:04.1668366+08:00||;True|2025-10-22T14:49:43.6340569+08:00||;True|2025-10-22T14:38:39.4685603+08:00||;True|2025-10-21T18:35:28.8392541+08:00||;True|2025-10-20T10:31:05.5865212+08:00||;True|2025-10-20T10:20:41.5717101+08:00||;True|2025-10-19T10:08:33.6669332+08:00||;False|2025-10-19T10:07:22.3337545+08:00||;False|2025-10-19T10:05:22.9484805+08:00||;True|2025-10-10T16:54:27.1472888+08:00||;False|2025-10-10T16:53:44.1700030+08:00||;False|2025-10-10T16:52:48.1740453+08:00||;False|2025-10-10T16:51:21.5067253+08:00||;False|2025-10-10T16:50:19.2140597+08:00||;False|2025-10-10T16:49:21.2213290+08:00||;False|2025-10-10T16:48:47.7229948+08:00||;False|2025-10-10T16:48:15.1258700+08:00||;True|2025-09-30T13:29:42.2354235+08:00||;True|2025-09-25T11:44:52.6858389+08:00||;True|2025-09-25T11:08:27.8810109+08:00||;True|2025-09-25T09:28:50.2563374+08:00||;True|2025-09-24T16:14:02.3072184+08:00||;True|2025-09-23T22:38:52.4414757+08:00||;True|2025-09-23T22:19:07.1006356+08:00||;True|2025-09-23T22:18:01.5945225+08:00||;True|2025-09-23T22:06:15.6293613+08:00||;True|2025-09-23T21:53:14.2977444+08:00||;True|2025-09-23T21:46:55.2322411+08:00||;False|2025-09-23T21:45:23.7858854+08:00||;False|2025-09-23T21:03:51.8325689+08:00||;True|2025-09-23T10:03:32.2251920+08:00||;False|2025-09-23T09:38:08.2372201+08:00||;False|2025-09-23T09:37:49.9390545+08:00||;True|2024-03-11T21:31:45.8102398+08:00||;True|2024-03-11T07:26:24.7660541+08:00||;True|2024-03-08T22:08:40.0154831+08:00||;True|2024-03-03T10:14:36.8109114+08:00||;True|2024-03-02T18:44:57.3288537+08:00||;True|2024-01-24T17:51:37.9164415+08:00||;True|2024-01-24T16:36:50.5612157+08:00||;True|2024-01-24T15:51:35.7556653+08:00||;True|2024-01-17T23:40:40.7526618+08:00||;True|2024-01-17T23:36:10.3692844+08:00||;True|2024-01-17T23:22:03.2378834+08:00||;True|2024-01-03T11:35:44.7118292+08:00||;True|2024-01-03T11:11:23.4270453+08:00||;True|2024-01-03T11:04:35.2081526+08:00||;True|2024-01-03T10:57:03.7053107+08:00||;True|2024-01-03T10:51:50.7463989+08:00||;False|2024-01-03T10:50:24.9775312+08:00||;True|2024-01-03T10:47:30.1128183+08:00||;True|2024-01-03T10:42:55.8640657+08:00||;True|2024-01-03T09:24:24.3436056+08:00||;</History>
     <LastFailureDetails />
   </PropertyGroup>
 </Project>
\ No newline at end of file
diff --git a/app/.env b/app/.env
index adce5e5..8d1c6ac 100644
--- a/app/.env
+++ b/app/.env
@@ -1,2 +1,2 @@
 VITE_BASE_URL=/
-VITE_API_URL=http://localhost
+VITE_API_URL=/
diff --git a/app/src/pages/workplace/RecordTable.vue b/app/src/pages/workplace/RecordTable.vue
index 5d267e7..1301dd9 100644
--- a/app/src/pages/workplace/RecordTable.vue
+++ b/app/src/pages/workplace/RecordTable.vue
@@ -19,9 +19,7 @@
       <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
         <a-space>
           <a-button type="primary" @click="GetRecords">查询</a-button>
-          <!-- 核心修改点：绑定 disabled 属性 -->
           <a-button type="danger" @click="StartNow" :disabled="isSyncing">
-            <!-- 可选：添加加载状态提示 -->
             <template #icon>
               <a-spin v-if="isSyncing" size="small" />
             </template>
@@ -30,24 +28,98 @@
         </a-space>
       </a-form-item>
     </a-form>
+
+    <!-- 视频播放弹窗 - 简化视频信息 + 优化样式 -->
+    <a-modal v-model:visible="isModalOpen" :title="playingTitle" :width="900" :mask-closable="false" :footer="null" @cancel="handleCancel" :body-style="{ padding: '0', overflow: 'hidden', backgroundColor: '#fff' }" :style="{ 
+    borderRadius: '8px',
+    maxWidth: '85vw', // 最大宽度不超过视口85%（防止超屏）
+    maxHeight: '80vh', // 最大高度不超过视口80%
+    minWidth: '500px', // 最小宽度兜底（避免过小）
+    minHeight: '380px'  // 最小高度兜底
+  }" :mask-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }">
+      <!-- 视频容器：增加加载遮罩层 -->
+      <div class="video-container">
+        <!-- 加载遮罩层 - 视频加载中显示 -->
+        <div v-if="isVideoLoading" class="loading-overlay">
+          <a-spin size="large" tip="视频加载中..." />
+          <p class="loading-tip">请稍候，正在为您准备视频...</p>
+        </div>
+
+        <!-- 错误提示 - 视频加载失败显示 -->
+        <div v-else-if="hasError" class="error-container">
+          <a-alert type="error" showIcon :message="errorMessage" description="建议尝试：1. 检查网络连接 2. 刷新页面重试 3. 联系管理员" />
+        </div>
+
+        <!-- 视频播放器：添加尺寸限制和比例保持 -->
+        <video ref="videoRef" class="video-element" controls preload="metadata" :autoplay="autoPlay" :muted="autoMuted" @error="handleVideoError" @loadeddata="() => isVideoLoading = false" @waiting="() => isVideoLoading = true" @canplay="() => isVideoLoading = false" :style="{ opacity: isVideoLoading || hasError ? 0 : 1, transition: 'opacity 0.3s ease' }">
+          <source :src="videoUrl" type="video/mp4" />
+          您的浏览器不支持 HTML5 视频播放，请升级浏览器。
+        </video>
+      </div>
+
+      <!-- 视频信息栏：仅保留同步时间和视频类型 + 优化样式 -->
+      <div v-if="currentVideoInfo" class="video-info-bar">
+        <div class="info-container">
+          <div class="info-item">
+            <span class="info-label">同步时间：</span>
+            <span class="info-value">{{ currentVideoInfo.syncTimeStr || '未知' }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">视频类型：</span>
+            <span class="info-value">{{ currentVideoInfo.viedoCate || '未知' }}</span>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 表格：视频标题超长省略 + 悬停显示完整标题（修复编译报错） -->
     <a-table :columns="columns" :data-source="dataSource" bordered :pagination="pagination" @change="handleTableChange" :loading="loading">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'videoTitle'">
+          <!-- 核心修复：将内联箭头函数改为方法调用，避免build报错 -->
+          <a class="video-title-link" :title="record.videoTitle || '无标题'" @click="handleVideoClick(record)" @mouseenter="handleTitleMouseEnter" @mouseleave="handleTitleMouseLeave">
+            {{ formatVideoTitle(record.videoTitle) }}
+          </a>
+        </template>
+      </template>
     </a-table>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, reactive, ref } from 'vue';
+import { reactive, ref, onMounted, nextTick, watch } from 'vue';
 import { useApiStore } from '@/store';
 import type { UnwrapRef } from 'vue';
-import { onMounted } from 'vue';
 import dayjs, { Dayjs } from 'dayjs';
 import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
-import { message, Spin } from 'ant-design-vue'; // 引入 Spin 用于显示加载图标
+import { message, Spin, Alert } from 'ant-design-vue';
+
+// 类型定义
 type RangeValue = [Dayjs, Dayjs];
+interface DataItem {
+  id?: string; // 视频ID（后端返回的字段，用于拼接播放地址）
+  videoTitle?: string; // 视频标题
+  syncTimeStr?: string; // 同步时间
+  viedoTypeStr?: string; // 同步类型
+  author?: string; // 博主
+  viedoCate?: string; // 视频类型
+  dyUser?: string; // CK名称
+}
+
+interface QuaryParam {
+  dates?: string[];
+  pageIndex: number;
+  pageSize: number;
+  author: string;
+  tag: string;
+  viedoType: string;
+}
+
+// 引入dayjs中文包
 import 'dayjs/locale/zh-cn';
 dayjs.locale('zh-cn');
 
-// ... (columns, loading, DataItem, datas, showImageViedo, QuaryParam, value1, ranges, quaryData 的定义保持不变)
+// 表格列配置
 const columns = ref([
   {
     title: '同步时间',
@@ -77,6 +149,7 @@ const columns = ref([
     title: '视频标题',
     dataIndex: 'videoTitle',
     align: 'left',
+    width: 350, // 确保标题单元格有足够宽度
   },
   {
     title: 'CK名称',
@@ -85,26 +158,20 @@ const columns = ref([
     width: 200,
   },
 ]);
+
+// 基础状态
 const loading = ref(false);
-interface DataItem {}
 const datas: UnwrapRef<DataItem[]> = reactive([]);
 const showImageViedo = ref(false);
-interface QuaryParam {
-  dates?: string[];
-  pageIndex: number;
-  pageSize: number;
-  author: string;
-  tag: string;
-  viedoType: string;
-}
+const dataSource = ref(datas);
 
+// 查询参数
 const value1 = ref<RangeValue>();
 const ranges = {
   今天: [dayjs(), dayjs()] as RangeValue,
   本月: [dayjs(), dayjs().endOf('month')] as RangeValue,
 };
 const quaryData: UnwrapRef<QuaryParam> = reactive({
-  datas: [],
   pageIndex: 0,
   pageSize: 20,
   author: '',
@@ -112,10 +179,71 @@ const quaryData: UnwrapRef<QuaryParam> = reactive({
   viedoType: '*',
 });
 
+// 分页配置
+const pagination = ref({
+  current: 1,
+  defaultPageSize: 10,
+  total: 0,
+  showTotal: () => `共 ${0} 条`,
+});
+
+// 视频播放相关配置
+const DEFAULT_LOW_VOLUME = 0.3; // 默认低音量（与示例一致）
+// 视频播放相关状态
+const isVideoLoading = ref(false); // 视频加载状态（控制加载动画显示）
+const videoErrorMsg = ref(''); // 视频错误提示
+const isSyncing = ref(false);
+
+// 当前播放视频信息
+const currentVideoInfo = ref<DataItem | null>(null);
+
+// 状态管理（视频弹窗相关）
+const isModalOpen = ref(false); // 弹窗显示状态
+const videoRef = ref(null); // 视频元素引用
+const videoUrl = ref(''); // 当前播放视频地址
+const hasError = ref(false); // 错误状态
+const errorMessage = ref(''); // 错误信息
+const autoPlay = ref(true); // 弹窗打开自动播放
+const autoMuted = ref(true); // 自动播放时静音（浏览器政策要求）
+const videoId = ref('');
+const playingTitle = ref('');
+
+// -------------------------- 核心方法：标题格式化 --------------------------
+/** 格式化表格视频标题：超过20字符显示省略号 */
+const formatVideoTitle = (title?: string) => {
+  if (!title) return '无标题';
+  return title.length > 20 ? `${title.slice(0, 20)}...` : title;
+};
+
+/** 格式化弹窗标题：超过40字符显示省略号 */
+const formatModalTitle = (title?: string) => {
+  if (!title) return '视频播放';
+  return title.length > 40 ? `${title.slice(0, 40)}...` : title;
+};
+
+/** 标题鼠标进入事件：添加下划线 */
+const handleTitleMouseEnter = (e: Event) => {
+  const target = e.target as HTMLElement;
+  target.style.textDecoration = 'underline';
+};
+
+/** 标题鼠标离开事件：移除下划线 */
+const handleTitleMouseLeave = (e: Event) => {
+  const target = e.target as HTMLElement;
+  target.style.textDecoration = 'none';
+};
+// ----------------------------------------------------------------------------------
+
+// 查询表格数据
 const GetRecords = () => {
   loading.value = true;
   quaryData.pageIndex = pagination.value.current;
   quaryData.pageSize = pagination.value.defaultPageSize;
+
+  if (value1.value) {
+    quaryData.dates = value1.value.map((date) => date.format('YYYY-MM-DD'));
+  }
+
   useApiStore()
     .VideoPageList(quaryData)
     .then((res) => {
@@ -126,22 +254,57 @@ const GetRecords = () => {
         pagination.value.defaultPageSize = res.data.pageSize;
         pagination.value.total = res.data.total;
         pagination.value.showTotal = () => `共 ${res.data.total} 条`;
+      } else {
+        message.warning(res.message || '获取数据失败');
       }
+    })
+    .catch((error) => {
+      loading.value = false;
+      console.error('获取表格数据失败:', error);
+      message.error('获取数据失败，请稍后重试');
     });
 };
 
-onMounted(() => {
+// 立即同步
+const StartNow = () => {
+  if (isSyncing.value) return;
+
+  message.success('请耐心等待，同步任务正在启动...');
+  isSyncing.value = true;
+
+  useApiStore()
+    .StartJobNow()
+    .then((res) => {
+      if (res.code === 0) {
+        message.success('同步任务启动成功！');
+        GetRecords();
+      } else {
+        message.error(`同步任务启动失败: ${res.message || '未知错误'}`);
+      }
+    })
+    .catch((error) => {
+      console.error('同步任务API调用失败:', error);
+      message.error('同步任务启动失败，请检查网络或联系管理员');
+    })
+    .finally(() => {
+      isSyncing.value = false;
+    });
+};
+
+// 日期选择器变化事件
+const datePicked = (_, dateArry: RangeValue) => {
+  quaryData.dates = dateArry.map((date) => date.format('YYYY-MM-DD'));
+  console.log('选择的日期范围:', quaryData.dates);
+};
+
+// 表格分页变化事件
+const handleTableChange = (paginationObj: any) => {
+  pagination.value.current = paginationObj.current;
+  pagination.value.defaultPageSize = paginationObj.pageSize;
   GetRecords();
-  getConfig(); // 在 onMounted 中调用 getConfig
-});
-
-const pagination = ref({
-  current: 1,
-  defaultPageSize: 10,
-  total: 0,
-  showTotal: () => `共 ${0} 条`,
-});
+};
 
+// 获取配置
 const getConfig = () => {
   useApiStore()
     .apiGetConfig()
@@ -149,67 +312,372 @@ const getConfig = () => {
       if (res.code === 0) {
         showImageViedo.value = res.data.downImageVideoFromEnv;
       } else {
-        // 可以在这里添加配置获取失败的处理
+        message.warning(`获取配置失败: ${res.message}`);
       }
     })
     .catch((error) => {
       console.error('获取配置失败:', error);
+      message.error('获取配置失败，请稍后重试');
     });
 };
 
-const handleTableChange = (e) => {
-  pagination.value.current = e.current;
-  pagination.value.defaultPageSize = e.defaultPageSize;
-  // 通常 total 是由后端返回的，这里不需要手动设置
-  GetRecords();
-};
-
-// 核心修改点：添加一个 ref 来控制按钮状态
-const isSyncing = ref(false);
-
-const StartNow = () => {
-  // 如果正在同步中，则直接返回，防止重复点击
-  if (isSyncing.value) {
+// 视频点击事件处理 - 核心修改：使用formatModalTitle处理弹窗标题长度
+const handleVideoClick = (record: DataItem) => {
+  if (!record.id) {
+    message.warning('该视频暂无播放地址');
     return;
   }
-
-  message.success('请耐心等待，同步任务正在启动...');
-  isSyncing.value = true; // 开始同步，禁用按钮
-
-  useApiStore()
-    .StartJobNow()
-    .then((res) => {
-      // 根据后端返回的状态码判断是否真正成功
-      if (res.code === 0) {
-        message.success('同步任务启动成功！');
-      } else {
-        message.error(`同步任务启动失败: ${res.message || '未知错误'}`);
-      }
-    })
-    .catch((error) => {
-      console.error('同步任务API调用失败:', error);
-      message.error('同步任务启动失败，请检查网络或联系管理员。');
-    })
-    .finally(() => {
-      isSyncing.value = false; // 无论成功失败，都恢复按钮状态
-    });
+  // 保存当前视频信息
+  currentVideoInfo.value = record;
+  videoId.value = record.id;
+  // 弹窗标题显示格式化后的标题（超过40字符显示省略号）
+  playingTitle.value = formatModalTitle(record.videoTitle);
+  isModalOpen.value = true;
+  // 显示加载状态
+  isVideoLoading.value = true;
+  // 重置错误状态
+  hasError.value = false;
 };
 
-const datePicked = (ref, dateArry) => {
-  // 注意：dateArry 是 Dayjs 对象数组，如果后端需要字符串，需要格式化
-  // quaryData.dates = dateArry.map(date => date.format('YYYY-MM-DD'));
-  quaryData.dates = dateArry;
-  console.log(dateArry);
+// 监听弹窗状态，加载默认视频
+watch(
+  isModalOpen,
+  (isOpen) => {
+    if (isOpen) {
+      loadVideo();
+    } else {
+      pauseVideo();
+      // 关闭弹窗时重置状态
+      currentVideoInfo.value = null;
+      videoUrl.value = '';
+      isVideoLoading.value = false; // 重置加载状态
+    }
+  },
+  { immediate: false }
+);
+
+// 关闭弹窗
+const handleCancel = () => {
+  isModalOpen.value = false;
 };
 
-const dataSource = ref(datas);
+// 加载视频
+const loadVideo = () => {
+  hasError.value = false;
+  isVideoLoading.value = true; // 开始加载，显示加载动画
 
-const onViedoTypeChanged = (e) => {
-  quaryData.viedoType = e.target.value;
-  pagination.value.current = 1; // 切换类型后，重置页码到第一页
+  // 拼接后端视频接口地址（对应 VideoController 的 StreamVideo 方法）
+  videoUrl.value = `${import.meta.env.VITE_API_URL}api/Video/play/${videoId.value}`;
+
+  // 重新加载视频（解决切换视频不刷新的问题）
+  nextTick(() => {
+    if (videoRef.value) {
+      // 监听视频加载进度
+      videoRef.value.addEventListener('progress', handleVideoProgress);
+      videoRef.value.load();
+    }
+  });
+};
+
+// 视频加载进度处理（可选：显示加载百分比）
+const handleVideoProgress = (e: Event) => {
+  const video = e.target as HTMLVideoElement;
+  if (video.buffered.length > 0) {
+    const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+    const duration = video.duration;
+    // 当缓冲达到总时长的90%以上时，可以提前隐藏加载动画
+    if (duration > 0 && bufferedEnd / duration > 0.9) {
+      isVideoLoading.value = false;
+      video.removeEventListener('progress', handleVideoProgress);
+    }
+  }
+};
+
+// 暂停视频
+const pauseVideo = () => {
+  if (videoRef.value) {
+    (videoRef.value as HTMLVideoElement).pause();
+    (videoRef.value as HTMLVideoElement).removeEventListener('progress', handleVideoProgress); // 移除进度监听
+  }
+};
+
+// 视频错误处理
+const handleVideoError = (e: Event) => {
+  hasError.value = true;
+  const video = e.target as HTMLVideoElement;
+  const errorCode = video.error?.code;
+
+  // 错误码映射（参考 HTML5 视频错误标准）
+  const errorMap: Record<number, string> = {
+    1: '视频加载中断',
+    2: '网络错误（跨域未配置/后端服务未启动/接口不可用）',
+    3: '视频解码失败（格式不支持或文件损坏）',
+    4: '视频格式不支持',
+    5: '视频文件不存在或后端权限不足',
+  };
+
+  errorMessage.value = `加载失败：${errorMap[errorCode as number] || '未知错误'}（视频ID：${videoId.value}）`;
+  isVideoLoading.value = false; // 错误时隐藏加载态
+  console.error('视频播放错误详情：', video.error);
+};
+
+// 修复缺失的方法
+const onViedoTypeChanged = () => {
+  // 可根据需要添加类型切换后的逻辑
+};
+
+// 页面挂载时初始化
+onMounted(() => {
   GetRecords();
-};
+  getConfig();
+});
 </script>
 
-<style scoped>
+<style>
+/* 视频容器样式 - 与表格风格统一 */
+.video-container {
+  position: relative;
+  border-bottom: 1px solid #e8e8e8; /* 与表格边框一致 */
+  overflow: hidden;
+  max-height: 420px;
+}
+
+/* 视频播放器样式 - 优化响应式和过渡效果 */
+.video-element {
+  width: 100%;
+  height: auto;
+  max-height: 420px;
+  min-height: 250px;
+  background-color: #000; /* 加载时显示黑色背景，提升体验 */
+  object-fit: contain; /* 保持视频比例，不拉伸 */
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
+
+/* 加载遮罩层 - 优化居中效果和样式 */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景，突出加载动画 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: all 0.3s ease;
+}
+
+/* 加载提示文字样式 */
+.loading-tip {
+  color: #ffffff;
+  font-size: 16px;
+  margin-top: 20px;
+  text-align: center;
+  padding: 0 20px;
+}
+
+/* 错误容器样式（优化错误显示） */
+.error-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background-color: #fff;
+}
+
+/* 视频信息栏：简化样式 + 优化布局 */
+.video-info-bar {
+  padding: 16px 24px;
+  background: #f8f9fa; /* 淡灰色背景，更清爽 */
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.info-container {
+  display: flex;
+  gap: 40px; /* 两个信息项之间的间距 */
+  align-items: center;
+  flex-wrap: wrap; /* 响应式适配，小屏幕自动换行 */
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.info-label {
+  color: #666666; /* 标签深灰色，更醒目 */
+  margin-right: 8px;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.info-value {
+  color: #333333; /* 数值深色，保证可读性 */
+  white-space: nowrap;
+}
+
+/* 视频标题链接样式（统一提取到CSS，避免内联样式冲突） */
+.video-title-link {
+  color: #1890ff;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 弹窗标题样式优化：确保超长时不会撑破弹窗 */
+:deep(.ant-modal-title) {
+  font-size: 16px !important;
+  font-weight: 500 !important;
+  color: #1f2937 !important;
+  line-height: 1.5 !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: calc(100% - 40px) !important; /* 预留关闭按钮空间 */
+}
+
+/* 弹窗样式深度优化 - 与主风格完全统一 */
+:deep(.ant-modal) {
+  border-radius: 8px !important;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1) !important; /* Ant Design标准阴影 */
+  overflow: hidden !important;
+  max-width: 85vw !important; /* 最大宽度不超过视口85% */
+  max-height: 80vh !important; /* 最大高度不超过视口80% */
+  min-width: 500px !important; /* 最小宽度兜底 */
+  min-height: 380px !important; /* 最小高度兜底 */
+  width: 900px !important;
+}
+
+:deep(.ant-modal-header) {
+  border-bottom: 1px solid #e8e8e8 !important;
+  padding: 16px 24px !important;
+  border-radius: 8px 8px 0 0 !important;
+  background-color: #fff !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+}
+
+:deep(.ant-modal-close) {
+  color: #8c8c8c !important;
+  transition: all 0.2s ease !important;
+  width: 40px !important;
+  height: 40px !important;
+  border-radius: 50% !important;
+  flex-shrink: 0 !important;
+}
+
+:deep(.ant-modal-close:hover) {
+  color: #1890ff !important;
+  background-color: #f0f9ff !important; /* 与Ant Design按钮hover背景一致 */
+}
+
+:deep(.ant-modal-content) {
+  border-radius: 8px !important;
+  overflow: hidden !important;
+}
+
+:deep(.ant-modal-mask) {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  backdrop-filter: blur(2px) !important; /* 增加毛玻璃效果，提升质感 */
+}
+
+/* 加载组件样式优化 - 与Ant Design统一 */
+:deep(.ant-spin-dot) {
+  color: #1890ff !important;
+  font-size: 36px !important; /* 放大加载动画，更醒目 */
+}
+
+:deep(.ant-spin-tip) {
+  color: #ffffff !important; /* 加载提示文字白色，与深色背景对比 */
+  font-size: 16px !important;
+  margin-top: 20px !important;
+}
+
+/* 错误提示样式优化 - 与Ant Design警告组件统一 */
+:deep(.ant-alert-error) {
+  border: none !important;
+  background-color: #fff2f0 !important;
+  color: #ff4d4f !important;
+  padding: 12px 16px !important;
+  width: 100%;
+  max-width: 600px;
+}
+
+:deep(.ant-alert-icon) {
+  color: #ff4d4f !important;
+  font-size: 16px !important;
+  margin-right: 8px !important;
+}
+
+/* 表格单元格 hover 效果保持一致 */
+:deep(.ant-table-tbody tr:hover td) {
+  background-color: #fafafa !important;
+}
+
+/* 响应式优化：保持各屏幕尺寸下的一致性 */
+@media (max-width: 1200px) {
+  .video-element {
+    max-height: 380px;
+  }
+}
+
+@media (max-width: 768px) {
+  .video-element {
+    max-height: 300px;
+  }
+  .info-container {
+    gap: 20px;
+  }
+  :deep(.ant-modal) {
+    width: 95% !important;
+    min-width: 320px !important;
+    min-height: 320px !important;
+  }
+  /* 移动端弹窗标题适配 */
+  :deep(.ant-modal-title) {
+    max-width: calc(100% - 30px) !important;
+    font-size: 15px !important;
+  }
+  /* 移动端加载动画适配 */
+  :deep(.ant-spin-dot) {
+    font-size: 28px !important;
+  }
+  .loading-tip {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 480px) {
+  .video-element {
+    min-height: 220px;
+  }
+  .video-info-bar {
+    padding: 12px 16px;
+  }
+  .info-container {
+    gap: 12px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  /* 移动端弹窗标题适配 */
+  :deep(.ant-modal-title) {
+    max-width: calc(100% - 25px) !important;
+    font-size: 14px !important;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/app/src/store/coreapi.ts b/app/src/store/coreapi.ts
index c5bf1c4..7f963b1 100644
--- a/app/src/store/coreapi.ts
+++ b/app/src/store/coreapi.ts
@@ -162,8 +162,16 @@ export const useApiStore = defineStore('coreapi', () => {
 
     });
   }
+  // async function playViedo(id: string) {
+  //   return http.request<any, Response<any>>('/api/video/play/' + id, 'get').then(r => {
+  //     return r.data;
+  //   }).finally(() => {
+
+  //   });
+  // }
 
   return {
+    // playViedo,
     deleteCookie,
     UpdateConfig,
     apiCheckInitStatus,
diff --git a/dy.net.csproj b/dy.net.csproj
index cc17d34..207e7fa 100644
--- a/dy.net.csproj
+++ b/dy.net.csproj
@@ -65,6 +65,7 @@
 
   <ItemGroup>
     <Folder Include="db\" />
+    <Folder Include="wwwroot\" />
 	  
   </ItemGroup>
 
diff --git a/service/DouyinVideoService.cs b/service/DouyinVideoService.cs
index 2f1cc11..611963b 100644
--- a/service/DouyinVideoService.cs
+++ b/service/DouyinVideoService.cs
@@ -112,6 +112,16 @@ namespace dy.net.service
             return await _dyCollectVideoRepository.GetUperLastViedoFileName(AuthorId, ViedoNameSimplify);
         }
 
+        /// <summary>
+        /// 根据ID获取视频信息
+        /// </summary>
+        /// <param name="id"></param>
+        /// <returns></returns>
+        public async Task<DouyinVideo> GetById(string id)
+        {
+            return await _dyCollectVideoRepository.GetByIdAsync(id);
+        }
+
     }
 
 
diff --git a/wwwroot/index.html b/wwwroot/index.html
new file mode 100644
index 0000000..6102c09
--- /dev/null
+++ b/wwwroot/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML 视频播放器（对接非 wwwroot 视频）</title>
+    <style>
+        body {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+
+        .video-container {
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+
+        video {
+            width: 100%;
+            max-width: 800px;
+            height: auto;
+            border-radius: 4px;
+        }
+
+        .video-list {
+            margin-top: 20px;
+            display: flex;
+            gap: 12px;
+        }
+
+        button {
+            padding: 10px 20px;
+            background: #42b983;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+            button:hover {
+                background: #359469;
+            }
+
+        .error-message {
+            margin-top: 15px;
+            color: #dc3545;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="video-container">
+        <video id="videoPlayer" controls preload="metadata" autoplay muted>
+            <source id="videoSource" type="video/mp4">
+            您的浏览器不支持 HTML5 视频播放，请升级浏览器。
+        </video>
+        <div id="errorMsg" class="error-message"></div>
+        <div class="video-list">
+            <button onclick="changeVideo()">播放视频 1</button>
+        </div>
+    </div>
+
+    <script>
+        // 1. 后端 API 基础地址（与 Program.cs 中 app.Run() 一致）
+        const BASE_URL = 'http://localhost:5025';
+
+        // 2. 视频接口 URL（对应后端 VideoController 的 StreamVideo 方法）
+        const getVideoUrl = () => `${BASE_URL}/api/Video/play/1993346988078411776`;
+
+        // 3. DOM 元素
+        const videoPlayer = document.getElementById('videoPlayer');
+        const videoSource = document.getElementById('videoSource');
+        const errorMsg = document.getElementById('errorMsg');
+
+        // 4. 初始加载视频
+        window.onload = () => changeVideo();
+
+        // 5. 切换视频
+        function changeVideo() {
+            errorMsg.style.display = 'none';
+            const videoUrl = getVideoUrl();
+            videoSource.src = videoUrl;
+            videoPlayer.load(); // 重新加载视频
+        }
+
+        // 6. 错误处理（文件不存在、权限不足、跨域等）
+        videoPlayer.onerror = (e) => {
+            const errorMap = {
+                1: '视频加载中断',
+                2: '网络错误（跨域未配置或后端服务未启动）',
+                3: '视频解码失败（格式不支持）',
+                4: '视频格式不支持',
+                5: '视频文件不存在或后端权限不足'
+            };
+            const errorText = errorMap[e.target.error.code] || '未知错误';
+            errorMsg.textContent = `加载失败：${errorText}（文件：${videoSource.src.split('/').pop()}）`;
+            errorMsg.style.display = 'block';
+            console.error('错误详情：', e.target.error);
+        };
+    </script>
+</body>
+</html>
\ No newline at end of file