From 6a78996b8a09090652104f4a5dd72c94d3e3f233 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Tue, 9 Dec 2025 12:50:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../danmaku/construct/batch_import.blade.php  | 108 +++++++---
 .../construct/append/copy_broadcast.blade.php | 109 +++++++----
 .../program/construct/append/create.blade.php | 184 ++++++++++++------
 .../program/construct/append/index.blade.php  |  52 ++++-
 .../program/construct/batch_add.blade.php     |  75 +++++--
 .../views/program/construct/create.blade.php  | 150 ++++++++++----
 .../views/program/construct/index.blade.php   | 180 ++++++++++-------
 .../program/construct/video/create.blade.php  | 167 ++++++++++------
 .../program/construct/video/index.blade.php   | 141 ++++++++------
 .../construct/video/manual_fix.blade.php      | 105 +++++++---
 .../construct/video/time_fix.blade.php        | 105 +++++++---
 resources/views/user/login.blade.php          |  99 +++++++---
 resources/views/user/register.blade.php       |  77 +++++---
 13 files changed, 1064 insertions(+), 488 deletions(-)
diff --git a/resources/views/danmaku/construct/batch_import.blade.php b/resources/views/danmaku/construct/batch_import.blade.php
index b03a2ea..93c1460 100644
--- a/resources/views/danmaku/construct/batch_import.blade.php
+++ b/resources/views/danmaku/construct/batch_import.blade.php
@@ -1,35 +1,93 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>弹幕导入</title>
+    <title>弹幕导入 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
     @include("common.header")
-    <form class="w-full lg:w-1/2 lg:ml-6 border-2" action="" method="post" enctype="multipart/form-data">
-        @csrf
-        <label class="block my-2">
-            BVID
-            <input class="form-input border-0 border-b-2 w-full" type="text" name="video_bvid" required value="{{ old('video_bvid') }}">
-        </label>
-        <label class="block my-2">
-            弹幕类型
-            <span class="block form-input border-0 border-b-2 w-full">
-                <input type="radio" value="1" name="platform_id" checked>B站
-                <input type="radio" value="2" name="platform_id" disabled>西瓜
-                <input type="radio" value="3" name="platform_id" disabled>抖音
-            </span>
-        </label>
-        <label class="block my-2">
-            弹幕文件
-            <input class="form-input border-0 border-b-2 w-full" multiple type="file" name="file[]" accept="text/xml">
-        </label>
-        @include("common.form_error")
-        <div class="block my-2 text-center">
-            <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit">
+    
+    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div class="max-w-3xl mx-auto">
+            <div class="md:flex md:items-center md:justify-between mb-8">
+                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+                    弹幕导入
+                </h1>
+                 <a href="{{ url()->previous() }}" class="mt-4 md:mt-0 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                    <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                    返回
+                </a>
+            </div>
+
+            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+                <form class="p-6 space-y-6" action="" method="post" enctype="multipart/form-data">
+                    @csrf
+                    
+                    <div>
+                        <label for="video_bvid" class="block text-sm font-medium text-gray-700 dark:text-gray-300">BVID</label>
+                        <input type="text" name="video_bvid" id="video_bvid" required value="{{ old('video_bvid') }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">弹幕类型</label>
+                        <div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
+                            <div class="flex items-center">
+                                <input id="platform_bilibili" name="platform_id" type="radio" value="1" checked 
+                                       class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 dark:bg-gray-700">
+                                <label for="platform_bilibili" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                    B站
+                                </label>
+                            </div>
+                            <div class="flex items-center opacity-50 cursor-not-allowed">
+                                <input id="platform_ixigua" name="platform_id" type="radio" value="2" disabled 
+                                       class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 dark:bg-gray-700">
+                                <label for="platform_ixigua" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                    西瓜 (暂未开放)
+                                </label>
+                            </div>
+                            <div class="flex items-center opacity-50 cursor-not-allowed">
+                                <input id="platform_douyin" name="platform_id" type="radio" value="3" disabled 
+                                       class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 dark:bg-gray-700">
+                                <label for="platform_douyin" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                    抖音 (暂未开放)
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">弹幕文件 (支持批量)</label>
+                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-md hover:border-indigo-500 transition-colors">
+                            <div class="space-y-1 text-center">
+                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                                <div class="flex text-sm text-gray-600 dark:text-gray-400">
+                                    <label for="file-upload" class="relative cursor-pointer bg-white dark:bg-gray-800 rounded-md font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                                        <span>上传文件</span>
+                                        <input id="file-upload" name="file[]" multiple type="file" accept="text/xml" class="sr-only" onchange="document.getElementById('file-count').innerText = this.files.length + ' 个文件已选择'">
+                                    </label>
+                                    <p class="pl-1">或拖拽文件到这里</p>
+                                </div>
+                                <p class="text-xs text-gray-500 dark:text-gray-500">XML 格式</p>
+                                <p class="text-sm text-indigo-600 font-medium" id="file-count"></p>
+                            </div>
+                        </div>
+                    </div>
+
+                    @include("common.form_error")
+
+                    <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+                        <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                            开始导入
+                        </button>
+                    </div>
+                </form>
+            </div>
         </div>
-    </form>
+    </main>
     @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/append/copy_broadcast.blade.php b/resources/views/program/construct/append/copy_broadcast.blade.php
index 85fc4ce..c3ff02f 100644
--- a/resources/views/program/construct/append/copy_broadcast.blade.php
+++ b/resources/views/program/construct/append/copy_broadcast.blade.php
@@ -1,52 +1,83 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目点播信息修改</title>
+    <title>复制常驻留言 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
     <script src="{{ mix('/js/manifest.js') }}" rel="script"></script>
     <link href="{{ asset('/css/vendor/picomplete/picomplete.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<form class="w-full lg:w-1/2 lg:ml-6 border-2" action="" method="post" enctype="multipart/form-data">
-    @if($program)
-        <label class="block my-2">
-            结束图像
-            @if(count($program->video_pivots) > 0 && $program->video_pivots->last()->stop_image)
-                <img src="{{$program->video_pivots->last()->stop_image}}" alt="结束图片">
-            @else
-                <div>
-                    <a href="{{route("program.construct.video.list", ["program"=>$program->id])}}"
-                       class="block px-6 py-2 inline-block rounded-full bg-cyan-600 text-white">
-                        去建设
-                    </a>
-                </div>
-            @endif
-        </label>
-    @endif
-    <div>
-        复制的常驻留言，请选择：
-        <br>
-        @foreach($broadcastList as $broadcast)
-            <label>
-                <input type="checkbox" name="ids[]" value="{{$broadcast->id}}">
-                【{{$broadcast->from}}】：{{$broadcast->name}}
-            </label>
-            <br>
-        @endforeach
-    </div>
-    @include("common.form_error")
-    @if(sizeof($broadcastList) <= 0)
-        <div class="block my-2 text-center">
-            无可复制内容
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-3xl mx-auto">
+        <div class="md:flex md:items-center md:justify-between mb-8">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+                复制常驻留言
+            </h1>
+            <a href="{{ route("program.construct.append.list", ["program"=>$program->id]) }}" class="mt-4 md:mt-0 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                返回列表
+            </a>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+            <form class="p-6 space-y-6" action="" method="post" enctype="multipart/form-data">
+                @csrf
+                
+                @if($program)
+                    <div class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 mb-6">
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">结束图像参考</label>
+                        @if(count($program->video_pivots) > 0 && $program->video_pivots->last()->stop_image)
+                            <img src="{{$program->video_pivots->last()->stop_image}}" alt="结束图片" class="h-32 w-auto object-cover rounded border border-gray-200 dark:border-gray-600">
+                        @else
+                            <div class="text-sm text-gray-500 italic">暂无图像</div>
+                            <a href="{{route("program.construct.video.list", ["program"=>$program->id])}}" class="mt-2 inline-flex items-center text-xs text-indigo-600 hover:text-indigo-900">去关联视频建设 &rarr;</a>
+                        @endif
+                    </div>
+                @endif
+
+                <div>
+                    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-4">选择要复制的留言</h3>
+                    
+                    @if(sizeof($broadcastList) <= 0)
+                        <div class="text-center py-8 text-gray-500 dark:text-gray-400">
+                            暂无可复制的内容
+                        </div>
+                    @else
+                        <div class="space-y-3 max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-md p-4">
+                            @foreach($broadcastList as $broadcast)
+                                <div class="relative flex items-start">
+                                    <div class="flex items-center h-5">
+                                        <input id="broadcast-{{$broadcast->id}}" name="ids[]" value="{{$broadcast->id}}" type="checkbox" 
+                                               class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
+                                    </div>
+                                    <div class="ml-3 text-sm">
+                                        <label for="broadcast-{{$broadcast->id}}" class="font-medium text-gray-700 dark:text-gray-300">
+                                            {{$broadcast->from}}
+                                        </label>
+                                        <p class="text-gray-500 dark:text-gray-400">{{$broadcast->name}}</p>
+                                    </div>
+                                </div>
+                            @endforeach
+                        </div>
+                    @endif
+                </div>
+
+                @include("common.form_error")
+
+                @if(sizeof($broadcastList) > 0)
+                    <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+                        <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                            确认复制
+                        </button>
+                    </div>
+                @endif
+            </form>
         </div>
-    @else
-    <div class="block my-2 text-center">
-        <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit">
     </div>
-    @endempty
-</form>
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/append/create.blade.php b/resources/views/program/construct/append/create.blade.php
index 0923acb..203a49c 100644
--- a/resources/views/program/construct/append/create.blade.php
+++ b/resources/views/program/construct/append/create.blade.php
@@ -1,78 +1,134 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目点播信息修改</title>
+    <title>录播节目点播信息修改 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
     <script src="{{ mix('/js/manifest.js') }}" rel="script"></script>
     <link href="{{ asset('/css/vendor/picomplete/picomplete.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<div class="flex gap-3 px-3">
-    <form class="w-full lg:w-1/2 border-2" action="" method="post" enctype="multipart/form-data">
-        <input type="hidden" name="id" value="{{$append->id}}">
-        @if($program)
-            <label class="block my-2">
-                结束图像
-                @if(count($program->video_pivots) > 0 && $program->video_pivots->last()->stop_image)
-                    <img src="{{$program->video_pivots->first()->stop_image}}" alt="结束图片">
-                @else
-                    <div>
-                        <a href="{{route("program.construct.video.list", ["program"=>$program->id])}}"
-                           class="block px-6 py-2 inline-block rounded-full bg-cyan-600 text-white">
-                            去建设
-                        </a>
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-7xl mx-auto">
+        <div class="md:flex md:items-center md:justify-between mb-8">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+                点播/追加信息修改
+            </h1>
+            <a href="{{ route('program.construct.append.list', ['program'=>$program->id]) }}" class="mt-4 md:mt-0 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                返回列表
+            </a>
+        </div>
+
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Left Column: Form -->
+            <div class="w-full lg:w-1/2">
+                <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+                    <form class="p-6 space-y-6" action="" method="post" enctype="multipart/form-data">
+                        @csrf
+                        <input type="hidden" name="id" value="{{$append->id}}">
+                        
+                        @if($program)
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">结束图像预览</label>
+                                @if(count($program->video_pivots) > 0 && $program->video_pivots->last()->stop_image)
+                                    <div class="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+                                        <img src="{{$program->video_pivots->last()->stop_image}}" alt="结束图片" class="w-full h-auto object-cover">
+                                    </div>
+                                    <p class="mt-1 text-xs text-gray-500">仅供参考，用于确认点播内容是否正确。</p>
+                                @else
+                                    <div class="rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 p-6 text-center">
+                                        <span class="block text-sm text-gray-500 dark:text-gray-400 mb-2">暂无结束图像</span>
+                                        <a href="{{route("program.construct.video.list", ["program"=>$program->id])}}"
+                                           class="inline-flex items-center px-4 py-2 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none">
+                                            去关联视频建设
+                                        </a>
+                                    </div>
+                                @endif
+                            </div>
+                        @endif
+
+                        <div>
+                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">追加内容（点播可不填）</label>
+                            <input type="text" name="name" id="name" autocomplete="off" value="{{ old('name', $append->name) }}"
+                                   class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                        </div>
+
+                        <div id="from_select">
+                            <label for="from" class="block text-sm font-medium text-gray-700 dark:text-gray-300">点播老板</label>
+                            <input type="text" name="from" id="from" autocomplete="off" value="{{ old('from', $append->from) }}"
+                                   class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                        </div>
+
+                        <div class="flex items-center">
+                            <input id="is_original" name="is_original" type="checkbox" value="1" @if(old('is_original', $append->is_original) == 1) checked @endif
+                                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
+                            <label for="is_original" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
+                                纯点播（非追加内容）
+                            </label>
+                        </div>
+
+                        <div>
+                            <label for="price" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SC 金额 (分)</label>
+                            <div class="mt-1 relative rounded-md shadow-sm">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <span class="text-gray-500 sm:text-sm">¥</span>
+                                </div>
+                                <input type="number" name="price" id="price" step="0.5" value="{{ old('price', $append->price) }}"
+                                       class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md py-2" placeholder="0.00">
+                            </div>
+                        </div>
+
+                        <div>
+                            <label for="append" class="block text-sm font-medium text-gray-700 dark:text-gray-300">补充说明</label>
+                            <input type="text" name="append" id="append" autocomplete="off" value="{{ old('append', $append->append) }}"
+                                   class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                        </div>
+
+                        @include("common.form_error")
+
+                        <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
+                            @if(count($program->video_pivots) > 0)
+                                <div class="flex space-x-2">
+                                     <a class="text-xs text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300" target="_blank"
+                                       href="https://www.bilibili.com/video/{{$program->video_pivots->first()->video_bvid}}?p={{$program->video_pivots->first()->start_part}}&t={{$program->video_pivots->first()->start_sec}}">
+                                       预览开始
+                                    </a>
+                                    <span class="text-gray-300">|</span>
+                                    <a class="text-xs text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300" target="_blank"
+                                       href="https://www.bilibili.com/video/{{$program->video_pivots->last()->video_bvid}}?p={{$program->video_pivots->last()->stop_part}}&t={{$program->video_pivots->last()->stop_sec}}">
+                                       预览结束
+                                    </a>
+                                </div>
+                            @else
+                                <div></div>
+                            @endif
+
+                            <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                                提交
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Right Column: Existing List -->
+            <div class="hidden lg:block lg:w-1/2">
+                <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden sticky top-24">
+                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                        <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">已有记录</h3>
                     </div>
-                @endif
-            </label>
-        @endif
-        <label class="block my-2 mx-2">
-            追加内容（点播可不填）
-            <input class="form-input border-0 border-b-2 w-full" autocomplete="off" type="text" name="name" value="{{ old('name', $append->name) }}">
-        </label>
-        <label class="block my-2 mx-2" id="from_select">
-            点播老板
-            <input class="form-input border-0 border-b-2 w-full" autocomplete="off" type="text" name="from" value="{{ old('from', $append->from) }}">
-        </label>
-        <label class="block my-2 mx-2">
-            是否点播（不是追加）
-            <input class="form-checkbox" type="checkbox" name="is_original" value="1" @if(old('is_original', $append->is_original) == 1) checked @endif>
-        </label>
-        <label class="block my-2 mx-2">
-            分
-            <input class="form-input border-0 border-b-2 w-full" type="number" step="0.5" name="price" value="{{ old('price', $append->price) }}">
-        </label>
-        <label class="block my-2 mx-2">
-            补充说明
-            <input class="form-input border-0 border-b-2 w-full" autocomplete="off" type="text" name="append" value="{{ old('append', $append->append) }}">
-        </label>
-        @include("common.form_error")
-        <div class="block my-2 text-center">
-            <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit">
+                    <div class="p-6 max-h-[80vh] overflow-y-auto">
+                        <x-appends.append_list :appends="$program->appends" :enable-edit="false"></x-appends.append_list>
+                    </div>
+                </div>
+            </div>
         </div>
-        <div class="block my-2">
-            @if(count($program->video_pivots) > 0)
-                <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" target="_blank"
-                   href="https://www.bilibili.com/video/{{$program->video_pivots->first()->video_bvid}}?p={{$program->video_pivots->first()->start_part}}&t={{$program->video_pivots->first()->start_sec}}"
-                   title="P{{$program->video_pivots->first()->start_part}}#{{$program->video_pivots->first()->start_time}}"
-                >打开至开始位置</a>
-                <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" target="_blank"
-                   href="https://www.bilibili.com/video/{{$program->video_pivots->last()->video_bvid}}?p={{$program->video_pivots->last()->stop_part}}&t={{$program->video_pivots->last()->stop_sec}}"
-                   title="P{{$program->video_pivots->last()->stop_part}}#{{$program->video_pivots->last()->stop_time}}"
-                >打开至结束位置</a>
-            @endif
-            <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white"
-               href="{{route('program.construct.append.list', ['program'=>$program->id])}}"
-            >返回列表</a>
-        </div>
-    </form>
-    <div class="hidden lg:block lg:w-1/2">
-        <div>已有记录</div>
-        <x-appends.append_list :appends="$program->appends" :enable-edit="false"></x-appends.append_list>
     </div>
-</div>
+</main>
 @include("common.footer")
-</body>
 <script src="{{ mix('/js/component/from_select.js') }}" rel="script"></script>
-</html>
+</body>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/append/index.blade.php b/resources/views/program/construct/append/index.blade.php
index eba16b4..f761d48 100644
--- a/resources/views/program/construct/append/index.blade.php
+++ b/resources/views/program/construct/append/index.blade.php
@@ -1,15 +1,55 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目点播信息维护</title>
+    <title>关联点播信息管理 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<a href="{{route("program.construct.append.add", ["program"=>$program->id])}}">新增</a>
-<a href="{{route("program.construct.append.copy", ["program"=>$program->id])}}">复制常驻留言</a>
-<x-appends.append_list :appends="$appends"></x-appends.append_list>
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-4xl mx-auto">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 space-y-4 md:space-y-0">
+            <div>
+                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">点播/追加信息管理</h1>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                    当前节目：{{ $program->name }}
+                </p>
+            </div>
+            <div class="flex flex-wrap gap-3">
+                <a href="{{ route("program.construct.edit", ["program"=>$program->id]) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"></path></svg>
+                    返回节目
+                </a>
+                <a href="{{ route("program.construct.append.copy", ["program"=>$program->id]) }}" class="inline-flex items-center px-4 py-2 border border-indigo-600 rounded-md shadow-sm text-sm font-medium text-indigo-600 bg-white hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-indigo-400 dark:border-indigo-500 dark:hover:bg-gray-700">
+                    <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path></svg>
+                    复制常驻
+                </a>
+                <a href="{{ route("program.construct.append.add", ["program"=>$program->id]) }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                    新增条目
+                </a>
+            </div>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+             <div class="px-4 py-5 sm:p-6">
+                @if(count($appends) > 0)
+                    <div class="space-y-4">
+                        <x-appends.append_list :appends="$appends"></x-appends.append_list>
+                    </div>
+                @else
+                    <div class="text-center py-10">
+                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+                        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">暂无点播/追加信息</h3>
+                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">点击上方按钮添加新的条目。</p>
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/batch_add.blade.php b/resources/views/program/construct/batch_add.blade.php
index d30151f..5b62535 100644
--- a/resources/views/program/construct/batch_add.blade.php
+++ b/resources/views/program/construct/batch_add.blade.php
@@ -1,31 +1,64 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目批量导入</title>
+    <title>录播节目批量导入 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<form class="w-full lg:w-1/2 lg:ml-6 border-2" action="" method="post" enctype="multipart/form-data">
-    @csrf
-    <label class="block my-2">
-        节目单内容
-        <textarea class="form-input border-0 border-b-2 w-full" rows="5" name="content" required>{{ old('content') }}</textarea>
-    </label>
-    <label class="block my-2">
-        BVID
-        <input class="form-input border-0 border-b-2 w-full" type="text" name="bvid" required value="{{ old('bvid') }}">
-    </label>
-    @include("common.form_error")
-    <div class="block my-2 text-center">
-        <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit">
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-3xl mx-auto">
+        <div class="md:flex md:items-center md:justify-between mb-8">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+                批量导入节目单
+            </h1>
+            <a href="{{ route("program.construct.list") }}" class="mt-4 md:mt-0 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                返回列表
+            </a>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+            <div class="px-6 py-4 bg-yellow-50 dark:bg-yellow-900/30 border-b border-yellow-100 dark:border-yellow-900/50">
+                <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+                    使用说明
+                </h3>
+                <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
+                    <p>请将整理好的节目单内容粘贴到下方文本框中。格式请参考既定规范（例如：时间轴 + 节目名）。</p>
+                </div>
+            </div>
+
+            <form class="p-6 space-y-6" action="" method="post" enctype="multipart/form-data">
+                @csrf
+                
+                <div>
+                    <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">节目单内容</label>
+                    <div class="mt-1">
+                        <textarea id="content" name="content" rows="10" required class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white font-mono" placeholder="00:00 节目A&#10;10:30 节目B...">{{ old('content') }}</textarea>
+                    </div>
+                </div>
+
+                <div>
+                    <label for="bvid" class="block text-sm font-medium text-gray-700 dark:text-gray-300">关联视频 BVID</label>
+                    <input type="text" name="bvid" id="bvid" required value="{{ old('bvid') }}"
+                           class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2"
+                           placeholder="BV...">
+                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">所有导入的节目将默认关联到此视频。</p>
+                </div>
+
+                @include("common.form_error")
+
+                <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        开始导入
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
-    <div class="block my-2">
-        <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white"
-           href="{{ route("program.construct.list") }}">返回列表</a>
-    </div>
-</form>
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/create.blade.php b/resources/views/program/construct/create.blade.php
index 66522e3..2e5aa22 100644
--- a/resources/views/program/construct/create.blade.php
+++ b/resources/views/program/construct/create.blade.php
@@ -1,53 +1,117 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目修改</title>
+    <title>录播节目修改 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<form class="w-full lg:w-1/2 lg:ml-6 border-2" action="" method="post" enctype="multipart/form-data">
-    <input type="hidden" name="id" value="{{$program->id}}">
-    <label class="block my-2">
-        节目名称
-        <input class="form-input border-0 border-b-2 w-full" autocomplete="off" type="text" required name="name" value="{{ old("name", $program->name) }}">
-    </label>
-    <label class="block my-2">
-        节目难度
-        <input class="form-input border-0 border-b-2 w-full" autocomplete="off" type="text" name="difficulty" value="{{ old("difficulty", $program->difficulty) }}">
-    </label>
-    <label class="block my-2">
-        节目要求
-        <input class="form-input border-0 border-b-2 w-full" autocomplete="off" type="text" name="desc" value="{{ old("desc", $program->desc) }}">
-    </label>
-    <label class="block my-2">
-        是否结束维护
-        <input class="form-checkbox" type="checkbox" name="status" value="1" @if(old("status", $program->status) == 1) checked @endif>
-    </label>
-    @include("common.form_error")
-    <div class="block my-2 text-center">
-        <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit">
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-3xl mx-auto">
+        <div class="md:flex md:items-center md:justify-between mb-8">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+                @if($program->id) 编辑节目 @else 添加节目 @endif
+            </h1>
+            <a href="{{ route("program.construct.list") }}" class="mt-4 md:mt-0 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                返回列表
+            </a>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+            <form class="p-6 space-y-6" action="" method="post" enctype="multipart/form-data">
+                @csrf
+                <input type="hidden" name="id" value="{{$program->id}}">
+                
+                <div>
+                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">节目名称</label>
+                    <input type="text" name="name" id="name" required autocomplete="off" value="{{ old("name", $program->name) }}"
+                           class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                </div>
+
+                <div>
+                    <label for="difficulty" class="block text-sm font-medium text-gray-700 dark:text-gray-300">节目难度</label>
+                    <input type="text" name="difficulty" id="difficulty" autocomplete="off" value="{{ old("difficulty", $program->difficulty) }}"
+                           class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                </div>
+
+                <div>
+                    <label for="desc" class="block text-sm font-medium text-gray-700 dark:text-gray-300">节目要求</label>
+                    <input type="text" name="desc" id="desc" autocomplete="off" value="{{ old("desc", $program->desc) }}"
+                           class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                </div>
+
+                <div class="flex items-start">
+                    <div class="flex items-center h-5">
+                        <input id="status" name="status" type="checkbox" value="1" @if(old("status", $program->status) == 1) checked @endif
+                               class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
+                    </div>
+                    <div class="ml-3 text-sm">
+                        <label for="status" class="font-medium text-gray-700 dark:text-gray-300">结束维护</label>
+                        <p class="text-gray-500 dark:text-gray-400">勾选后表示该节目已完成所有关联工作。</p>
+                    </div>
+                </div>
+
+                @include("common.form_error")
+
+                <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        保存修改
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        @if($program->id)
+            <div class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div class="relative rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                    <div class="flex-shrink-0">
+                        <span class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 text-white">
+                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
+                        </span>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <a href="{{route("program.construct.video.list", ["program"=>$program->id])}}" class="focus:outline-none">
+                            <span class="absolute inset-0" aria-hidden="true"></span>
+                            <p class="text-sm font-medium text-gray-900 dark:text-white">关联视频列表</p>
+                            <p class="text-sm text-gray-500 truncate">管理该节目对应的录播视频片段</p>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="relative rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                    <div class="flex-shrink-0">
+                        <span class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-green-500 text-white">
+                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+                        </span>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <a href="{{route("program.construct.append.list", ["program"=>$program->id])}}" class="focus:outline-none">
+                            <span class="absolute inset-0" aria-hidden="true"></span>
+                            <p class="text-sm font-medium text-gray-900 dark:text-white">关联点播老板列表</p>
+                            <p class="text-sm text-gray-500 truncate">管理相关的点播和追加信息</p>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="mt-8 flex justify-between">
+                <a class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600" 
+                   href="{{route("program.construct.edit", ["program"=>$program->id - 1])}}">
+                    <svg class="h-5 w-5 mr-2 -ml-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+                    上一个
+                </a>
+                <a class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600" 
+                   href="{{route("program.construct.edit", ["program"=>$program->id + 1])}}">
+                    下一个
+                    <svg class="h-5 w-5 ml-2 -mr-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+                </a>
+            </div>
+        @endif
     </div>
-    @if($program->id)
-    <div class="block my-2">
-        <a href="{{route("program.construct.video.list", ["program"=>$program->id])}}"
-           class="block px-6 py-2 inline-block rounded-full bg-cyan-600 text-white">
-            关联视频列表
-        </a>
-        <a href="{{route("program.construct.append.list", ["program"=>$program->id])}}"
-           class="block px-6 py-2 inline-block rounded-full bg-cyan-600 text-white">
-            关联点播老板列表
-        </a>
-    </div>
-    @endif
-</form>
-@if($program->id)
-<div class="w-full lg:w-1/2 lg:ml-6 flex justify-between px-4">
-    <a class="block px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" href="{{route("program.construct.edit", ["program"=>$program->id - 1])}}">上一个</a>
-    <a class="block px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" href="{{route("program.construct.edit", ["program"=>$program->id + 1])}}">下一个</a>
-</div>
-@endif
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/index.blade.php b/resources/views/program/construct/index.blade.php
index 471e0a2..b669f9a 100644
--- a/resources/views/program/construct/index.blade.php
+++ b/resources/views/program/construct/index.blade.php
@@ -1,77 +1,121 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目查询</title>
+    <title>节目建设 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<form class="form" action="">
-    <label for="keyword">查找节目关键词，空格隔开查找多个关键词</label>
-    <input class="border border-black" type="text" name="keyword" id="keyword" value="{{$keyword}}">
-    <input class="border border-black" type="submit">
-</form>
-<div class="block my-2">
-    <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white"
-       href="{{ route("program.construct.add") }}">添加</a>
-    <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white"
-       href="{{ route("program.construct.batch_add") }}">节目单导入</a>
-</div>
-<table class="table-auto border-collapse w-full lg:border lg:border-black">
-    <thead>
-    <tr class="border border-black sticky bg-white lg:static top-0 left-0 right-0">
-        <td>节目名称</td>
-        <td>点播及追加</td>
-        <td>节目开始</td>
-        <td>节目结束时的画面</td>
-    </tr>
-    </thead>
-    <tbody>
-    @foreach($programs as $program)
-        <tr>
-            <td>
-                <a href="{{route("program.construct.edit", ["program"=>$program->id])}}">编辑</a>
-                <span title="节目">{{$program->name}}</span>
-                <span title="难度">{{$program->difficulty}}</span>
-                <span title="要求">{{$program->desc}}</span>
-            </td>
-            <td>
-                @foreach($program->appends as $append)
-                    <x-append :append="$append"></x-append>
-                @endforeach
-            </td>
-            <td>
-                @foreach($program->video_pivots as $video_pivot)
-                    <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->start_part" :time="$video_pivot->start_time">
-                        <div>{{$video_pivot->created_at}} P{{$video_pivot->start_part}}#{{$video_pivot->start_time}}</div>
-                        @if($video_pivot->start_image)
-                            <img width="300" src="{{$video_pivot->start_image}}" alt="开始时的画面">
-                        @else
-                            节目开始位置
-                        @endif
-                    </x-links.video_link>
-                @endforeach
-            </td>
-            <td>
-                @foreach($program->video_pivots as $video_pivot)
-                    <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->stop_part" :time="$video_pivot->stop_time">
-                        <div>P{{$video_pivot->stop_part}}#{{$video_pivot->stop_time}}</div>
-                        @if($video_pivot->start_image)
-                            <img width="300" src="{{$video_pivot->stop_image}}" alt="结束时的画面">
-                        @else
-                            节目结束位置
-                        @endif
-                    </x-links.video_link>
-                @endforeach
-            </td>
-        </tr>
-    @endforeach
-    </tbody>
-</table>
-<div class="max-w xl:max-w-5xl lg:max-w-2xl md:max-w-lg mx-2 md:mx-auto sticky bottom-0">
-    {{$programs->onEachSide(1)->links()}}
-</div>
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-7xl mx-auto">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 space-y-4 md:space-y-0">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">节目建设</h1>
+            <div class="flex space-x-4">
+                <a class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                   href="{{ route("program.construct.add") }}">
+                   <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                   添加节目
+                </a>
+                <a class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                   href="{{ route("program.construct.batch_add") }}">
+                   <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
+                   导入节目单
+                </a>
+            </div>
+        </div>
+
+        <form class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm mb-8 transition-colors duration-200" action="">
+            <label for="keyword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">查找节目关键词</label>
+            <div class="relative flex items-center">
+                <input type="text" name="keyword" id="keyword" value="{{$keyword}}" 
+                       class="block flex-1 w-full rounded-l-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-3" 
+                       placeholder="输入关键词，空格隔开...">
+                <button type="submit" class="inline-flex flex-shrink-0 whitespace-nowrap items-center px-6 py-3 border border-transparent text-base font-medium rounded-r-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
+                    搜索
+                </button>
+            </div>
+        </form>
+
+        <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                    <thead class="bg-gray-50 dark:bg-gray-700">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">节目名称</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">点播及追加</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">节目开始</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">节目结束</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                        @foreach($programs as $program)
+                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                                <td class="px-6 py-4 align-top">
+                                    <div class="flex items-start">
+                                        <a href="{{route("program.construct.edit", ["program"=>$program->id])}}" class="mr-3 text-indigo-600 hover:text-indigo-900 dark:hover:text-indigo-400">
+                                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                                        </a>
+                                        <div>
+                                            <div class="text-sm font-medium text-gray-900 dark:text-white">{{$program->name}}</div>
+                                            @if($program->difficulty)
+                                                <div class="text-xs text-gray-500 mt-1">难度: {{$program->difficulty}}</div>
+                                            @endif
+                                            @if($program->desc)
+                                                <div class="text-xs text-gray-500 mt-1">{{$program->desc}}</div>
+                                            @endif
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4 align-top text-sm text-gray-500 dark:text-gray-400">
+                                    @foreach($program->appends as $append)
+                                        <div class="mb-2">
+                                            <x-append :append="$append"></x-append>
+                                        </div>
+                                    @endforeach
+                                </td>
+                                <td class="px-6 py-4 align-top text-sm">
+                                    @foreach($program->video_pivots as $video_pivot)
+                                        <div class="mb-4">
+                                            <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->start_part" :time="$video_pivot->start_time">
+                                                <div class="text-xs text-gray-500 mb-1">{{$video_pivot->created_at}}</div>
+                                                <div class="text-indigo-600 hover:text-indigo-800">P{{$video_pivot->start_part}}#{{$video_pivot->start_time}}</div>
+                                                @if($video_pivot->start_image)
+                                                    <img loading="lazy" class="mt-1 rounded border border-gray-200 w-32" src="{{$video_pivot->start_image}}" alt="Start">
+                                                @else
+                                                    <span class="text-xs text-gray-400">无预览</span>
+                                                @endif
+                                            </x-links.video_link>
+                                        </div>
+                                    @endforeach
+                                </td>
+                                <td class="px-6 py-4 align-top text-sm">
+                                    @foreach($program->video_pivots as $video_pivot)
+                                        <div class="mb-4">
+                                            <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->stop_part" :time="$video_pivot->stop_time">
+                                                <div class="text-indigo-600 hover:text-indigo-800">P{{$video_pivot->stop_part}}#{{$video_pivot->stop_time}}</div>
+                                                @if($video_pivot->start_image)
+                                                    <img loading="lazy" class="mt-1 rounded border border-gray-200 w-32" src="{{$video_pivot->stop_image}}" alt="End">
+                                                @else
+                                                    <span class="text-xs text-gray-400">无预览</span>
+                                                @endif
+                                            </x-links.video_link>
+                                        </div>
+                                    @endforeach
+                                </td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="mt-8">
+            {{$programs->onEachSide(1)->links()}}
+        </div>
+    </div>
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/video/create.blade.php b/resources/views/program/construct/video/create.blade.php
index cab7fab..6b6cc35 100644
--- a/resources/views/program/construct/video/create.blade.php
+++ b/resources/views/program/construct/video/create.blade.php
@@ -1,70 +1,119 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目关联视频位置修改</title>
+    <title>关联视频修改 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<form class="w-full lg:w-1/2 lg:ml-6 border-2" action="" method="post" enctype="multipart/form-data">
-    <input type="hidden" name="id" value="{{$program_video->id}}">
-    <label class="block my-2">
-        BVID
-        <input class="form-input border-0 border-b-2 w-full" @if($program_video->video_bvid) disabled @endif type="text" name="video_bvid" value="{{ old("video_bvid", $program_video->video_bvid) }}">
-    </label>
-    <label class="block my-2">
-        开始P数
-        <input class="form-input border-0 border-b-2 w-full" type="number" name="start_part" value="{{ old("start_part", $program_video->start_part) }}">
-    </label>
-    <label class="block my-2">
-        开始时间
-        <input class="form-input border-0 border-b-2 w-full" step="1" type="time" name="start_time" value="{{ old("start_time", $program_video->start_time) }}">
-    </label>
-    <label class="block my-2">
-        开始图像
-        @if($program_video->start_image)
-            <img src="{{$program_video->start_image}}" alt="开始图片">
-        @endif
-        <input class="form-input border-0 border-b-2 w-full" type="file" name="start_image">
-    </label>
-    <label class="block my-2">
-        结束P数
-        <input class="form-input border-0 border-b-2 w-full" type="number" name="stop_part" value="{{ old("stop_part", $program_video->stop_part) }}">
-    </label>
-    <label class="block my-2">
-        结束时间
-        <input class="form-input border-0 border-b-2 w-full" step="1" type="time" name="stop_time" value="{{ old("stop_time", $program_video->stop_time) }}">
-    </label>
-    <label class="block my-2">
-        结束图像
-        @if($program_video->stop_image)
-            <img src="{{$program_video->stop_image}}" alt="结束图片">
-        @endif
-        <input class="form-input border-0 border-b-2 w-full" type="file" name="stop_image">
-    </label>
-    @include("common.form_error")
-    <div class="block my-2 text-center">
-        <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit">
-    </div>
-    @if($program_video->video)
-    <div class="block my-2">
-        <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" target="_blank"
-           href="https://www.bilibili.com/video/{{$program_video->video_bvid}}?p={{$program_video->start_part}}&t={{$program_video->start_sec}}"
-           title="P{{$program_video->start_part}}#{{$program_video->start_time}}"
-        >打开至开始位置</a>
-        <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" target="_blank"
-           href="https://www.bilibili.com/video/{{$program_video->video_bvid}}?p={{$program_video->stop_part}}&t={{$program_video->stop_sec}}"
-           title="P{{$program_video->stop_part}}#{{$program_video->stop_time}}"
-        >打开至结束位置</a>
-        @if($program_video->video->parts()->count() > 0)
-        <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white"
-           href="{{ url(route("program.construct.video.auto_fix_created_at", ["bvid" => $program_video->video_bvid])) }}"
-        >自动修复</a>
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-3xl mx-auto">
+        <div class="md:flex md:items-center md:justify-between mb-8">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+                关联视频修改
+            </h1>
+            <a href="{{ route("program.construct.video.list", ["program" => $program_video->program_id]) }}" class="mt-4 md:mt-0 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                返回列表
+            </a>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+            <form class="p-6 space-y-6" action="" method="post" enctype="multipart/form-data">
+                @csrf
+                <input type="hidden" name="id" value="{{$program_video->id}}">
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="col-span-1 md:col-span-2">
+                        <label for="video_bvid" class="block text-sm font-medium text-gray-700 dark:text-gray-300">BVID</label>
+                        <div class="mt-1 flex rounded-md shadow-sm">
+                            <input type="text" name="video_bvid" id="video_bvid" @if($program_video->video_bvid) disabled @endif value="{{ old("video_bvid", $program_video->video_bvid) }}"
+                                class="flex-1 min-w-0 block w-full px-3 py-2 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                        </div>
+                    </div>
+
+                    <!-- Start Section -->
+                    <div class="col-span-1 space-y-4 p-4 bg-gray-50 dark:bg-gray-700/30 rounded-lg border border-gray-200 dark:border-gray-600">
+                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider">开始节点</h3>
+                        <div>
+                            <label for="start_part" class="block text-sm font-medium text-gray-700 dark:text-gray-300">P数</label>
+                            <input type="number" name="start_part" id="start_part" value="{{ old("start_part", $program_video->start_part) }}"
+                                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                        </div>
+                        <div>
+                            <label for="start_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300">时间点</label>
+                            <input type="time" step="1" name="start_time" id="start_time" value="{{ old("start_time", $program_video->start_time) }}"
+                                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">预览图</label>
+                            @if($program_video->start_image)
+                                <img src="{{$program_video->start_image}}" alt="Start" class="mt-2 h-32 w-full object-cover rounded-md border border-gray-300 dark:border-gray-600">
+                            @endif
+                            <input type="file" name="start_image" class="mt-2 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-900 dark:file:text-indigo-300">
+                        </div>
+                    </div>
+
+                    <!-- Stop Section -->
+                    <div class="col-span-1 space-y-4 p-4 bg-gray-50 dark:bg-gray-700/30 rounded-lg border border-gray-200 dark:border-gray-600">
+                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider">结束节点</h3>
+                        <div>
+                            <label for="stop_part" class="block text-sm font-medium text-gray-700 dark:text-gray-300">P数</label>
+                            <input type="number" name="stop_part" id="stop_part" value="{{ old("stop_part", $program_video->stop_part) }}"
+                                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                        </div>
+                        <div>
+                            <label for="stop_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300">时间点</label>
+                            <input type="time" step="1" name="stop_time" id="stop_time" value="{{ old("stop_time", $program_video->stop_time) }}"
+                                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">预览图</label>
+                            @if($program_video->stop_image)
+                                <img src="{{$program_video->stop_image}}" alt="Stop" class="mt-2 h-32 w-full object-cover rounded-md border border-gray-300 dark:border-gray-600">
+                            @endif
+                             <input type="file" name="stop_image" class="mt-2 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-900 dark:file:text-indigo-300">
+                        </div>
+                    </div>
+                </div>
+
+                @include("common.form_error")
+
+                <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+                     <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        保存修改
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        @if($program_video->video)
+            <div class="mt-6 flex flex-wrap gap-4 justify-center md:justify-start">
+                <a class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" 
+                   target="_blank"
+                   href="https://www.bilibili.com/video/{{$program_video->video_bvid}}?p={{$program_video->start_part}}&t={{$program_video->start_sec}}">
+                   <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                   预览开始位置
+                </a>
+                <a class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" 
+                   target="_blank"
+                   href="https://www.bilibili.com/video/{{$program_video->video_bvid}}?p={{$program_video->stop_part}}&t={{$program_video->stop_sec}}">
+                   <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"></path></svg>
+                   预览结束位置
+                </a>
+                @if($program_video->video->parts()->count() > 0)
+                <a class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+                   href="{{ url(route("program.construct.video.auto_fix_created_at", ["bvid" => $program_video->video_bvid])) }}">
+                   <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                   自动修复时间
+                </a>
+                @endif
+            </div>
         @endif
     </div>
-    @endif
-</form>
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/video/index.blade.php b/resources/views/program/construct/video/index.blade.php
index 7377aac..112d9de 100644
--- a/resources/views/program/construct/video/index.blade.php
+++ b/resources/views/program/construct/video/index.blade.php
@@ -1,64 +1,95 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目关联视频位置查询</title>
+    <title>关联视频管理 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<div class="block my-2">
-    <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white"
-       href="{{ route("program.construct.video.add", ["program"=>$program->id]) }}">添加</a>
-</div>
-<table class="table-auto border-collapse w-full lg:border lg:border-black">
-    <thead>
-    <tr class="border border-black sticky bg-white lg:static top-0 left-0 right-0">
-        <td>BVID</td>
-        <td>节目开始时间</td>
-        <td>节目开始时的画面</td>
-        <td>节目结束时的画面</td>
-        <td>操作</td>
-    </tr>
-    </thead>
-    <tbody>
-    @foreach($videos as $video_pivot)
-        <tr>
-            <td>
-                <a class="underline" target="_blank"
-                   href="https://www.bilibili.com/video/{{$video_pivot->video_bvid}}?p={{$video_pivot->start_part}}&t={{$video_pivot->start_sec}}"
-                   title="P{{$video_pivot->start_part}}#{{$video_pivot->start_time}}"
-                >{{$video_pivot->video_bvid}}</a>
-            </td>
-            <td>{{$video_pivot->created_at}}</td>
-            <td>
-                <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->start_part" :time="$video_pivot->start_time">
-                    <div>{{$video_pivot->created_at}} P{{$video_pivot->start_part}}#{{$video_pivot->start_time}}</div>
-                    @if($video_pivot->start_image)
-                        <img width="300" src="{{$video_pivot->start_image}}" alt="开始时的画面">
-                    @else
-                        节目开始位置
-                    @endif
-                </x-links.video_link>
-            </td>
-            <td>
-                <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->stop_part" :time="$video_pivot->stop_time">
-                    <div>P{{$video_pivot->stop_part}}#{{$video_pivot->stop_time}}</div>
-                    @if($video_pivot->start_image)
-                        <img width="300" src="{{$video_pivot->stop_image}}" alt="结束时的画面">
-                    @else
-                        节目结束位置
-                    @endif
-                </x-links.video_link>
-            </td>
-            <td>
-                <a class="text-blue-600 underline"
-                   href="{{route("program.construct.video.edit", ["program_video" => $video_pivot->id])}}">编辑</a>
-            </td>
-        </tr>
-    @endforeach
-    </tbody>
-</table>
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-7xl mx-auto">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 space-y-4 md:space-y-0">
+            <div>
+                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">关联视频管理</h1>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                    当前节目：{{ $program->name }}
+                </p>
+            </div>
+            <div class="flex space-x-3">
+                 <a href="{{ route("program.construct.edit", ["program"=>$program->id]) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"></path></svg>
+                    返回节目
+                </a>
+                <a href="{{ route("program.construct.video.add", ["program"=>$program->id]) }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                    添加关联视频
+                </a>
+            </div>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                    <thead class="bg-gray-50 dark:bg-gray-700">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">BVID</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">开始时间</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">开始画面</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">结束画面</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                        @foreach($videos as $video_pivot)
+                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                    <a class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 flex items-center" 
+                                       target="_blank"
+                                       href="https://www.bilibili.com/video/{{$video_pivot->video_bvid}}?p={{$video_pivot->start_part}}&t={{$video_pivot->start_sec}}"
+                                       title="P{{$video_pivot->start_part}}#{{$video_pivot->start_time}}">
+                                        {{$video_pivot->video_bvid}}
+                                        <svg class="h-4 w-4 ml-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+                                    </a>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                                    {{$video_pivot->created_at}}
+                                </td>
+                                <td class="px-6 py-4 align-top text-sm">
+                                    <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->start_part" :time="$video_pivot->start_time">
+                                        <div class="text-xs text-gray-500 mb-1">P{{$video_pivot->start_part}}#{{$video_pivot->start_time}}</div>
+                                        @if($video_pivot->start_image)
+                                            <img loading="lazy" class="h-20 w-32 object-cover rounded border border-gray-200 dark:border-gray-600" src="{{$video_pivot->start_image}}" alt="Start">
+                                        @else
+                                            <span class="text-xs text-gray-400 italic">无预览</span>
+                                        @endif
+                                    </x-links.video_link>
+                                </td>
+                                <td class="px-6 py-4 align-top text-sm">
+                                    <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->stop_part" :time="$video_pivot->stop_time">
+                                        <div class="text-xs text-gray-500 mb-1">P{{$video_pivot->stop_part}}#{{$video_pivot->stop_time}}</div>
+                                        @if($video_pivot->start_image)
+                                            <img loading="lazy" class="h-20 w-32 object-cover rounded border border-gray-200 dark:border-gray-600" src="{{$video_pivot->stop_image}}" alt="End">
+                                        @else
+                                            <span class="text-xs text-gray-400 italic">无预览</span>
+                                        @endif
+                                    </x-links.video_link>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                    <a class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                       href="{{route("program.construct.video.edit", ["program_video" => $video_pivot->id])}}">
+                                        编辑
+                                    </a>
+                                </td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/video/manual_fix.blade.php b/resources/views/program/construct/video/manual_fix.blade.php
index 588aa77..4518caf 100644
--- a/resources/views/program/construct/video/manual_fix.blade.php
+++ b/resources/views/program/construct/video/manual_fix.blade.php
@@ -1,40 +1,85 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目关联视频位置修改</title>
+    <title>时间基准修复 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<form class="w-full lg:w-1/2 lg:ml-6 border-2" action="" method="post" enctype="multipart/form-data">
-    <div class="text-lg font-bold">时间基准信息</div>
-    <input type="hidden" name="id" value="{{$program_video->id}}">
-    <label class="block my-2">
-        BVID
-        <input class="form-input border-0 border-b-2 w-full" disabled type="text" name="video_bvid" value="{{ $program_video->video_bvid }}">
-    </label>
-    <label class="block my-2">
-        开始P数
-        <input class="form-input border-0 border-b-2 w-full" disabled type="number" name="start_part" value="{{ $program_video->start_part }}">
-    </label>
-    <label class="block my-2">
-        开始时间
-        <input class="form-input border-0 border-b-2 w-full" disabled step="1" type="time" name="start_time" value="{{ $program_video->start_time }}">
-    </label>
-    <label class="block my-2">
-        节目开打时间
-        <input class="form-input border-0 border-b-2 w-full" disabled type="datetime-local" step="1" name="created_at" value="{{ $program_video->created_at }}">
-    </label>
-    <label class="block my-2">
-        每P时间
-        <input class="form-input border-0 border-b-2 w-full" type="time" step="1" name="each_time" value="{{ old("each_time") }}">
-    </label>
-    @include("common.form_error")
-    <div class="block my-2 text-center">
-        <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit" value="修复该录播下的所有节目开始时间">
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-2xl mx-auto">
+        <div class="md:flex md:items-center md:justify-between mb-8">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+                时间基准修复
+            </h1>
+            <a href="{{ url()->previous() }}" class="mt-4 md:mt-0 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                返回
+            </a>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+            <div class="px-6 py-4 bg-blue-50 dark:bg-blue-900/30 border-b border-blue-100 dark:border-blue-900/50">
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <div class="ml-3 flex-1 md:flex md:justify-between">
+                        <p class="text-sm text-blue-700 dark:text-blue-300">
+                            此操作将基于当前设定的时间点，批量修复该 BVID 下所有关联节目的开始时间。
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <form class="p-6 space-y-6" action="" method="post" enctype="multipart/form-data">
+                @csrf
+                <input type="hidden" name="id" value="{{$program_video->id}}">
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">BVID</label>
+                        <input type="text" disabled value="{{ $program_video->video_bvid }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-50 dark:text-gray-400 shadow-sm sm:text-sm py-2">
+                    </div>
+                    <div>
+                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">参考 P 数</label>
+                        <input type="number" disabled value="{{ $program_video->start_part }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-50 dark:text-gray-400 shadow-sm sm:text-sm py-2">
+                    </div>
+                    <div>
+                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">参考时间点</label>
+                        <input type="time" disabled step="1" value="{{ $program_video->start_time }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-50 dark:text-gray-400 shadow-sm sm:text-sm py-2">
+                    </div>
+                    <div>
+                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">节目实际开始时间</label>
+                        <input type="datetime-local" step="1" disabled value="{{ date('Y-m-d\TH:i:s', strtotime($program_video->created_at)) }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-50 dark:text-gray-400 shadow-sm sm:text-sm py-2">
+                    </div>
+                    <div class="md:col-span-2">
+                        <label for="each_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300">每 P 均分时长 (可选)</label>
+                        <input type="time" step="1" name="each_time" id="each_time" value="{{ old("each_time") }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">若不填写，将自动尝试计算或使用默认值。</p>
+                    </div>
+                </div>
+
+                @include("common.form_error")
+
+                <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        执行修复
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
-</form>
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/program/construct/video/time_fix.blade.php b/resources/views/program/construct/video/time_fix.blade.php
index 588aa77..4518caf 100644
--- a/resources/views/program/construct/video/time_fix.blade.php
+++ b/resources/views/program/construct/video/time_fix.blade.php
@@ -1,40 +1,85 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>录播节目关联视频位置修改</title>
+    <title>时间基准修复 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<form class="w-full lg:w-1/2 lg:ml-6 border-2" action="" method="post" enctype="multipart/form-data">
-    <div class="text-lg font-bold">时间基准信息</div>
-    <input type="hidden" name="id" value="{{$program_video->id}}">
-    <label class="block my-2">
-        BVID
-        <input class="form-input border-0 border-b-2 w-full" disabled type="text" name="video_bvid" value="{{ $program_video->video_bvid }}">
-    </label>
-    <label class="block my-2">
-        开始P数
-        <input class="form-input border-0 border-b-2 w-full" disabled type="number" name="start_part" value="{{ $program_video->start_part }}">
-    </label>
-    <label class="block my-2">
-        开始时间
-        <input class="form-input border-0 border-b-2 w-full" disabled step="1" type="time" name="start_time" value="{{ $program_video->start_time }}">
-    </label>
-    <label class="block my-2">
-        节目开打时间
-        <input class="form-input border-0 border-b-2 w-full" disabled type="datetime-local" step="1" name="created_at" value="{{ $program_video->created_at }}">
-    </label>
-    <label class="block my-2">
-        每P时间
-        <input class="form-input border-0 border-b-2 w-full" type="time" step="1" name="each_time" value="{{ old("each_time") }}">
-    </label>
-    @include("common.form_error")
-    <div class="block my-2 text-center">
-        <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit" value="修复该录播下的所有节目开始时间">
+
+<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-2xl mx-auto">
+        <div class="md:flex md:items-center md:justify-between mb-8">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+                时间基准修复
+            </h1>
+            <a href="{{ url()->previous() }}" class="mt-4 md:mt-0 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+                返回
+            </a>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+            <div class="px-6 py-4 bg-blue-50 dark:bg-blue-900/30 border-b border-blue-100 dark:border-blue-900/50">
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <div class="ml-3 flex-1 md:flex md:justify-between">
+                        <p class="text-sm text-blue-700 dark:text-blue-300">
+                            此操作将基于当前设定的时间点，批量修复该 BVID 下所有关联节目的开始时间。
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <form class="p-6 space-y-6" action="" method="post" enctype="multipart/form-data">
+                @csrf
+                <input type="hidden" name="id" value="{{$program_video->id}}">
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">BVID</label>
+                        <input type="text" disabled value="{{ $program_video->video_bvid }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-50 dark:text-gray-400 shadow-sm sm:text-sm py-2">
+                    </div>
+                    <div>
+                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">参考 P 数</label>
+                        <input type="number" disabled value="{{ $program_video->start_part }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-50 dark:text-gray-400 shadow-sm sm:text-sm py-2">
+                    </div>
+                    <div>
+                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">参考时间点</label>
+                        <input type="time" disabled step="1" value="{{ $program_video->start_time }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-50 dark:text-gray-400 shadow-sm sm:text-sm py-2">
+                    </div>
+                    <div>
+                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">节目实际开始时间</label>
+                        <input type="datetime-local" step="1" disabled value="{{ date('Y-m-d\TH:i:s', strtotime($program_video->created_at)) }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-50 dark:text-gray-400 shadow-sm sm:text-sm py-2">
+                    </div>
+                    <div class="md:col-span-2">
+                        <label for="each_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300">每 P 均分时长 (可选)</label>
+                        <input type="time" step="1" name="each_time" id="each_time" value="{{ old("each_time") }}"
+                               class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2">
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">若不填写，将自动尝试计算或使用默认值。</p>
+                    </div>
+                </div>
+
+                @include("common.form_error")
+
+                <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        执行修复
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
-</form>
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/user/login.blade.php b/resources/views/user/login.blade.php
index 439cc87..a0d149a 100644
--- a/resources/views/user/login.blade.php
+++ b/resources/views/user/login.blade.php
@@ -1,37 +1,84 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>登录</title>
+    <title>登录 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
     <script src="{{ mix('/js/manifest.js') }}" rel="script"></script>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<form class="w-full lg:w-1/2 border-2 mx-auto my-2" id="webauthn_login_form" action="" method="post" enctype="multipart/form-data">
-    <div class="block text-lg font-bold ml-4 mt-2">登录</div>
-    @csrf
-    <label class="block my-2">
-        用户名
-        <input class="form-input border-0 border-b-2 w-full" type="text" name="username" value="{{ old("username") }}" placeholder="用户名或邮箱">
-    </label>
-    <label class="block my-2">
-        密码
-        <input class="form-input border-0 border-b-2 w-full" type="password" name="password" value="{{ old("password") }}" placeholder="密码">
-    </label>
-    <label class="block my-4">
-        记住密码
-        <input class="form-checkbox" type="checkbox" name="remember" @if(old("remember") == 1) checked @endif value="1">
-    </label>
-    @include("common.form_error")
-    <div class="block my-2 text-center">
-        <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit" value="登录">
-        <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" id="do_webauthn_login" href="javascript: void 0">
-            免输入登录<sup class="text-xs bg-yellow-600 text-white">Alpha</sup>
-        </a>
+
+<main class="flex-grow flex items-center justify-center px-4 sm:px-6 lg:px-8 py-12">
+    <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700">
+        <div>
+            <h2 class="mt-2 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
+                登录账号
+            </h2>
+            <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
+                或者
+                <a href="{{ route('register') }}" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
+                    注册新账号
+                </a>
+            </p>
+        </div>
+        
+        <form class="mt-8 space-y-6" id="webauthn_login_form" action="" method="post" enctype="multipart/form-data">
+            @csrf
+            <div class="rounded-md shadow-sm -space-y-px">
+                <div>
+                    <label for="username" class="sr-only">用户名 / 邮箱</label>
+                    <input id="username" name="username" type="text" autocomplete="username" required value="{{ old("username") }}" 
+                        class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 text-gray-900 dark:text-white dark:bg-gray-700 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" 
+                        placeholder="用户名或邮箱">
+                </div>
+                <div>
+                    <label for="password" class="sr-only">密码</label>
+                    <input id="password" name="password" type="password" autocomplete="current-password" required value="{{ old("password") }}"
+                        class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 text-gray-900 dark:text-white dark:bg-gray-700 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" 
+                        placeholder="密码">
+                </div>
+            </div>
+
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <input id="remember_me" name="remember" type="checkbox" value="1" @if(old("remember") == 1) checked @endif
+                        class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
+                    <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
+                        记住密码
+                    </label>
+                </div>
+
+                <div class="text-sm">
+                    <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
+                        忘记密码?
+                    </a>
+                </div>
+            </div>
+
+            @include("common.form_error")
+
+            <div class="flex flex-col gap-3">
+                <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    <span class="absolute left-0 inset-y-0 flex items-center pl-3">
+                        <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
+                        </svg>
+                    </span>
+                    登录
+                </button>
+                
+                <button type="button" id="do_webauthn_login" class="group relative w-full flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    免输入登录 (Passkey)
+                    <span class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
+                        Alpha
+                    </span>
+                </button>
+            </div>
+        </form>
     </div>
-</form>
+</main>
 @include("common.footer")
-</body>
 <script src="{{ mix('/js/webauthn.js') }}" rel="script"></script>
-</html>
+</body>
+</html>
\ No newline at end of file
diff --git a/resources/views/user/register.blade.php b/resources/views/user/register.blade.php
index 69e4a9d..ef62b5f 100644
--- a/resources/views/user/register.blade.php
+++ b/resources/views/user/register.blade.php
@@ -1,32 +1,65 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <title>注册</title>
+    <title>注册 - 录播查询</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-100">
 @include("common.header")
-<form class="w-full lg:w-1/2 border-2 mx-auto my-2" action="" method="post" enctype="multipart/form-data">
-    <div class="block text-lg font-bold ml-4 mt-2">注册</div>
-    @csrf
-    <label class="block my-2">
-        用户名
-        <input class="form-input border-0 border-b-2 w-full" type="text" name="name" value="{{ old("name") }}" placeholder="用户名">
-    </label>
-    <label class="block my-2">
-        邮箱
-        <input class="form-input border-0 border-b-2 w-full" type="email" name="email" value="{{ old("email") }}" placeholder="邮箱">
-    </label>
-    <label class="block my-2">
-        密码
-        <input class="form-input border-0 border-b-2 w-full" minlength="5" type="password" name="password" value="{{ old("password") }}" placeholder="密码">
-    </label>
-    @include("common.form_error")
-    <div class="block my-2 text-center">
-        <input class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white" type="submit" value="注册">
+
+<main class="flex-grow flex items-center justify-center px-4 sm:px-6 lg:px-8 py-12">
+    <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700">
+        <div>
+            <h2 class="mt-2 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
+                创建新账号
+            </h2>
+            <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
+                已有账号？
+                <a href="{{ route('login') }}" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
+                    直接登录
+                </a>
+            </p>
+        </div>
+        
+        <form class="mt-8 space-y-6" action="" method="post" enctype="multipart/form-data">
+            @csrf
+            <div class="rounded-md shadow-sm -space-y-px">
+                <div>
+                    <label for="name" class="sr-only">用户名</label>
+                    <input id="name" name="name" type="text" autocomplete="username" required value="{{ old("name") }}" 
+                        class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 text-gray-900 dark:text-white dark:bg-gray-700 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" 
+                        placeholder="用户名">
+                </div>
+                <div>
+                    <label for="email" class="sr-only">邮箱</label>
+                    <input id="email" name="email" type="email" autocomplete="email" required value="{{ old("email") }}"
+                        class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 text-gray-900 dark:text-white dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" 
+                        placeholder="邮箱">
+                </div>
+                <div>
+                    <label for="password" class="sr-only">密码</label>
+                    <input id="password" name="password" type="password" autocomplete="new-password" required minlength="5" value="{{ old("password") }}"
+                        class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 text-gray-900 dark:text-white dark:bg-gray-700 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" 
+                        placeholder="密码 (至少5位)">
+                </div>
+            </div>
+
+            @include("common.form_error")
+
+            <div>
+                <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    <span class="absolute left-0 inset-y-0 flex items-center pl-3">
+                        <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                        </svg>
+                    </span>
+                    注册
+                </button>
+            </div>
+        </form>
     </div>
-</form>
+</main>
 @include("common.footer")
 </body>
-</html>
+</html>
\ No newline at end of file

节目名称	点播及追加	节目开始	节目结束时的画面
- $program->id])}}">编辑 - {{$program->name}} - {{$program->difficulty}} - {{$program->desc}} -	- @foreach($program->appends as $append) - - @endforeach -	- @foreach($program->video_pivots as $video_pivot) - - {{$video_pivot->created_at}} P{{$video_pivot->start_part}}#{{$video_pivot->start_time}} - @if($video_pivot->start_image) - - @else - 节目开始位置 - @endif - - @endforeach -	- @foreach($program->video_pivots as $video_pivot) - - P{{$video_pivot->stop_part}}#{{$video_pivot->stop_time}} - @if($video_pivot->start_image) - - @else - 节目结束位置 - @endif - - @endforeach -
BVID	节目开始时间	节目开始时的画面	节目结束时的画面	操作
- {{$video_pivot->video_bvid}} -	{{$video_pivot->created_at}}	- - {{$video_pivot->created_at}} P{{$video_pivot->start_part}}#{{$video_pivot->start_time}} - @if($video_pivot->start_image) - - @else - 节目开始位置 - @endif - -	- - P{{$video_pivot->stop_part}}#{{$video_pivot->stop_time}} - @if($video_pivot->start_image) - - @else - 节目结束位置 - @endif - -	- $video_pivot->id])}}">编辑 -