Update course detail page UI and logic for purchased state

frontend/src/app/course/[id]/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { api } from "@/lib/api";
-import { ArrowLeft, CheckCircle } from "lucide-react";
+import { ArrowLeft, Link as LinkIcon, Copy, X } from "lucide-react";
 import Link from "next/link";
 import { useAuthStore } from "@/lib/store";
 
@@ -15,14 +15,26 @@ export default function CourseDetail() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [course, setCourse] = useState<any>(null);
   const [loading, setLoading] = useState(true);
+  const [hasPurchased, setHasPurchased] = useState(false);
+  const [selectedLink, setSelectedLink] = useState<string | null>(null);
 
   useEffect(() => {
-    const fetchCourse = async () => {
+    const fetchData = async () => {
       try {
         const res = await api.get(`/api/courses/${id}`);
         if (res.success) {
           setCourse(res.data);
         }
+
+        // 检查购买状态
+        if (token) {
+          const myCoursesRes = await api.get('/api/courses/my');
+          if (myCoursesRes.success) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const isPurchased = myCoursesRes.data.some((c: any) => c.id === Number(id));
+            setHasPurchased(isPurchased);
+          }
+        }
       } catch (err) {
         console.error(err);
       } finally {
@@ -30,8 +42,8 @@ export default function CourseDetail() {
       }
     };
 
-    fetchCourse();
-  }, [id]);
+    fetchData();
+  }, [id, token]);
 
   const handleBuy = async () => {
     if (!token) {
@@ -54,6 +66,29 @@ export default function CourseDetail() {
     }
   };
 
+  const handleAccess = async () => {
+    try {
+      const res = await api.get(`/api/courses/${id}/access`);
+      if (res.success && res.data.hasAccess) {
+        setSelectedLink(res.data.driveLink);
+      } else {
+        alert('获取资料失败或无权限');
+      }
+    } catch (err) {
+      console.error(err);
+      alert('获取资料失败');
+    }
+  };
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      alert('资料链接已复制到剪贴板');
+    } catch (err) {
+      console.error('Failed to copy!', err);
+    }
+  };
+
   if (loading) {
     return <div className="animate-pulse h-96 bg-white rounded-xl"></div>;
   }
@@ -96,28 +131,88 @@ export default function CourseDetail() {
             <p className="whitespace-pre-line">{course.description}</p>
           </div>
           
-          <div className="bg-gray-50 rounded-xl p-6 mb-8">
-            <h4 className="font-semibold text-gray-900 mb-4">你将获得：</h4>
-            <ul className="space-y-3">
-              {['终身访问权限', '高质量学习资料', '支持手机和电视访问', '直达网盘链接'].map((item, i) => (
-                <li key={i} className="flex items-center text-gray-600">
-                  <CheckCircle className="w-5 h-5 text-green-500 mr-3" />
-                  {item}
-                </li>
-              ))}
-            </ul>
-          </div>
-          
-          <div className="flex justify-end pt-6 border-t">
-            <button 
-              onClick={handleBuy}
-              className="bg-blue-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200"
-            >
-              立即购买
-            </button>
+          <div className="flex justify-end pt-6 border-t gap-4">
+            {hasPurchased ? (
+              <>
+                <button 
+                  disabled
+                  className="bg-gray-100 text-gray-500 px-8 py-4 rounded-xl font-semibold text-lg cursor-not-allowed"
+                >
+                  已购买
+                </button>
+                <button 
+                  onClick={handleAccess}
+                  className="bg-blue-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200 flex items-center"
+                >
+                  <LinkIcon className="w-5 h-5 mr-2" />
+                  获取资料
+                </button>
+              </>
+            ) : (
+              <button 
+                onClick={handleBuy}
+                className="bg-blue-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200"
+              >
+                立即购买
+              </button>
+            )}
           </div>
         </div>
       </div>
+
+      {/* 资料链接弹窗 */}
+      {selectedLink && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+          <div className="bg-white rounded-2xl max-w-lg w-full p-6 shadow-xl">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-xl font-bold text-gray-900">课程学习资料</h3>
+              <button 
+                onClick={() => setSelectedLink(null)}
+                className="text-gray-400 hover:text-gray-600 transition-colors"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+            
+            <div className="bg-blue-50 border border-blue-100 rounded-xl p-4 mb-6">
+              <p className="text-sm text-blue-800 mb-2">请复制以下链接在浏览器中打开，或直接点击访问：</p>
+              <div className="flex items-center gap-2">
+                <input 
+                  type="text" 
+                  readOnly 
+                  value={selectedLink}
+                  className="flex-1 bg-white border border-blue-200 rounded-lg px-3 py-2 text-sm text-gray-700 outline-none"
+                />
+                <button 
+                  onClick={() => copyToClipboard(selectedLink)}
+                  className="p-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors"
+                  title="复制链接"
+                >
+                  <Copy className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+            
+            <div className="flex gap-3 justify-end">
+              <button 
+                onClick={() => setSelectedLink(null)}
+                className="px-5 py-2.5 border border-gray-200 text-gray-700 rounded-xl font-medium hover:bg-gray-50 transition-colors"
+              >
+                关闭
+              </button>
+              <a 
+                href={selectedLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="px-5 py-2.5 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition-colors"
+                onClick={() => setSelectedLink(null)}
+              >
+                直接访问
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }