From 31a0b5f7d635e7f95e042ec02a63276aab3c0c25 Mon Sep 17 00:00:00 2001
From: Tiaotiao <65841827@qq.com>
Date: Sun, 3 May 2026 11:47:34 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20med.php?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 med.php | 869 +++++++++++++++++++++++++-------------------------------
 1 file changed, 383 insertions(+), 486 deletions(-)

diff --git a/med.php b/med.php
index cf38c52..4a21b15 100644
--- a/med.php
+++ b/med.php
@@ -1,195 +1,123 @@
 <?php
 session_start();
 
-// 获取参数
-$category = $_GET['category'] ?? 'Model';
+// ---------- 参数获取与登录检查 ----------
+$category  = $_GET['category'] ?? 'Model';
 $contentId = $_GET['id'] ?? '';
-$type = $_GET['type'] ?? '';
+$type      = $_GET['type'] ?? '';
 
-// 获取用户数据
-$dt = null;
-if (isset($_SESSION['responseBody'])) {
-    $dt = is_string($_SESSION['responseBody']) ? json_decode($_SESSION['responseBody'], true) : $_SESSION['responseBody'];
-} else {
-    $redirectUrl = '/getv.php?r=' . urlencode('med.php?category=' . $category . '&id=' . $contentId . '&type=' . $type);
+if (!isset($_SESSION['token']) || !isset($_SESSION['authCode'])) {
+    $redirectUrl = '/getv.php?r=' . urlencode("med.php?category={$category}&id={$contentId}&type={$type}");
     header('Location: ' . $redirectUrl);
     exit;
 }
+$token    = $_SESSION['token'];
+$authCode = $_SESSION['authCode'];
 
-// 获取作品详情
+// ---------- 默认头像/封面 SVG ----------
+define('DEFAULT_AVATAR', 'data:image/svg+xml;base64,' . base64_encode('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="#e0e0e0"/><circle cx="50" cy="40" r="20" fill="#bdbdbd"/><path d="M30 75 Q50 60 70 75 Z" fill="#bdbdbd"/></svg>'));
+define('DEFAULT_COVER', 'data:image/svg+xml;base64,' . base64_encode('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400"><rect width="800" height="400" fill="#f0f0f0"/><path d="M400 240C444.183 240 480 204.183 480 160C480 115.817 444.183 80 400 80C355.817 80 320 115.817 320 160C320 204.183 355.817 240 400 240Z" fill="#cecece"/><path d="M480 280H320C317.911 280 316 281.911 316 284V224C316 222.089 317.911 220 320 220H480C482.089 220 484 222.089 484 224V284C484 281.911 482.089 280 480 280ZM320 224V280H480V224H320Z" fill="#cecece"/></svg>'));
+
+// ---------- API 请求函数 ----------
 function getContentSummary($contentId, $category, $token, $authCode) {
-    $baseUrl = 'http://nlm-api-cn.turtlesim.com/';
-    $url = $baseUrl . 'Contents/GetSummary';
-    
-    $requestData = [
-        'ContentID' => $contentId,
-        'Category' => $category,
-    ];
-    
+    $url = 'http://nlm-api-cn.turtlesim.com/Contents/GetSummary';
+    $body = json_encode(['ContentID' => $contentId, 'Category' => $category]);
     $headers = [
-        "Content-Type: application/json",
-        "Accept: application/json",
-        "Accept-Language: zh-CN",
-        "x-API-Token: " . $token,
-        "x-API-AuthCode: " . $authCode,
+        'Content-Type: application/json', 'Accept: application/json', 'Accept-Language: zh-CN',
+        'x-API-Token: ' . $token, 'x-API-AuthCode: ' . $authCode,
     ];
-    
     $ch = curl_init($url);
     curl_setopt_array($ch, [
-        CURLOPT_RETURNTRANSFER => true,
-        CURLOPT_HEADER => true,
-        CURLOPT_POST => true,
-        CURLOPT_HTTPHEADER => $headers,
-        CURLOPT_POSTFIELDS => json_encode($requestData),
-        CURLOPT_FOLLOWLOCATION => true,
-        CURLOPT_TIMEOUT => 15,
-        CURLOPT_USERAGENT => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
-        CURLOPT_SSL_VERIFYPEER => true,
+        CURLOPT_RETURNTRANSFER => true, CURLOPT_HEADER => true, CURLOPT_POST => true,
+        CURLOPT_HTTPHEADER => $headers, CURLOPT_POSTFIELDS => $body,
+        CURLOPT_TIMEOUT => 15, CURLOPT_USERAGENT => 'Mozilla/5.0', CURLOPT_SSL_VERIFYPEER => true,
     ]);
-    
     $response = curl_exec($ch);
-    if ($response === false) {
-        curl_close($ch);
-        return null;
-    }
-    
-    $statusCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
     $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
-    $body = substr($response, $headerSize);
+    $bodyResp = substr($response, $headerSize);
     curl_close($ch);
-    
-    $responseData = json_decode($body, true);
-    return json_last_error() === JSON_ERROR_NONE ? $responseData : null;
+    $data = json_decode($bodyResp, true);
+    return (json_last_error() === JSON_ERROR_NONE) ? $data : null;
 }
 
-// 获取改编列表
-function getDerivatives($contentId, $category, $token, $authCode) {
-    $baseUrl = 'http://nlm-api-cn.turtlesim.com/';
-    $url = $baseUrl . 'Contents/GetDerivatives';
-    
-    $requestData = [
-        'ContentID' => $contentId,
-        'Category' => $category,
-        'Language' => 'Chinese',
-        'WithSummary' => true
-    ];
-    
+function getDerivativesAndSupporters($contentId, $category, $token, $authCode) {
+    $url = 'http://nlm-api-cn.turtlesim.com/Contents/GetDerivatives';
+    $body = json_encode(['ContentID' => $contentId, 'Category' => $category]);
     $headers = [
-        "Content-Type: application/json",
-        "Accept: application/json",
-        "Accept-Language: zh-CN",
-        "x-API-Token: " . $token,
-        "x-API-AuthCode: " . $authCode,
+        'Content-Type: application/json', 'Accept: application/json', 'Accept-Language: zh-CN',
+        'x-API-Token: ' . $token, 'x-API-AuthCode: ' . $authCode,
     ];
-    
     $ch = curl_init($url);
     curl_setopt_array($ch, [
-        CURLOPT_RETURNTRANSFER => true,
-        CURLOPT_HEADER => true,
-        CURLOPT_POST => true,
-        CURLOPT_HTTPHEADER => $headers,
-        CURLOPT_POSTFIELDS => json_encode($requestData),
-        CURLOPT_FOLLOWLOCATION => true,
+        CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true,
+        CURLOPT_HTTPHEADER => $headers, CURLOPT_POSTFIELDS => $body,
         CURLOPT_TIMEOUT => 15,
     ]);
-    
     $response = curl_exec($ch);
-    $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
-    $body = substr($response, $headerSize);
+    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+    $curlError = curl_error($ch);
     curl_close($ch);
-    
-    $data = json_decode($body, true);
-    return json_last_error() === JSON_ERROR_NONE ? $data : null;
+
+    // 调试日志（上线后可注释）
+    // error_log("GetDerivatives HTTP Code: $httpCode, Error: $curlError, Response: $response");
+
+    if ($response === false || $httpCode !== 200) return null;
+    $data = json_decode($response, true);
+    if (json_last_error() !== JSON_ERROR_NONE) return null;
+    return $data['Data'] ?? null;
 }
 
-// 检查是否已收藏（Star）
 function isContentStarred($contentId, $category, $token, $authCode) {
-    $baseUrl = 'http://nlm-api-cn.turtlesim.com/';
-    $url = $baseUrl . 'Contents/IsStarred';
-    
-    $requestData = [
-        'ContentID' => $contentId,
-        'Category' => $category,
-    ];
-    
+    $url = 'http://nlm-api-cn.turtlesim.com/Contents/IsStarred';
+    $body = json_encode(['ContentID' => $contentId, 'Category' => $category]);
     $headers = [
-        "Content-Type: application/json",
-        "x-API-Token: " . $token,
-        "x-API-AuthCode: " . $authCode,
+        'Content-Type: application/json',
+        'x-API-Token: ' . $token, 'x-API-AuthCode: ' . $authCode,
     ];
-    
     $ch = curl_init($url);
     curl_setopt_array($ch, [
-        CURLOPT_RETURNTRANSFER => true,
-        CURLOPT_HEADER => true,
-        CURLOPT_POST => true,
-        CURLOPT_HTTPHEADER => $headers,
-        CURLOPT_POSTFIELDS => json_encode($requestData),
-        CURLOPT_TIMEOUT => 10,
+        CURLOPT_RETURNTRANSFER => true, CURLOPT_HEADER => true, CURLOPT_POST => true,
+        CURLOPT_HTTPHEADER => $headers, CURLOPT_POSTFIELDS => $body, CURLOPT_TIMEOUT => 10,
     ]);
-    
     $response = curl_exec($ch);
     $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
-    $body = substr($response, $headerSize);
+    $bodyResp = substr($response, $headerSize);
     curl_close($ch);
-    
-    $data = json_decode($body, true);
-    if ($data && isset($data['Data']) && is_bool($data['Data'])) {
-        return $data['Data'];
-    }
-    return false;
-}
-
-// 获取作品详情
-$contentData = null;
-if (!empty($contentId) && !empty($category)) {
-    $token = $_SESSION['token'] ?? '';
-    $authCode = $_SESSION['authCode'] ?? '';
-    
-    if (isset($token) && isset($authCode)) {
-        $contentData = getContentSummary($contentId, $category, $token, $authCode);
-    }
+    $data = json_decode($bodyResp, true);
+    return ($data && isset($data['Data']) && $data['Data'] === true);
 }
 
+// ---------- 获取数据 ----------
+$contentData = getContentSummary($contentId, $category, $token, $authCode);
 $content = $contentData['Data'] ?? null;
 
-// 获取改编列表
-$remixes = [];
-$isStarred = false;
-if ($content && $contentId && $category) {
-    $derivativesData = getDerivatives($contentId, $category, $token, $authCode);
-    if ($derivativesData && isset($derivativesData['Data']['Experiments']['Children-Models'])) {
-        $remixes = $derivativesData['Data']['Experiments']['Children-Models'];
-    }
-    // 获取初始收藏状态
-    $isStarred = isContentStarred($contentId, $category, $token, $authCode);
-}
+// 改编 + 支持者
+$derivativesData = getDerivativesAndSupporters($contentId, $category, $token, $authCode);
+$remixes     = $derivativesData['Experiments']['Children-Models'] ?? [];
+$supporters  = $derivativesData['Supporters'] ?? [];
+$parentModel = $derivativesData['Model'] ?? null;
 
-// 处理日期格式
-function formatDate($timestamp) {
-    return date('Y年m月d日', $timestamp / 1000);
+$isStarred = isContentStarred($contentId, $category, $token, $authCode);
+
+// ---------- 辅助函数 ----------
+function buildAvatarUrl($userId, $avatarId) {
+    if (!$avatarId || !$userId) return DEFAULT_AVATAR;
+    $base = 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/';
+    return $base . substr($userId,0,4) . '/' . substr($userId,4,2) . '/' . substr($userId,6,2) . '/' . substr($userId,8,16) . '/' . $avatarId . '.jpg!full';
 }
 
-// 页面标题映射
-$pageTitles = [
-    'explore' => '探索指南',
-    'featured' => '精选实验', 
-    'daily' => '每日模型',
-    'hot' => '热门实验',
-    'new' => '最新实验',
-    'visual' => '可视化编程',
-    'knowledge' => '实验知识库'
-];
-$pageTitle = $pageTitles[$type] ?? '作品详情';
+function buildThumbUrl($exp) {
+    if (($exp['Image'] ?? 0) < 0) return DEFAULT_COVER;
+    $base = 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/experiments/images/';
+    $id = $exp['ID'];
+    return $base . substr($id,0,4) . '/' . substr($id,4,2) . '/' . substr($id,6,2) . '/' . substr($id,8,16) . '/' . $exp['Image'] . '.jpg!full';
+}
 
-// 自定义标签解析器类
 class CustomTagParser {
     public static function parse(string $text): string {
         if (empty($text)) return '';
         $text = htmlspecialchars($text);
-        $text = self::parseMarkdownHeadings($text);
         $text = nl2br($text);
-        
         $patterns = [
             '/&lt;user=([a-f0-9]+)&gt;(.*?)&lt;\/user&gt;/i',
             '/&lt;experiment=([a-f0-9]+)&gt;(.*?)&lt;\/experiment&gt;/i',
@@ -202,7 +130,6 @@ public static function parse(string $text): string {
             '/&lt;i&gt;(.*?)&lt;\/i&gt;/i',
             '/&lt;a&gt;(.*?)&lt;\/a&gt;/i'
         ];
-        
         $replacements = [
             '<span class="RUser" data-user="$1">$2</span>',
             '<a href="med.php?id=$1&category=Experiment" class="experiment-link">$2</a>',
@@ -215,21 +142,7 @@ public static function parse(string $text): string {
             '<em>$1</em>',
             '<span class="blue-tag">$1</span>'
         ];
-        
         $text = preg_replace($patterns, $replacements, $text);
-        $text = self::parseSimpleMarkdown($text);
-        return $text;
-    }
-    
-    private static function parseMarkdownHeadings(string $text): string {
-        $text = preg_replace('/^# (.+)$/m', '<strong class="h1">$1</strong>', $text);
-        $text = preg_replace('/^## (.+)$/m', '<strong class="h2">$1</strong>', $text);
-        $text = preg_replace('/^### (.+)$/m', '<strong class="h3">$1</strong>', $text);
-        $text = preg_replace('/^#### (.+)$/m', '<strong class="h4">$1</strong>', $text);
-        return $text;
-    }
-    
-    private static function parseSimpleMarkdown(string $text): string {
         $text = preg_replace('/\*\*(.*?)\*\*/', '<strong>$1</strong>', $text);
         $text = preg_replace('/\*(.*?)\*/', '<em>$1</em>', $text);
         $text = preg_replace('/~~(.*?)~~/', '<del>$1</del>', $text);
@@ -244,204 +157,176 @@ private static function parseSimpleMarkdown(string $text): string {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer">
-    <meta name="google" content="notranslate">
-    <title><?= htmlspecialchars($content['LocalizedSubject']['Chinese'] ?? $pageTitle) ?> - Turtle Universe Web</title>
+    <title><?= htmlspecialchars($content['LocalizedSubject']['Chinese'] ?? $content['Subject'] ?? '作品详情') ?> - Turtle Universe Web</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link rel='stylesheet' href='../styles/main.css'/>
+    <link rel="stylesheet" href="../styles/main.css">
     <style>
-        *{margin:0;padding:0;box-sizing:border-box}body{font-family:v-sans,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.6;margin:0;background:#f5f7fa;color:#333}.RUser{color:cornflowerblue}a[internal]{color:cornflowerblue;text-decoration:none}.basic-layout{display:flex;height:100vh}.layout-left{flex:1;position:relative}.layout-right{flex:1;overflow:hidden}.cover{height:100%;background-size:cover;background-position:center;position:relative;display:flex;flex-direction:column;padding:20px}.return{width:2.7em;cursor:pointer}.title{font-size:24px;font-weight:bold;color:white;margin:10px 0;text-align:left}.tag{display:inline-block;padding:4px 12px;margin:2px;border-radius:16px;background:rgba(255,255,255,0.2);color:white;font-size:12px}.coverBottom{margin-top:auto}.btns{display:flex;justify-content:space-around;gap:10px}.enter{padding:8px 24px;border-radius:25px;background:#2080f0;color:white;border:none;cursor:pointer;font-size:14px}.scroll-container{height:100%;overflow-y:auto}.context{padding:20px}.n-tabs{width:100%}.n-tabs-wrapper{display:flex;justify-content:space-evenly}.n-tabs-tab{padding:10px 0;cursor:pointer;color:#666}.n-tabs-tab--active{color:#18a058;font-weight:500}.n-tab-pane{margin-top:20px}.gray{background:#f8f9fa;border-radius:12px;padding:15px}.intro{text-align:left;line-height:1.8}.intro p{margin-bottom:15px}.intro h1,.intro h2,.intro h3{color:#2080f0;margin:20px 0 10px}.intro ul,.intro ol{margin:10px 0;padding-left:20px}.intro li{margin:5px 0}.user-info{display:flex;align-items:center;padding:15px;background:white;border-radius:10px;margin:5px 0}.user-avatar{width:50px;height:50px;border-radius:50%;margin-right:15px}.user-details{text-align:left}.user-name{color:#007bff;margin:0;font-size:16px}.user-bio{color:gray;margin:5px 0 0}.action-buttons{display:flex;gap:10px;margin:20px 0}.btn{padding:10px 20px;border-radius:20px;border:none;cursor:pointer;font-size:14px}.btn-primary{background:#2080f0;color:white}.btn-secondary{background:#f8f9fa;color:#333;border:1px solid #ddd}.error{text-align:center;padding:60px 20px;color:#e74c3c}.empty{text-align:center;padding:60px 20px;color:#666}.back-button{position:absolute;top:20px;left:20px;background:rgba(255,255,255,0.2);color:white;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;z-index:10}.footer{position:fixed;bottom:0;left:0;right:0;background:white;display:flex;justify-content:space-around;padding:10px 0;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:1000}.footer div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:#666}.footer div.active{color:#667eea}.footer i{font-size:20px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0}.stat-item{text-align:center;padding:10px;background:white;border-radius:8px}.stat-number{font-size:18px;font-weight:bold;color:#2080f0}.stat-label{font-size:12px;color:#666}.markdown-content h1{font-size:24px;margin:20px 0 10px}.markdown-content h2{font-size:20px;margin:15px 0 8px}.markdown-content h3{font-size:16px;margin:12px 0 6px}.markdown-content ul,.markdown-content ol{padding-left:20px}.markdown-content li{margin:5px 0}
-        
-        /* 新增顶部按钮 */
-        .icon-btn {
-            background: rgba(255,255,255,0.25);
-            border: none;
-            color: white;
-            width: 36px; height: 36px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            font-size: 16px;
-            backdrop-filter: blur(4px);
-        }
-        /* 互动图标栏 */
-        .action-icons {
-            display: flex;
-            justify-content: space-around;
-            padding: 10px 0;
-        }
-        .action-item {
-            color: white;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-            font-size: 12px;
-            cursor: pointer;
-        }
-        .action-item i {
-            font-size: 20px;
-        }
-        /* 讨论按钮 */
-        .btn-secondary-outline {
-            padding: 8px 24px;
-            border-radius: 25px;
-            background: rgba(255,255,255,0.2);
-            color: white;
-            border: 1px solid rgba(255,255,255,0.5);
-            cursor: pointer;
-            font-size: 14px;
-            backdrop-filter: blur(4px);
-        }
-        
-        /* 原有自定义标签样式 */
-        .intro .h1, .intro .h2, .intro .h3, .intro .h4 { font-weight: bold; margin: 12px 0 6px 0; line-height: 1.2; }
-        .intro .h1 { font-size: 20px; }
-        .intro .h2 { font-size: 19px; }
-        .intro .h3 { font-size: 18px; }
-        .intro .h4 { font-size: 17px; }
-        .blue-tag { color: #0000FF; font-size: 1em; text-decoration: none; border: none; padding: 0; margin: 0; background: none; font-weight: normal; }
-        .experiment-link, .discussion-link, .model-link, .external-link { color: skyblue; font-size: 1em; text-decoration: none; border: none; padding: 0; margin: 0 2px; background: none; font-weight: normal; }
-        .experiment-link:hover, .discussion-link:hover, .model-link:hover, .external-link:hover { text-decoration: underline; }
-        .notification_text code { background-color: #f5f5f5; padding: 2px 4px; border-radius: 2px; font-family: monospace; font-size: 0.9em; color: #c7254e; }
-        .notification_text del { color: #999; text-decoration: line-through; }
-        .notification_text strong { font-weight: 600; }
-        .notification_text em { font-style: italic; }
-        .RUser { color: #1890ff; font-weight: 500; }
-        
-        @media (max-width:768px){
+        *{margin:0;padding:0;box-sizing:border-box}
+        body{font-family:v-sans,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.6;background:#f5f7fa;color:#333}
+        .basic-layout{display:flex;height:100vh}
+        .layout-left{flex:1;position:relative}
+        .layout-right{flex:1;overflow:hidden}
+        .cover{height:100%;background-size:cover;background-position:center;position:relative;display:flex;flex-direction:column;padding:20px}
+        .title-btn{font-size:24px;font-weight:bold;color:white;margin:10px 0;text-align:left;background:transparent;border:none;cursor:pointer;display:inline-block;position:relative}
+        .tag{display:inline-block;padding:4px 12px;margin:2px;border-radius:16px;background:rgba(255,255,255,0.2);color:white;font-size:12px}
+        .cover-bottom{margin-top:auto}
+        .btns{display:flex;justify-content:space-around;gap:10px}
+        .enter{padding:8px 24px;border-radius:25px;background:#2080f0;color:white;border:none;cursor:pointer;font-size:14px}
+        .scroll-container{height:100%;overflow-y:auto}
+        .context{padding:20px}
+        .n-tabs{width:100%}
+        .n-tabs-wrapper{display:flex;justify-content:space-evenly}
+        .n-tabs-tab{padding:10px 0;cursor:pointer;color:#666}
+        .n-tabs-tab--active{color:#18a058;font-weight:500}
+        .n-tab-pane{margin-top:20px}
+        .gray{background:#f8f9fa;border-radius:12px;padding:15px}
+        .intro{text-align:left;line-height:1.8}
+        .intro p{margin-bottom:15px}
+        .intro h1,.intro h2,.intro h3{color:#2080f0;margin:20px 0 10px}
+        .intro ul,.intro ol{margin:10px 0;padding-left:20px}
+        .intro li{margin:5px 0}
+        .user-info{display:flex;align-items:center;padding:15px;background:white;border-radius:10px;margin:5px 0}
+        .user-avatar{width:50px;height:50px;border-radius:50%;margin-right:15px}
+        .user-details{text-align:left}
+        .user-name{color:#007bff;margin:0;font-size:16px}
+        .user-bio{color:gray;margin:5px 0 0}
+        .action-icons{display:flex;justify-content:space-around;padding:10px 0}
+        .action-item{color:white;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;cursor:pointer}
+        .action-item i{font-size:20px}
+        .btn-secondary-outline{padding:8px 24px;border-radius:25px;background:rgba(255,255,255,0.2);color:white;border:1px solid rgba(255,255,255,0.5);cursor:pointer;font-size:14px}
+        .title-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:2000;display:flex;justify-content:center}
+        .title-popup-box{background:white;border-radius:12px;padding:16px;margin-top:80px;width:280px;box-shadow:0 8px 30px rgba(0,0,0,0.3);z-index:2001;position:absolute}
+        .title-popup-item{padding:12px 0;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:15px;color:#333}
+        .title-popup-item:last-child{border-bottom:none}
+        .title-popup-item i{width:20px;color:#2080f0}
+        .supporter-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
+        .supporter-item{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid white;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
+        .supporter-item img{width:100%;height:100%;object-fit:cover}
+        textarea,input[type=text]{padding:10px 12px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;outline:none;width:100%;resize:vertical}
+        textarea:focus,input[type=text]:focus{border-color:#2080f0;box-shadow:0 0 0 3px rgba(32,128,240,0.1)}
+        .comment-submit{padding:10px 18px;background:#2080f0;color:white;border:none;border-radius:10px;cursor:pointer;font-size:14px;white-space:nowrap}
+        .RUser{color:#1890ff;font-weight:500}
+        .experiment-link,.discussion-link,.model-link,.external-link{color:skyblue;text-decoration:none}
+        .experiment-link:hover,.discussion-link:hover,.model-link:hover,.external-link:hover{text-decoration:underline}
+        @media (max-width:767px){
             .basic-layout{flex-direction:column}
             .layout-left,.layout-right{flex:none}
             .layout-left{height:50vh}
             .layout-right{height:50vh}
-            .stats-grid{grid-template-columns:repeat(2,1fr)}
+            .title-popup-box{margin-top:60px}
         }
     </style>
 </head>
 <body>
-    <div id="app">
-        <div class="basic-layout">
-            <!-- 左侧预览区 -->
-            <div class="layout-left">
-                <!-- 顶部操作栏 -->
-                <div style="position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; z-index: 10;">
-                    <button class="icon-btn" onclick="window.history.back()"><i class="fas fa-arrow-left"></i></button>
-                    <div style="display: flex; gap: 8px;">
-                        <button class="icon-btn" onclick="shareExperiment()"><i class="fas fa-share-alt"></i></button>
-                        <button class="icon-btn" onclick="toggleMenu()"><i class="fas fa-ellipsis-h"></i></button>
+<div id="app">
+    <div class="basic-layout">
+        <!-- 左侧预览区 -->
+        <div class="layout-left">
+            <div style="position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;z-index:10">
+                <button class="icon-btn" onclick="history.back()"><i class="fas fa-arrow-left"></i></button>
+                <div style="display:flex;gap:8px">
+                    <button class="icon-btn" onclick="shareExperiment()"><i class="fas fa-share-alt"></i></button>
+                    <button class="icon-btn" onclick="toggleMenu()"><i class="fas fa-ellipsis-h"></i></button>
+                </div>
+            </div>
+            <div class="cover" style="background-image:url('<?= $content ? buildThumbUrl($content) : DEFAULT_COVER ?>');">
+                <div>
+                    <button class="title-btn" id="titleBtn" onclick="openTitleMenu()"><?= htmlspecialchars($content['LocalizedSubject']['Chinese'] ?? $content['Subject']) ?></button>
+                    <div style="margin-top:8px;">
+                        <span class="tag" style="color:aquamarine;font-weight:bold"><?= htmlspecialchars($content['Category']) ?></span>
+                        <span class="tag"><i class="fas fa-eye"></i> <?= $content['Visits'] ?? 0 ?></span>
+                        <?php if ($content && !empty($content['Tags'])): ?>
+                            <?php foreach (array_slice($content['Tags'], 0, 5) as $tag): ?>
+                                <span class="tag"><?= htmlspecialchars($tag) ?></span>
+                            <?php endforeach; ?>
+                        <?php endif; ?>
                     </div>
                 </div>
-                
-                <!-- 封面及内容 -->
-                <div class="cover" style="background-image: url('<?php 
-                    if ($content && isset($content['Image'])) {
-                        echo 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/experiments/images/' . 
-                             substr($content['ID'], 0, 4) . '/' .
-                             substr($content['ID'], 4, 2) . '/' .
-                             substr($content['ID'], 6, 2) . '/' .
-                             substr($content['ID'], 8, 16) . '/' .
-                             $content['Image'] . '.jpg!full';
-                    } else {
-                        echo 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDgwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik00MDAgMjQwQzQ0NC4xODMgMjQwIDQ4MCAyMDQuMTgzIDQ4MCAxNjBDNDgwIDExNS44MTcgNDQ0LjE4MyA4MCA0MDAgODBDMzU1LjgxNyA4MCAzMjAgMTE1LjgxNyAzMjAgMTYwQzMyMCAyMDQuMTgzIDM1NS44MTcgMjQwIDQwMCAyNDBaIiBmaWxsPSIjQ0VDRUNFIi8+CjxwYXRoIGQ9Ik00ODAgMjgwSDMyMEMzMTcuOTExIDI4MCAzMTYgMjgxLjkxMSAzMTYgMjg0VjIyNEMzMTYgMjIyLjA4OSAzMTcuOTExIDIyMCAzMjAgMjIwSDQ4MEM0ODIuMDg5IDIyMCA0ODQgMjIyLjA4OSA0ODQgMjI0VjI4NEM0ODQgMjgxLjkxMSA0ODIuMDg5IDI4MCA0ODAgMjgwWk0zMjAgMjI0VjI4MEg0ODBWMjI0SDMyMFoiIGZpbGw9IiNDRUNFQ0UiLz4KPC9zdmc+';
-                    }
-                ?>');">
-                    <div style="text-align: left;">
-                        <div class="title"><?= htmlspecialchars($content['LocalizedSubject']['Chinese'] ?? $content['Subject']) ?></div>
-                        <div>
-                            <span class="tag" style="color: aquamarine; font-weight: bold;"><?= htmlspecialchars($content['Category']) ?></span>
-                            <span class="tag"><i class="fas fa-eye"></i>&nbsp;<?= $content['Visits'] ?? 0 ?></span>
-                            <?php if ($content && isset($content['Tags'])): ?>
-                                <?php foreach (array_slice($content['Tags'], 0, 5) as $tag): ?>
-                                    <span class="tag"><?= htmlspecialchars($tag) ?></span>
-                                <?php endforeach; ?>
-                            <?php endif; ?>
-                        </div>
+                <div class="cover-bottom">
+                    <div class="action-icons">
+                        <div class="action-item" id="btnSupport" onclick="handleSupport()"><i class="far fa-heart"></i><span>赞 <?= $content['Supports'] ?? 0 ?></span></div>
+                        <div class="action-item" id="btnStar" onclick="handleStar()"><i class="<?= $isStarred ? 'fas' : 'far' ?> fa-star"></i><span>收藏</span></div>
+                        <div class="action-item" onclick="switchTab('info')"><i class="far fa-comment"></i><span><?= $content['Comments'] ?? 0 ?></span></div>
+                        <div class="action-item" onclick="shareExperiment()"><i class="fas fa-share"></i><span>分享</span></div>
                     </div>
-                    
-                    <div class="coverBottom">
-                        <!-- 互动图标栏 -->
-                        <div class="action-icons">
-                            <div class="action-item" id="btnSupport" onclick="handleSupport()">
-                                <i class="far fa-heart"></i><span>赞 <?= $content['Supports'] ?? 0 ?></span>
-                            </div>
-                            <div class="action-item" id="btnStar" onclick="handleStar()">
-                                <i class="<?= $isStarred ? 'fas' : 'far' ?> fa-star"></i><span>收藏</span>
-                            </div>
-                            <div class="action-item" onclick="switchTab('info')">
-                                <i class="far fa-comment"></i><span><?= $content['Comments'] ?? 0 ?></span>
-                            </div>
-                            <div class="action-item" onclick="shareExperiment()">
-                                <i class="fas fa-share"></i><span>分享</span>
-                            </div>
-                        </div>
-                        
-                        <!-- 底部双按钮 -->
-                        <div class="btns">
-                            <button class="enter" onclick="runExperiment()">进入实验</button>
-                            <button class="btn-secondary-outline" onclick="switchTab('info')">参与讨论</button>
-                        </div>
+                    <div class="btns">
+                        <button class="enter" onclick="runExperiment()">进入实验</button>
+                        <button class="btn-secondary-outline" onclick="switchTab('info')">参与讨论</button>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <!-- 右侧内容区 -->
-            <div class="layout-right">
-                <div class="scroll-container">
-                    <div class="context">
-                        <div class="n-tabs">
-                            <div class="n-tabs-wrapper">
-                                <div class="n-tabs-tab n-tabs-tab--active" onclick="switchTab('intro')">简介</div>
-                                <div class="n-tabs-tab" onclick="switchTab('info')">评论(<?= $content['Comments'] ?? 0 ?>)</div>
-                                <div class="n-tabs-tab" onclick="switchTab('remix')">改编(<?= count($remixes) ?>)</div>
-                            </div>
-                            
-                            <div class="n-tab-pane">
-                                <div class="gray">
-                                    <!-- 简介标签页 -->
-                                    <div id="intro-tab" class="qh">
-                                        <div class="user-info" onclick="getUserCard('<?= $content['User']['ID'] ?>')">
-                                            <img class="user-avatar" src="<?php
-                                                if ($content && isset($content['User']['Avatar'])) {
-                                                    echo 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/' . 
-                                                         substr($content['User']['ID'], 0, 4) . '/' .
-                                                         substr($content['User']['ID'], 4, 2) . '/' .
-                                                         substr($content['User']['ID'], 6, 2) . '/' .
-                                                         substr($content['User']['ID'], 8, 16) . '/' .
-                                                         $content['User']['Avatar'] . '.jpg!full';
-                                                } else {
-                                                    echo 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMjUiIGZpbGw9IiNGMEYwRjAiLz4KPHBhdGggZD0iTTI1IDMzQzI5LjQxODMgMzMgMzMgMjkuNDE4MyAzMyAyNUMzMyAyMC41ODE3IDI5LjQxODMgMTcgMjUgMTdDMjAuNTgxNyAxNyAxNyAyMC41ODE3IDE3IDI1QzE3IDI5LjQxODMgMjAuNTgxNyAzMyAyNSAzM1oiIGZpbGw9IiNDRUNFQ0UiLz4KPHBhdGggZD0iTTMzIDM3SDE3QzE2LjQ0NzcgMzcgMTYgMzYuNTUyMyAxNiAzNlYyNkMxNiAyNS40NDc3IDE2LjQ0NzcgMjUgMTcgMjVIMzNDMzMuNTUyMyAyNSAzNCAyNS40NDc3IDM0IDI2VjM2QzM0IDM2LjU1MjMgMzMuNTUyMyAzNyAzMyAzN1pNMTcgMjZWMzZIMzNWMjZIMTdaIiBmaWxsPSIjQ0VDRUNFIi8+Cjwvc3ZnPgo=';
-                                                }
-                                            ?>" alt="用户头像">
-                                            <div class="user-details">
-                                                <p class="user-name"><?= htmlspecialchars($content['User']['Nickname'] ?? '未知用户') ?></p>
-                                                <p class="user-bio"><?= htmlspecialchars($content['User']['Signature'] ?? '暂无简介') ?></p>
-                                            </div>
+        <!-- 右侧内容区 -->
+        <div class="layout-right">
+            <div class="scroll-container">
+                <div class="context">
+                    <div class="n-tabs">
+                        <div class="n-tabs-wrapper">
+                            <div class="n-tabs-tab n-tabs-tab--active" onclick="switchTab('intro')">简介</div>
+                            <div class="n-tabs-tab" onclick="switchTab('info')">评论(<?= $content['Comments'] ?? 0 ?>)</div>
+                            <div class="n-tabs-tab" onclick="switchTab('remix')">改编(<?= count($remixes) ?>)</div>
+                        </div>
+                        <div class="n-tab-pane">
+                            <div class="gray">
+                                <!-- 简介 -->
+                                <div id="intro-tab" class="qh">
+                                    <div class="user-info" onclick="event.stopPropagation(); getUserCard('<?= $content['User']['ID'] ?>')">
+                                        <img class="user-avatar" src="<?= buildAvatarUrl($content['User']['ID'], $content['User']['Avatar'] ?? 0) ?>" alt="">
+                                        <div class="user-details">
+                                            <p class="user-name"><?= htmlspecialchars($content['User']['Nickname'] ?? '未知') ?></p>
+                                            <p class="user-bio"><?= htmlspecialchars($content['User']['Signature'] ?? '') ?></p>
                                         </div>
-                                        <div style="margin: 5px; background-color: white; border-radius: 10px; padding: 15px;" class='tab-content'>
-                                            <h3 style="color: #2080f0; text-align: left; margin-top: 2px; margin-bottom: 10px;">作品介绍</h3>
-                                            <div class="markdown-content intro">
-                                                <?php if ($content && isset($content['LocalizedDescription']['Chinese'])): ?>
-                                                    <?= CustomTagParser::parse($content['LocalizedDescription']['Chinese']) ?>
-                                                <?php else: ?>
-                                                    <?= implode('<br>', array_map(function($a) {return CustomTagParser::parse($a);}, $content['Description'])) ?>
-                                                <?php endif; ?>
-                                            </div>
+                                    </div>
+                                    <!-- 改编自信息 -->
+                                    <?php if ($parentModel && $parentModel['ID']): ?>
+                                    <div class="user-info" style="cursor:pointer" onclick="location.href='med.php?id=<?= $parentModel['ID'] ?>&category=Model'">
+                                        <img class="user-avatar" src="<?= buildThumbUrl($parentModel) ?>" alt="">
+                                        <div class="user-details">
+                                            <p class="user-name" style="font-size:14px">改编自「<?= htmlspecialchars($parentModel['LocalizedSubject']['Chinese'] ?? $parentModel['Subject'] ?? '未知') ?>」</p>
+                                            <p class="user-bio">作者 <?= htmlspecialchars($parentModel['User']['Nickname'] ?? '') ?></p>
                                         </div>
                                     </div>
-
-                                    <!-- 评论标签页 -->
-                                    <div id="info-tab" class="qh" style="display: none;">
-                                        <div id="comments">加载评论中...</div>
-                                        <?php include 'comment/comment.html' ?>
+                                    <?php endif; ?>
+                                    <div style="background:white;border-radius:10px;padding:15px;margin-top:5px">
+                                        <h3 style="color:#2080f0;text-align:left;margin-bottom:10px">作品介绍</h3>
+                                        <div class="markdown-content intro">
+                                            <?php if ($content && isset($content['LocalizedDescription']['Chinese'])): ?>
+                                                <?= CustomTagParser::parse($content['LocalizedDescription']['Chinese']) ?>
+                                            <?php else: ?>
+                                                <?= implode('<br>', array_map(function($s){return CustomTagParser::parse($s);}, $content['Description'] ?? [])) ?>
+                                            <?php endif; ?>
+                                        </div>
                                     </div>
-                                    
-                                    <!-- 改编标签页 -->
-                                    <div id="remix-tab" class="qh" style="display: none;">
-                                        <div id="remixes-list">
-                                            <div style="text-align:center;padding:20px;color:#666;">加载改编列表中...</div>
+                                    <!-- 支持者 -->
+                                    <?php if (!empty($supporters)): ?>
+                                    <div style="background:white;border-radius:10px;padding:15px;margin-top:10px">
+                                        <h4 style="margin-bottom:10px">支持者</h4>
+                                        <div class="supporter-list">
+                                            <?php foreach ($supporters as $supporter): 
+                                                $supAvatar = $supporter['Avatar'] ?? 0;
+                                                $supUserId = $supporter['ID'];
+                                                $imgSrc = ($supAvatar > 0) ? buildAvatarUrl($supUserId, $supAvatar) : DEFAULT_AVATAR;
+                                                $onError = ($supAvatar > 0) ? "this.onerror=null;this.src='" . DEFAULT_AVATAR . "';" : '';
+                                            ?>
+                                                <div class="supporter-item" onclick="event.stopPropagation();getUserCard('<?= $supUserId ?>')" title="<?= htmlspecialchars($supporter['Nickname']) ?>">
+                                                    <img src="<?= $imgSrc ?>" alt="" <?= $onError ? 'onerror="' . $onError . '"' : '' ?>>
+                                                </div>
+                                            <?php endforeach; ?>
                                         </div>
                                     </div>
+                                    <?php endif; ?>
+                                </div>
+
+                                <!-- 评论 -->
+                                <div id="info-tab" class="qh" style="display:none">
+                                    <div id="comments">加载评论中...</div>
+                                    <?php include 'comment/comment.html' ?>
+                                </div>
+
+                                <!-- 改编 -->
+                                <div id="remix-tab" class="qh" style="display:none">
+                                    <div id="remixes-list"><div style="text-align:center;padding:20px;color:#666">加载中...</div></div>
                                 </div>
                             </div>
                         </div>
@@ -450,171 +335,183 @@ private static function parseSimpleMarkdown(string $text): string {
             </div>
         </div>
     </div>
+</div>
+
+<script>
+// ---------- 全局变量 ----------
+const contentId = '<?= $contentId ?>';
+const category = '<?= $category ?>';
+const subject = '<?= htmlspecialchars($content['LocalizedSubject']['Chinese'] ?? $content['Subject']) ?>';
+
+// 标题菜单
+function openTitleMenu() {
+    const exist = document.querySelector('.title-popup-overlay');
+    if (exist) exist.remove();
+    const overlay = document.createElement('div');
+    overlay.className = 'title-popup-overlay';
+    overlay.innerHTML = `
+        <div class="title-popup-box">
+            <div class="title-popup-item" onclick="copyID()"><i class="fas fa-copy"></i> 复制序号：${contentId}</div>
+            <div class="title-popup-item" onclick="copyLinkCode()"><i class="fas fa-code"></i> 复制链接代码</div>
+            <div class="title-popup-item" onclick="copyShareLink()"><i class="fas fa-link"></i> 复制分享链接</div>
+        </div>`;
+    document.body.appendChild(overlay);
+    overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
+}
+function copyID() { navigator.clipboard.writeText(contentId).then(()=>{ alert('序号已复制'); closeTitleMenu(); }); }
+function copyLinkCode() {
+    const code = `<${category}=${contentId}>${subject}</${category}>`;
+    navigator.clipboard.writeText(code).then(()=>{ alert('链接代码已复制'); closeTitleMenu(); });
+}
+function copyShareLink() { navigator.clipboard.writeText(location.href).then(()=>{ alert('分享链接已复制'); closeTitleMenu(); }); }
+function closeTitleMenu() { const o = document.querySelector('.title-popup-overlay'); if(o) o.remove(); }
 
-    <script>
-        // 初始收藏状态
-        var starStatus = <?= $isStarred ? 'true' : 'false' ?>;
-        var supportStatus = false; // 无初始API，默认未赞
+// 标签切换
+function switchTab(tab) {
+    document.querySelectorAll('.qh').forEach(t => t.style.display = 'none');
+    document.querySelectorAll('.n-tabs-tab').forEach(t => t.classList.remove('n-tabs-tab--active'));
+    document.getElementById(tab + '-tab').style.display = 'block';
+    const idx = {intro:0, info:1, remix:2}[tab];
+    document.querySelectorAll('.n-tabs-tab')[idx].classList.add('n-tabs-tab--active');
+    if (tab === 'remix') loadRemixes();
+    if (tab === 'info') fetchComments();
+}
+
+// 改编列表（从 PHP 注入数据）
+function loadRemixes() {
+    const container = document.getElementById('remixes-list');
+    const remixes = <?= json_encode($remixes, JSON_UNESCAPED_UNICODE) ?>;
+    if (!Array.isArray(remixes) || remixes.length === 0) {
+        container.innerHTML = '<div class="empty">暂无改编作品</div>';
+        return;
+    }
+    container.innerHTML = remixes.map(r => {
+        const title = r.LocalizedSubject?.Chinese || r.Subject || '未命名';
+        const uid = r.User?.ID || '';
+        const avatar = uid && r.User?.Avatar ? `http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/${uid.substring(0,4)}/${uid.substring(4,6)}/${uid.substring(6,8)}/${uid.substring(8,16)}/${r.User.Avatar}.jpg!full` : '<?= DEFAULT_AVATAR ?>';
+        return `<div class="user-info" style="cursor:pointer" onclick="location.href='med.php?id=${r.ID}&category=Model'">
+                    <img class="user-avatar" src="${avatar}" onerror="this.onerror=null;this.src='<?= DEFAULT_AVATAR ?>';">
+                    <div class="user-details">
+                        <p class="user-name">${title}</p>
+                        <p class="user-bio">作者：${r.User?.Nickname||'匿名'}</p>
+                    </div>
+                </div>`;
+    }).join('');
+}
 
-        // 标签切换
-        function switchTab(tabName) {
-            document.querySelectorAll('.qh').forEach(tab => tab.style.display = 'none');
-            document.querySelectorAll('.n-tabs-tab').forEach(tab => tab.classList.remove('n-tabs-tab--active'));
-            
-            const pane = document.getElementById(tabName + '-tab');
-            if (pane) pane.style.display = 'block';
-            
-            const tabs = document.querySelectorAll('.n-tabs-tab');
-            const idx = {intro:0, info:1, remix:2}[tabName];
-            if (tabs[idx]) tabs[idx].classList.add('n-tabs-tab--active');
-            
-            // 切换到改编时加载数据
-            if (tabName === 'remix' && document.getElementById('remixes-list').innerText.includes('加载')) {
-                loadRemixes();
+// 评论（动态加载）
+function fetchComments() {
+    fetch('/comment/?category=<?= $category ?>&id=<?= $contentId ?>')
+        .then(r => r.text())
+        .then(html => { document.getElementById('comments').innerHTML = html; })
+        .catch(() => { document.getElementById('comments').innerHTML = '<div class="error">加载失败</div>'; });
+}
+
+// 点赞/收藏
+let starStatus = <?= $isStarred ? 'true' : 'false' ?>;
+let supportStatus = false;
+function handleSupport() {
+    const ns = supportStatus ? 0 : 1;
+    fetch(`/api/star.php?action=support&id=${contentId}&category=${category}&status=${ns}`, {method:'POST'})
+        .then(r => r.json()).then(d => {
+            if(d.Success) {
+                supportStatus = !supportStatus;
+                const i = document.querySelector('#btnSupport i');
+                i.className = supportStatus ? 'fas fa-heart' : 'far fa-heart';
+                const span = document.querySelector('#btnSupport span');
+                const cur = parseInt(span.innerText.match(/\d+/)?.[0]||0);
+                span.innerText = '赞 ' + (cur + (supportStatus?1:-1));
             }
-            // 切换到评论时立即加载一次
-            if (tabName === 'info') {
-                fetchComments();
+        });
+}
+function handleStar() {
+    const ns = starStatus ? 0 : 1;
+    fetch(`/api/star.php?action=star&id=${contentId}&category=${category}&status=${ns}`, {method:'POST'})
+        .then(r => r.json()).then(d => {
+            if(d.Success) {
+                starStatus = !starStatus;
+                document.querySelector('#btnStar i').className = starStatus ? 'fas fa-star' : 'far fa-star';
             }
+        });
+}
+
+// 分享
+function shareExperiment() {
+    const data = { title: subject, url: location.href };
+    if (navigator.share && navigator.canShare && navigator.canShare(data)) {
+        navigator.share(data).catch(()=>{});
+    } else {
+        navigator.clipboard?.writeText(location.href).then(()=>alert('链接已复制')) || prompt('复制链接：', location.href);
+    }
+}
+function toggleMenu() { alert('菜单功能即将开放'); }
+function runExperiment() { location.href = 'experiments/?id=' + contentId; }
+
+// ---------- 用户卡片（原始逻辑） ----------
+var currentCard = null, isOpeningCard = false;
+function getUserCard(uid) {
+    if (isOpeningCard) return;
+    if (currentCard) { currentCard.remove(); currentCard = null; }
+    isOpeningCard = true;
+    fetch('/user/card.php?id=' + uid)
+        .then(r => r.text())
+        .then(html => {
+            const overlay = document.createElement('div');
+            overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:9999';
+            overlay.innerHTML = '<div style="position:relative">' + html + '</div>';
+            document.body.appendChild(overlay);
+            currentCard = overlay;
+            isOpeningCard = false;
+            overlay.addEventListener('click', function(e) { if (e.target === overlay) { overlay.remove(); currentCard = null; } }, {once: true});
+        })
+        .catch(() => { isOpeningCard = false; });
+}
+document.addEventListener('keydown', e => { if (e.key === 'Escape' && currentCard) { currentCard.remove(); currentCard = null; } });
+
+// ---------- 事件委托：用户卡片 & 评论回复 ----------
+document.addEventListener('click', function(e) {
+    const avatar = e.target.closest('.user-avatar, #avatar');
+    const name = e.target.closest('.user-name, .name');
+    const ruser = e.target.closest('.RUser');
+    if (avatar || name || ruser) {
+        e.stopPropagation();
+        let uid = null;
+        if (ruser) {
+            uid = ruser.getAttribute('data-user');
+        } else {
+            const cc = e.target.closest('#notification_container');
+            if (cc) uid = cc.getAttribute('data-rid');
         }
-        
-        // 加载改编列表
-        function loadRemixes() {
-            const remixes = <?= json_encode($remixes, JSON_UNESCAPED_UNICODE) ?>;
-            const container = document.getElementById('remixes-list');
-            if (!remixes || remixes.length === 0) {
-                container.innerHTML = '<div class="empty">暂无改编作品</div>';
-                return;
+        if (!uid) {
+            const ui = e.target.closest('.user-info');
+            if (ui) {
+                const onclick = ui.getAttribute('onclick') || '';
+                const match = onclick.match(/getUserCard\('([^']+)'\)/);
+                if (match) uid = match[1];
             }
-            container.innerHTML = remixes.map(item => {
-                const title = item.LocalizedSubject?.Chinese || item.Subject || '未命名';
-                const id = item.ID;
-                const user = item.User?.Nickname || '匿名';
-                const avatarBase = 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/';
-                const avatarUrl = item.User?.Avatar ? 
-                    avatarBase + id.substring(0,4) + '/' + id.substring(4,6) + '/' + id.substring(6,8) + '/' + id.substring(8,16) + '/' + item.User.Avatar + '.jpg!full' :
-                    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMjUiIGZpbGw9IiNGMEYwRjAiLz4KPHBhdGggZD0iTTI1IDMzQzI5LjQxODMgMzMgMzMgMjkuNDE4MyAzMyAyNUMzMyAyMC41ODE3IDI5LjQxODMgMTcgMjUgMTdDMjAuNTgxNyAxNyAxNyAyMC41ODE3IDE3IDI1QzE3IDI5LjQxODMgMjAuNTgxNyAzMyAyNSAzM1oiIGZpbGw9IiNDRUNFQ0UiLz4KPHBhdGggZD0iTTMzIDM3SDE3QzE2LjQ0NzcgMzcgMTYgMzYuNTUyMyAxNiAzNlYyNkMxNiAyNS40NDc3IDE2LjQ0NzcgMjUgMTcgMjVIMzNDMzMuNTUyMyAyNSAzNCAyNS40NDc3IDM0IDI2VjM2QzM0IDM2LjU1MjMgMzMuNTUyMyAzNyAzMyAzN1pNMTcgMjZWMzZIMzNWMjZIMTdaIiBmaWxsPSIjQ0VDRUNFIi8+Cjwvc3ZnPgo=';
-                return `<div class="user-info" style="cursor:pointer;" onclick="location.href='med.php?id=${id}&category=Model'">
-                            <img class="user-avatar" src="${avatarUrl}" alt="封面">
-                            <div class="user-details">
-                                <p class="user-name">${title}</p>
-                                <p class="user-bio">作者: ${user}</p>
-                            </div>
-                        </div>`;
-            }).join('');
-        }
-        
-        // 动态加载评论（复用原有逻辑）
-        function fetchComments() {
-            fetch('/comment/?category=<?= $category ?>&id=<?= $contentId ?>')
-                .then(response => response.text())
-                .then(html => { document.getElementById('comments').innerHTML = html; })
-                .catch(e => { document.getElementById('comments').innerHTML = '<div class="error">加载评论失败</div>'; });
-        }
-        
-        // 点赞
-        function handleSupport() {
-            const newStatus = supportStatus ? 0 : 1;
-            fetch('/api/star.php?action=support&id=<?= $contentId ?>&category=<?= $category ?>&status=' + newStatus, { method: 'POST' })
-                .then(r => r.json())
-                .then(data => {
-                    if (data.Success) {
-                        supportStatus = !supportStatus;
-                        const btn = document.getElementById('btnSupport');
-                        const icon = btn.querySelector('i');
-                        icon.className = supportStatus ? 'fas fa-heart' : 'far fa-heart';
-                        const span = btn.querySelector('span');
-                        const cur = parseInt(span.innerText.match(/\d+/)?.[0] || 0);
-                        span.innerText = '赞 ' + (cur + (supportStatus ? 1 : -1));
-                    } else {
-                        alert('操作失败');
-                    }
-                });
         }
-        
-        // 收藏
-        function handleStar() {
-            const newStatus = starStatus ? 0 : 1;
-            fetch('/api/star.php?action=star&id=<?= $contentId ?>&category=<?= $category ?>&status=' + newStatus, { method: 'POST' })
-                .then(r => r.json())
-                .then(data => {
-                    if (data.Success) {
-                        starStatus = !starStatus;
-                        document.getElementById('btnStar').querySelector('i').className = starStatus ? 'fas fa-star' : 'far fa-star';
-                    } else {
-                        alert('操作失败');
-                    }
-                });
-        }
-        
-        // 分享
-        function shareExperiment() {
-            if (navigator.share) {
-                navigator.share({
-                    title: '<?= htmlspecialchars($content['LocalizedSubject']['Chinese'] ?? $content['Subject']) ?>',
-                    url: window.location.href
-                }).catch(()=>{});
-            } else {
-                prompt('复制链接分享:', window.location.href);
+        if (uid) getUserCard(uid);
+        return;
+    }
+    // 回复
+    const cb = e.target.closest('#notification_container');
+    if (cb) {
+        const nameEl = cb.querySelector('.name');
+        const rid = cb.getAttribute('data-rid');
+        if (nameEl && rid) {
+            const ta = document.querySelector('textarea');
+            if (ta) {
+                ta.value = '回复@' + nameEl.innerText.trim() + ': ';
+                ta.focus();
             }
         }
-        
-        // 菜单
-        function toggleMenu() {
-            alert('菜单功能（举报/编辑等）即将开放');
-        }
-
-        // 原有实验进入
-        function runExperiment() {
-            location.href='experiments/?id=<?= $contentId ?>';
-        }
-
-        function favoriteExperiment() { alert('收藏功能已移至图标栏'); }
-        function remixExperiment() { alert('改编功能即将开放'); }
-
-        // 保持原有定时刷新评论
-        setInterval(fetchComments, 10000);
-        
-        // 记录访问（静默）
-        fetch('/api/visit.php?id=<?= $contentId ?>&category=<?= $category ?>', { method: 'POST' });
-    </script>
-    
-    <!-- 保留原有的用户卡片及交互脚本 -->
-    <script>
-    // 以下是原有的 getUserCard 等复杂逻辑，保持不变
-    var currentCard = null;
-    var isOpeningCard = false;
-    function getUserCard(uid) {
-        if (isOpeningCard) return;
-        if (currentCard) { currentCard.remove(); currentCard = null; }
-        isOpeningCard = true;
-        fetch('/user/card.php?id=' + uid)
-            .then(r => r.text())
-            .then(html => {
-                const overlay = document.createElement('div');
-                overlay.id = 'userCardOverlay';
-                overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:9999;';
-                overlay.innerHTML = '<div style="position:relative;">' + html + '</div>';
-                document.body.appendChild(overlay);
-                currentCard = overlay;
-                isOpeningCard = false;
-                overlay.addEventListener('click', function(e) { if (e.target === overlay) { overlay.remove(); currentCard = null; } }, {once: true});
-            })
-            .catch(e => { isOpeningCard = false; });
     }
-    document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && currentCard) { currentCard.remove(); currentCard = null; } });
-    
-    // 原有RUser点击跳转
-    setInterval(() => {
-        document.querySelectorAll('.RUser').forEach(el => {
-            el.removeEventListener('click', userClickHandler);
-            el.addEventListener('click', userClickHandler = function(e) {
-                e.stopPropagation();
-                const uid = this.getAttribute('data-user');
-                if (uid) window.location.href = 'user.php?id=' + uid;
-            });
-        });
-    }, 500);
-    </script>
+});
+
+// 定时刷新评论
+setInterval(fetchComments, 10000);
+// 记录访问
+fetch('/api/visit.php?id=' + contentId + '&category=' + category, {method:'POST'});
+</script>
 </body>
 </html>
\ No newline at end of file

From 8e57c5a7f62790d824f51b3191a5452157f54fd0 Mon Sep 17 00:00:00 2001
From: Tiaotiao <65841827@qq.com>
Date: Sun, 3 May 2026 11:48:17 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20user.php?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 user.php | 681 +++++++++++++++++++++++++------------------------------
 1 file changed, 308 insertions(+), 373 deletions(-)

diff --git a/user.php b/user.php
index f39073d..62b24de 100644
--- a/user.php
+++ b/user.php
@@ -1,110 +1,62 @@
 <?php
 session_start();
 
-// 获取参数
-$targetId = $_GET['id'] ?? '';
+// 参数（兼容 category=User，便于 comment.html 内 JS 解析）
+$targetId   = $_GET['id'] ?? '';
+$category   = $_GET['category'] ?? 'User';   // 主要为了 URL 中包含 category=User
 $targetName = $_GET['name'] ?? '';
 
-// 若未登录，重定向去获取 token
 if (!isset($_SESSION['token']) || !isset($_SESSION['authCode'])) {
     $redirectUrl = '/getv.php?r=' . urlencode($_SERVER['REQUEST_URI']);
     header('Location: ' . $redirectUrl);
     exit;
 }
-
-$token = $_SESSION['token'];
+$token    = $_SESSION['token'];
 $authCode = $_SESSION['authCode'];
 
-// ---------- 后端 API 调用函数 ----------
+define('DEFAULT_AVATAR', 'data:image/svg+xml;base64,' . base64_encode('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="#e0e0e0"/><circle cx="50" cy="40" r="20" fill="#bdbdbd"/><path d="M30 75 Q50 60 70 75 Z" fill="#bdbdbd"/></svg>'));
 
-/**
- * 获取用户基本信息与关系（调用 Users/GetUser）
- */
-function getUserInfo(string $userId, string $token, string $authCode): ?array
-{
+// ---------- API ----------
+function getUserInfo(string $userId, string $token, string $authCode): ?array {
     $url = 'http://nlm-api-cn.turtlesim.com/Users/GetUser';
     $body = json_encode(['ID' => $userId]);
-    $headers = [
-        'Content-Type: application/json',
-        'x-API-Token: ' . $token,
-        'x-API-AuthCode: ' . $authCode,
-    ];
-
+    $headers = ['Content-Type: application/json', 'x-API-Token: ' . $token, 'x-API-AuthCode: ' . $authCode];
     $ch = curl_init($url);
-    curl_setopt_array($ch, [
-        CURLOPT_RETURNTRANSFER => true,
-        CURLOPT_HEADER => true,
-        CURLOPT_POST => true,
-        CURLOPT_HTTPHEADER => $headers,
-        CURLOPT_POSTFIELDS => $body,
-        CURLOPT_TIMEOUT => 15,
-    ]);
+    curl_setopt_array($ch, [CURLOPT_RETURNTRANSFER => true, CURLOPT_HEADER => true, CURLOPT_POST => true, CURLOPT_HTTPHEADER => $headers, CURLOPT_POSTFIELDS => $body, CURLOPT_TIMEOUT => 15]);
     $response = curl_exec($ch);
     $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
     $bodyResp = substr($response, $headerSize);
     curl_close($ch);
-
     $data = json_decode($bodyResp, true);
     return (json_last_error() === JSON_ERROR_NONE && isset($data['Data'])) ? $data['Data'] : null;
 }
 
-/**
- * 获取用户主页作品列表（调用 Contents/GetProfile）
- */
-function getUserProfileProjects(string $userId, string $token, string $authCode): ?array
-{
+function getUserProfileProjects(string $userId, string $token, string $authCode): ?array {
     $url = 'http://nlm-api-cn.turtlesim.com/Contents/GetProfile';
     $body = json_encode(['ID' => $userId]);
-    $headers = [
-        'Content-Type: application/json',
-        'x-API-Token: ' . $token,
-        'x-API-AuthCode: ' . $authCode,
-    ];
-
+    $headers = ['Content-Type: application/json', 'x-API-Token: ' . $token, 'x-API-AuthCode: ' . $authCode];
     $ch = curl_init($url);
-    curl_setopt_array($ch, [
-        CURLOPT_RETURNTRANSFER => true,
-        CURLOPT_HEADER => true,
-        CURLOPT_POST => true,
-        CURLOPT_HTTPHEADER => $headers,
-        CURLOPT_POSTFIELDS => $body,
-        CURLOPT_TIMEOUT => 15,
-    ]);
+    curl_setopt_array($ch, [CURLOPT_RETURNTRANSFER => true, CURLOPT_HEADER => true, CURLOPT_POST => true, CURLOPT_HTTPHEADER => $headers, CURLOPT_POSTFIELDS => $body, CURLOPT_TIMEOUT => 15]);
     $response = curl_exec($ch);
     $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
     $bodyResp = substr($response, $headerSize);
     curl_close($ch);
-
     $data = json_decode($bodyResp, true);
     return (json_last_error() === JSON_ERROR_NONE && isset($data['Data'])) ? $data['Data'] : null;
 }
 
-// ---------- 获取数据 ----------
-
-$userInfo = null;
-$profile = null;
-
+// 获取用户数据
+$userInfo = null; $profile = null;
 if (!empty($targetId)) {
     $userInfo = getUserInfo($targetId, $token, $authCode);
-    $profile = getUserProfileProjects($targetId, $token, $authCode);
+    $profile  = getUserProfileProjects($targetId, $token, $authCode);
 } elseif (!empty($targetName)) {
-    // 通过昵称查找用户
+    // 用昵称查 ID（简单实现）
     $url = 'http://nlm-api-cn.turtlesim.com/Users/GetUser';
     $body = json_encode(['Name' => $targetName]);
-    $headers = [
-        'Content-Type: application/json',
-        'x-API-Token: ' . $token,
-        'x-API-AuthCode: ' . $authCode,
-    ];
+    $headers = ['Content-Type: application/json', 'x-API-Token: ' . $token, 'x-API-AuthCode: ' . $authCode];
     $ch = curl_init($url);
-    curl_setopt_array($ch, [
-        CURLOPT_RETURNTRANSFER => true,
-        CURLOPT_HEADER => true,
-        CURLOPT_POST => true,
-        CURLOPT_HTTPHEADER => $headers,
-        CURLOPT_POSTFIELDS => $body,
-        CURLOPT_TIMEOUT => 15,
-    ]);
+    curl_setopt_array($ch, [CURLOPT_RETURNTRANSFER => true, CURLOPT_HEADER => true, CURLOPT_POST => true, CURLOPT_HTTPHEADER => $headers, CURLOPT_POSTFIELDS => $body, CURLOPT_TIMEOUT => 15]);
     $response = curl_exec($ch);
     $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
     $bodyResp = substr($response, $headerSize);
@@ -113,80 +65,48 @@ function getUserProfileProjects(string $userId, string $token, string $authCode)
     if ($data && isset($data['Data'])) {
         $userInfo = $data['Data'];
         $targetId = $userInfo['User']['ID'] ?? '';
-        if ($targetId) {
-            $profile = getUserProfileProjects($targetId, $token, $authCode);
-        }
+        if ($targetId) $profile = getUserProfileProjects($targetId, $token, $authCode);
     }
 }
 
-// 提取字段（依据 GetUser 实际响应）
-$targetUser = $userInfo['User'] ?? null;
-$statistic  = $userInfo['Statistic'] ?? null;
-
-// 关注数、粉丝数来自 Statistic
+$targetUser     = $userInfo['User'] ?? null;
+$statistic      = $userInfo['Statistic'] ?? null;
 $followingCount = $statistic['FollowingCount'] ?? 0;
 $followerCount  = $statistic['FollowerCount'] ?? 0;
+$isFollowed     = ($userInfo['Relation'] ?? 0) == 1;
+$coverSummary   = $statistic['Cover'] ?? null;
+$experiments    = $profile['Experiments'] ?? [];
 
-// 关系（Relation 为 int，1 表示已关注）
-$isFollowed = ($userInfo['Relation'] ?? 0) == 1;
-
-// 封面作品（来自 Statistic.Cover）
-$coverSummary = $statistic['Cover'] ?? null;
-
-// 作品分组（Profile 接口返回的 Experiments 字典）
-$experiments = $profile['Experiments'] ?? [];
-
-// 模块名称映射
 $moduleOrder = [
-    'Featured-Models' => '精选实验',
-    'Featured-Discussions' => '精选讨论',
-    'Featured-Experiments' => '精选实验',
-    'Popular-Models' => '热门实验',
-    'Popular-Discussions' => '热门讨论',
-    'Popular-Experiments' => '热门实验',
-    'Latest-Models' => '最新实验',
-    'Latest-Discussions' => '最新讨论',
-    'Latest-Experiments' => '最新实验',
+    'Featured-Models' => '精选实验', 'Featured-Discussions' => '精选讨论', 'Featured-Experiments' => '精选实验',
+    'Popular-Models' => '热门实验', 'Popular-Discussions' => '热门讨论', 'Popular-Experiments' => '热门实验',
+    'Latest-Models' => '最新实验', 'Latest-Discussions' => '最新讨论', 'Latest-Experiments' => '最新实验',
 ];
 
-// 头像 URL
 function buildAvatarUrl($userId, $avatarId) {
-    if ($avatarId > 0) {
-        $base = 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/';
-        return $base . substr($userId,0,4) . '/' . substr($userId,4,2) . '/' . substr($userId,6,2) . '/' . substr($userId,8,16) . '/' . $avatarId . '.jpg!full';
-    }
-    return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iNDAiIGZpbGw9IiNFMEUwRTAiLz4KPHBhdGggZD0iTTQwIDUwQzQ1LjUyIDUwIDUwIDQ1LjUyIDUwIDQwQzUwIDM0LjQ4IDQ1LjUyIDMwIDQwIDMwQzM0LjQ4IDMwIDMwIDM0LjQ4IDMwIDQwQzMwIDQ1LjUyIDM0LjQ4IDUwIDQwIDUwWiIgZmlsbD0iI0JEQkRCRCIvPgo8cGF0aCBkPSJNNTIgNjBIMjhDMjcuNDQ3NyA2MCAyNyA1OS41NTIzIDI3IDU5VjQ5QzI3IDQ4LjQ0NzcgMjcuNDQ3NyA0OCAyOCA0OEg1MkM1Mi41NTIzIDQ4IDUzIDQ4LjQ0NzcgNTMgNDlWNTlDNTMgNTkuNTUyMyA1Mi41NTIzIDYwIDUyIDYwWk0yOCA0OVY1OUg1MlY0OUgyOFoiIGZpbGw9IiNCREJEQkQiLz4KPC9zdmc+';
+    if ($avatarId <= 0 || !$userId) return DEFAULT_AVATAR;
+    return 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/' . substr($userId,0,4) . '/' . substr($userId,4,2) . '/' . substr($userId,6,2) . '/' . substr($userId,8,16) . '/' . $avatarId . '.jpg!full';
 }
-
-// 作品缩略图 URL
-function buildThumbUrl($item) {
-    if (($item['Image'] ?? 0) > 0) {
-        $base = 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/experiments/images/';
-        $id = $item['ID'];
-        return $base . substr($id,0,4) . '/' . substr($id,4,2) . '/' . substr($id,6,2) . '/' . substr($id,8,16) . '/' . $item['Image'] . '.jpg!full';
-    }
-    return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNDUiIHZpZXdCb3g9IjAgMCA2MCA0NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjQ1IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0zMCAyMk0zMiAxOEgzOEw0MCAyMkw0MiAxOEg0OEw0NSAyMkw0NyAxOEg1Mkw0NSAyNEgzNUwzMCAyMloiIGZpbGw9IiNCRUJFQkUiLz4KPC9zdmc+';
+function buildThumbUrl($exp) {
+    if (($exp['Image'] ?? 0) <= 0) return DEFAULT_AVATAR;
+    $id = $exp['ID'];
+    return 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/experiments/images/' . substr($id,0,4) . '/' . substr($id,4,2) . '/' . substr($id,6,2) . '/' . substr($id,8,16) . '/' . $exp['Image'] . '.jpg!full';
 }
-
-// 当前登录用户 ID (用于判断留言归属)
-$currentUserId = $_SESSION['user_id'] ?? '';
 ?>
 <!DOCTYPE html>
 <html lang="zh-CN" translate="no">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="referrer" content="no-referrer">
     <title><?= htmlspecialchars($targetUser['Nickname'] ?? '用户主页') ?> - Turtle Universe Web</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link rel='stylesheet' href='../styles/main.css'/>
+    <link rel="stylesheet" href="../styles/main.css">
     <style>
         *{margin:0;padding:0;box-sizing:border-box}
         body{font-family:v-sans,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.6;background:#f5f7fa;color:#333}
         .basic-layout{display:flex;height:100vh}
         .layout-left{flex:1;position:relative;background:#2c3e50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;padding:20px}
         .layout-right{flex:1;overflow:hidden}
-        .cover-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0.3}
         .top-bar{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;z-index:10}
         .icon-btn{background:rgba(255,255,255,0.25);border:none;color:white;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;backdrop-filter:blur(4px)}
         .user-info-box{position:relative;text-align:center;padding:20px 0}
@@ -222,24 +142,20 @@ function buildThumbUrl($item) {
         .work-meta{font-size:12px;color:#888;display:flex;gap:8px}
         .empty-state{text-align:center;color:#999;padding:40px}
 
-        /* 留言区域样式 */
-        .comment-list{padding:0;list-style:none}
-        .comment-item{display:flex;padding:12px 0;border-bottom:1px solid #f0f0f0}
-        .comment-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px;flex-shrink:0}
-        .comment-body{flex:1}
-        .comment-header{display:flex;justify-content:space-between;margin-bottom:4px}
-        .comment-author{font-weight:500;color:#2080f0}
-        .comment-time{font-size:12px;color:#999}
-        .comment-content{word-break:break-word}
-        .comment-post-box{display:flex;gap:8px;margin-top:20px}
-        .comment-textarea{flex:1;padding:8px;border-radius:8px;border:1px solid #ddd;resize:none;font-size:14px}
-        .comment-submit{padding:8px 16px;background:#2080f0;color:white;border:none;border-radius:8px;cursor:pointer;white-space:nowrap}
-
-        /* 粉丝列表样式 */
-        .fans-list{list-style:none}
-        .fans-item{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0;cursor:pointer}
-        .fans-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px;flex-shrink:0}
-        .fans-nickname{font-weight:500}
+        /* 评论 / 留言统一样式（与 comment/index.php 完全一致） */
+        #notification_container { display: flex; padding: 12px 0; align-items: flex-start; }
+        .img { margin-right: 12px; flex-shrink: 0; }
+        #avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #e0e0e0; }
+        .notification { flex: 1; min-width: 0; }
+        .notification_title { display: flex; align-items: center; margin-bottom: 4px; }
+        .name { font-weight: 600; font-size: 15px; color: #1a1a1a; flex: 1; }
+        .time { font-size: 13px; color: #999; margin-left: 8px; }
+        .notification_message { margin-top: 2px; }
+        .notification_text { font-size: 15px; color: #333; line-height: 1.4; word-break: break-word; }
+        .RUser { color: #1890ff; font-weight: 500; }
+        .n-divider { display: flex; align-items: center; margin: 16px 0; }
+        .n-divider__line { flex: 1; height: 1px; background-color: #efeff5; }
+        .n-divider__line--left { margin-right: 0; }
 
         @media (min-width:768px) {
             .card-list{grid-template-columns:repeat(2,1fr)}
@@ -252,271 +168,290 @@ function buildThumbUrl($item) {
     </style>
 </head>
 <body>
-    <div id="app">
-        <div class="basic-layout">
-            <!-- 左侧用户信息区 -->
-            <div class="layout-left">
-                <div class="cover-bg" style="background-image:url('');"></div>
-                <div class="top-bar">
-                    <button class="icon-btn" onclick="window.history.back()"><i class="fas fa-arrow-left"></i></button>
-                    <div style="display:flex;gap:8px">
-                        <button class="icon-btn" onclick="shareProfile()"><i class="fas fa-share-alt"></i></button>
-                        <button class="icon-btn" onclick="toggleMenu()"><i class="fas fa-ellipsis-h"></i></button>
-                    </div>
+<div id="app">
+    <div class="basic-layout">
+        <!-- 左侧用户信息区（不变） -->
+        <div class="layout-left">
+            <div class="top-bar">
+                <button class="icon-btn" onclick="history.back()"><i class="fas fa-arrow-left"></i></button>
+                <div style="display:flex;gap:8px">
+                    <button class="icon-btn" onclick="shareProfile()"><i class="fas fa-share-alt"></i></button>
+                    <button class="icon-btn" onclick="toggleMenu()"><i class="fas fa-ellipsis-h"></i></button>
                 </div>
-                <div class="user-info-box">
-                    <img class="user-avatar-large" src="<?= buildAvatarUrl($targetUser['ID'] ?? '', $targetUser['Avatar'] ?? 0) ?>" alt="头像">
-                    <div class="user-nickname"><?= htmlspecialchars($targetUser['Nickname'] ?? '未知用户') ?></div>
-                    <div class="user-tags">
-                        <?php if ($targetUser['Verification'] === 'Editor'): ?><span class="user-tag">编辑</span><?php endif; ?>
-                        <?php if ($targetUser['Verification'] === 'Volunteer'): ?><span class="user-tag">志愿者</span><?php endif; ?>
-                    </div>
-                    <div class="stats-row">
-                        <div class="stat-item"><span class="stat-num"><?= $followingCount ?></span><span class="stat-label">关注</span></div>
-                        <div class="stat-item"><span class="stat-num"><?= $followerCount ?></span><span class="stat-label">粉丝</span></div>
-                    </div>
-                    <?php if ($coverSummary): ?>
-                    <div class="cover-hint" onclick="location.href='med.php?id=<?= $coverSummary['ID'] ?>&category=<?= $coverSummary['Category'] ?>'">
-                        📌 <?= htmlspecialchars($coverSummary['Subject'] ?? '封面作品') ?>
-                    </div>
-                    <?php endif; ?>
-                    <div class="action-buttons">
-                        <button id="followBtn" class="btn-follow <?= $isFollowed ? 'following' : '' ?>" onclick="toggleFollow()">
-                            <i class="fas <?= $isFollowed ? 'fa-check' : 'fa-plus' ?>"></i>
-                            <span><?= $isFollowed ? '已关注' : '关注' ?></span>
-                        </button>
-                        <button class="btn-message" onclick="switchTab('comments')">
-                            <i class="far fa-comment"></i> 留言
-                        </button>
-                    </div>
+            </div>
+            <div class="user-info-box">
+                <img class="user-avatar-large" src="<?= buildAvatarUrl($targetUser['ID'] ?? '', $targetUser['Avatar'] ?? 0) ?>" alt="">
+                <div class="user-nickname"><?= htmlspecialchars($targetUser['Nickname'] ?? '未知用户') ?></div>
+                <div class="user-tags">
+                    <?php if ($targetUser['Verification'] === 'Editor'): ?><span class="user-tag">编辑</span><?php endif; ?>
+                    <?php if ($targetUser['Verification'] === 'Volunteer'): ?><span class="user-tag">志愿者</span><?php endif; ?>
+                </div>
+                <div class="stats-row">
+                    <div class="stat-item"><span class="stat-num"><?= $followingCount ?></span><span class="stat-label">关注</span></div>
+                    <div class="stat-item"><span class="stat-num"><?= $followerCount ?></span><span class="stat-label">粉丝</span></div>
+                </div>
+                <?php if ($coverSummary): ?>
+                <div class="cover-hint" onclick="location.href='med.php?id=<?= $coverSummary['ID'] ?>&category=<?= $coverSummary['Category'] ?>'">
+                    📌 <?= htmlspecialchars($coverSummary['Subject'] ?? '封面作品') ?>
+                </div>
+                <?php endif; ?>
+                <div class="action-buttons">
+                    <button id="followBtn" class="btn-follow <?= $isFollowed ? 'following' : '' ?>" onclick="toggleFollow()">
+                        <i class="fas <?= $isFollowed ? 'fa-check' : 'fa-plus' ?>"></i>
+                        <span><?= $isFollowed ? '已关注' : '关注' ?></span>
+                    </button>
+                    <button class="btn-message" onclick="switchTab('comments')"><i class="far fa-comment"></i> 留言</button>
                 </div>
             </div>
+        </div>
 
-            <!-- 右侧内容区 -->
-            <div class="layout-right">
-                <div class="scroll-container">
-                    <div class="content-area">
-                        <div class="tab-bar">
-                            <div class="tab-item active" data-tab="works">作品</div>
-                            <div class="tab-item" data-tab="comments">留言</div>
-                            <div class="tab-item" data-tab="fans">粉丝</div>
-                        </div>
+        <!-- 右侧内容区 -->
+        <div class="layout-right">
+            <div class="scroll-container">
+                <div class="content-area">
+                    <div class="tab-bar">
+                        <div class="tab-item active" data-tab="works">作品</div>
+                        <div class="tab-item" data-tab="comments">留言</div>
+                        <div class="tab-item" data-tab="fans">粉丝</div>
+                    </div>
 
-                        <!-- 作品标签页 -->
-                        <div id="works-tab" class="tab-content">
-                            <?php if (!empty($experiments)): ?>
-                                <?php foreach ($experiments as $key => $list):
-                                    if (empty($list)) continue;
-                                    $title = $moduleOrder[$key] ?? $key;
-                                ?>
-                                <div class="module">
-                                    <div class="module-header">
-                                        <span class="module-title"><?= $title ?></span>
-                                        <a href="#" class="more-link">更多 &gt;</a>
-                                    </div>
-                                    <div class="card-list">
-                                        <?php foreach ($list as $exp): ?>
-                                        <div class="work-card" onclick="location.href='med.php?id=<?= $exp['ID'] ?>&category=<?= $exp['Category'] ?>'">
-                                            <img class="work-thumb" src="<?= buildThumbUrl($exp) ?>" alt="">
-                                            <div class="work-info">
-                                                <div class="work-title"><?= htmlspecialchars($exp['LocalizedSubject']['Chinese'] ?? $exp['Subject']) ?></div>
-                                                <div class="work-meta">
-                                                    <span><?= htmlspecialchars($exp['User']['Nickname'] ?? '') ?></span>
-                                                    <?php if (!empty($exp['Tags'])): ?>
-                                                        <span><?= implode(' · ', array_slice($exp['Tags'], 0, 2)) ?></span>
-                                                    <?php endif; ?>
-                                                </div>
+                    <!-- 作品标签页 -->
+                    <div id="works-tab" class="tab-content">
+                        <?php if (!empty($experiments)): ?>
+                            <?php foreach ($experiments as $key => $list):
+                                if (empty($list)) continue;
+                                $title = $moduleOrder[$key] ?? $key;
+                            ?>
+                            <div class="module">
+                                <div class="module-header">
+                                    <span class="module-title"><?= $title ?></span>
+                                    <a href="#" class="more-link">更多 &gt;</a>
+                                </div>
+                                <div class="card-list">
+                                    <?php foreach ($list as $exp): ?>
+                                    <div class="work-card" onclick="location.href='med.php?id=<?= $exp['ID'] ?>&category=<?= $exp['Category'] ?>'">
+                                        <img class="work-thumb" src="<?= buildThumbUrl($exp) ?>" alt="">
+                                        <div class="work-info">
+                                            <div class="work-title"><?= htmlspecialchars($exp['LocalizedSubject']['Chinese'] ?? $exp['Subject']) ?></div>
+                                            <div class="work-meta">
+                                                <span><?= htmlspecialchars($exp['User']['Nickname'] ?? '') ?></span>
+                                                <?php if (!empty($exp['Tags'])): ?>
+                                                    <span><?= implode(' · ', array_slice($exp['Tags'], 0, 2)) ?></span>
+                                                <?php endif; ?>
                                             </div>
                                         </div>
-                                        <?php endforeach; ?>
                                     </div>
+                                    <?php endforeach; ?>
                                 </div>
-                                <?php endforeach; ?>
-                            <?php else: ?>
-                                <div class="empty-state">暂无作品</div>
-                            <?php endif; ?>
-                        </div>
-
-                        <!-- 留言标签页 -->
-                        <div id="comments-tab" class="tab-content" style="display:none">
-                            <ul id="commentList" class="comment-list"></ul>
-                            <div class="comment-post-box">
-                                <textarea id="commentInput" class="comment-textarea" rows="2" placeholder="写下你的留言..."></textarea>
-                                <button class="comment-submit" onclick="postComment()">发送</button>
                             </div>
-                        </div>
+                            <?php endforeach; ?>
+                        <?php else: ?>
+                            <div class="empty-state">暂无作品</div>
+                        <?php endif; ?>
+                    </div>
+
+                    <!-- 留言标签页 -->
+                    <div id="comments-tab" class="tab-content" style="display:none">
+                        <!-- 关键修改：容器 ID 必须为 comments，以便 sm 函数刷新时找到 -->
+                        <div id="comments">加载中...</div>
+                        <!-- 直接 include 与 med.php 完全相同的输入组件 -->
+                        <?php include 'comment/comment.html' ?>
+                    </div>
 
-                        <!-- 粉丝标签页 -->
-                        <div id="fans-tab" class="tab-content" style="display:none">
-                            <ul id="fansList" class="fans-list"></ul>
-                        </div>
+                    <!-- 粉丝标签页（占位） -->
+                    <div id="fans-tab" class="tab-content" style="display:none">
+                        <ul id="fansList" class="fans-list"></ul>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-
-    <script>
-        // 标签切换
-        function switchTab(tabName) {
-            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
-            document.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');
-            const activeTab = document.querySelector(`.tab-item[data-tab="${tabName}"]`);
-            if (activeTab) activeTab.classList.add('active');
-            const content = document.getElementById(tabName + '-tab');
-            if (content) content.style.display = 'block';
-
-            // 动态加载内容
-            if (tabName === 'comments') loadComments();
-            if (tabName === 'fans') loadFans();
-        }
-
-        // 初始标签点击事件
-        document.querySelectorAll('.tab-item').forEach(tab => {
-            tab.addEventListener('click', function() {
-                switchTab(this.dataset.tab);
-            });
-        });
-
-        // ---------- 留言功能 ----------
-        function loadComments() {
-            fetch('/api/get_comments.php?id=<?= $targetId ?>&type=User&skip=0&take=20')
-                .then(res => res.json())
-                .then(data => {
-                    const list = document.getElementById('commentList');
-                    list.innerHTML = '';
-                    if (data.Success && data.Data && data.Data.Comments) {
-                        data.Data.Comments.forEach(comment => {
-                            const author = comment.User?.Nickname || '匿名';
-                            const avatarId = comment.User?.Avatar || 0;
-                            const uid = comment.User?.ID || '';
-                            const avatarUrl = uid ? 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/' + uid.substring(0,4)+'/'+uid.substring(4,6)+'/'+uid.substring(6,8)+'/'+uid.substring(8,16)+'/'+avatarId+'.jpg!full' : 'data:image/svg+xml,...';
-                            const content = comment.Content;
-                            const time = new Date(comment.Created).toLocaleString();
-                            const li = document.createElement('li');
-                            li.className = 'comment-item';
-                            li.innerHTML = `
-                                <img class="comment-avatar" src="${avatarUrl}" onerror="this.src='data:image/svg+xml,...'">
-                                <div class="comment-body">
-                                    <div class="comment-header">
-                                        <span class="comment-author" onclick="location.href='user.php?id=${uid}'">${author}</span>
-                                        <span class="comment-time">${time}</span>
-                                    </div>
-                                    <div class="comment-content">${escapeHtml(content)}</div>
-                                </div>
-                            `;
-                            list.appendChild(li);
-                        });
-                        if (data.Data.Comments.length === 0) {
-                            list.innerHTML = '<div class="empty-state">暂无留言</div>';
-                        }
-                    } else {
-                        list.innerHTML = '<div class="empty-state">加载失败</div>';
-                    }
-                })
-                .catch(e => {
-                    document.getElementById('commentList').innerHTML = '<div class="empty-state">网络错误</div>';
-                });
+</div>
+
+<script>
+// ---------- 全局变量 ----------
+const targetUserId = '<?= $targetId ?>';
+
+// ---------- 用户卡片（与 med.php 相同） ----------
+var currentCard = null, isOpeningCard = false;
+function getUserCard(uid) {
+    if (isOpeningCard) return;
+    if (currentCard) { currentCard.remove(); currentCard = null; }
+    isOpeningCard = true;
+    fetch('/user/card.php?id=' + uid)
+        .then(r => r.text())
+        .then(html => {
+            const overlay = document.createElement('div');
+            overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:9999';
+            overlay.innerHTML = '<div style="position:relative">' + html + '</div>';
+            document.body.appendChild(overlay);
+            currentCard = overlay;
+            isOpeningCard = false;
+            overlay.addEventListener('click', function(e) { if (e.target === overlay) { overlay.remove(); currentCard = null; } }, {once: true});
+        })
+        .catch(() => { isOpeningCard = false; });
+}
+document.addEventListener('keydown', e => { if (e.key === 'Escape' && currentCard) { currentCard.remove(); currentCard = null; } });
+
+// ---------- 事件委托：头像/用户名/回复 ----------
+document.addEventListener('click', function(e) {
+    const avatar = e.target.closest('.user-avatar, #avatar');
+    const name   = e.target.closest('.user-name, .name');
+    const ruser  = e.target.closest('.RUser');
+    if (avatar || name || ruser) {
+        e.stopPropagation();
+        let uid = null;
+        if (ruser) {
+            uid = ruser.getAttribute('data-user');
+        } else {
+            const cc = e.target.closest('#notification_container');
+            if (cc) uid = cc.getAttribute('data-rid');
         }
-
-        function postComment() {
-            const content = document.getElementById('commentInput').value.trim();
-            if (!content) return alert('请输入内容');
-            fetch('/api/post_comment.php', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({
-                    TargetID: '<?= $targetId ?>',
-                    TargetType: 'User',
-                    Content: content
-                })
-            })
-            .then(res => res.json())
-            .then(data => {
-                if (data.Success) {
-                    document.getElementById('commentInput').value = '';
-                    loadComments();
-                    // 更新留言计数（简单演示）
-                } else {
-                    alert('发送失败: ' + (data.Message || ''));
-                }
-            });
+        if (!uid) {
+            const ui = e.target.closest('.user-info');
+            if (ui) {
+                const onclick = ui.getAttribute('onclick') || '';
+                const match = onclick.match(/getUserCard\('([^']+)'\)/);
+                if (match) uid = match[1];
+            }
         }
-
-        // HTML转义
-        function escapeHtml(text) {
-            return String(text).replace(/[&<>"']/g, function(m) {
-                return { '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[m];
-            });
+        if (uid) getUserCard(uid);
+        return;
+    }
+    // 回复（与 med.php 相同）
+    const cb = e.target.closest('#notification_container');
+    if (cb) {
+        const nameEl = cb.querySelector('.name');
+        const rid = cb.getAttribute('data-rid');
+        if (nameEl && rid) {
+            const ta = document.querySelector('dialog textarea, #comment-textarea');
+            if (ta) {
+                ta.value = '回复@' + nameEl.innerText.trim() + ': ';
+                ta.focus();
+            }
         }
+    }
+});
+
+// ---------- 标签切换 ----------
+function switchTab(tabName) {
+    document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');
+    const activeTab = document.querySelector(`.tab-item[data-tab="${tabName}"]`);
+    if (activeTab) activeTab.classList.add('active');
+    const content = document.getElementById(tabName + '-tab');
+    if (content) content.style.display = 'block';
+
+    if (tabName === 'comments') loadUserComments();
+    if (tabName === 'fans') loadFans();
+}
 
-        // ---------- 粉丝列表 ----------
-        function loadFans() {
-            // DisplayType: 1 = Follower, 2 = Following (根据实际定义调整)
-            fetch('/api/get_relations.php?id=<?= $targetId ?>&displayType=1&skip=0&take=20')
-                .then(res => res.json())
-                .then(data => {
-                    const list = document.getElementById('fansList');
-                    list.innerHTML = '';
-                    if (data.Success && data.Data) {
-                        const users = data.Data; // 直接返回用户数组
-                        if (users.length === 0) {
-                            list.innerHTML = '<div class="empty-state">暂无粉丝</div>';
-                            return;
-                        }
-                        users.forEach(user => {
-                            const uid = user.ID;
-                            const avatarUrl = user.Avatar > 0 ? 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/' + uid.substring(0,4)+'/'+uid.substring(4,6)+'/'+uid.substring(6,8)+'/'+uid.substring(8,16)+'/'+user.Avatar+'.jpg!full' : 'data:image/svg+xml,...';
-                            const li = document.createElement('li');
-                            li.className = 'fans-item';
-                            li.innerHTML = `
-                                <img class="fans-avatar" src="${avatarUrl}" onerror="this.src='data:image/svg+xml,...'">
-                                <span class="fans-nickname" onclick="location.href='user.php?id=${uid}'">${escapeHtml(user.Nickname || '匿名')}</span>
-                            `;
-                            list.appendChild(li);
-                        });
-                    } else {
-                        list.innerHTML = '<div class="empty-state">加载失败</div>';
-                    }
-                })
-                .catch(e => {
-                    document.getElementById('fansList').innerHTML = '<div class="empty-state">网络错误</div>';
-                });
-        }
+document.querySelectorAll('.tab-item').forEach(tab => {
+    tab.addEventListener('click', function() { switchTab(this.dataset.tab); });
+});
+
+// 加载留言（复用 /comment/?category=User...）
+function loadUserComments() {
+    const container = document.getElementById('comments');
+    container.innerHTML = '加载中...';
+    fetch('/comment/?category=User&id=' + targetUserId)
+        .then(r => r.text())
+        .then(html => {
+            container.innerHTML = html;
+        })
+        .catch(() => {
+            container.innerHTML = '<div class="error">加载失败</div>';
+        });
+}
 
-        // ---------- 关注/取消关注（不变） ----------
-        var isFollowed = <?= $isFollowed ? 'true' : 'false' ?>;
-        function toggleFollow() {
-            const action = isFollowed ? 0 : 1;
-            fetch('/api/follow.php?id=<?= $targetId ?>&action=' + action, { method: 'POST' })
-                .then(r => r.json())
-                .then(data => {
-                    if (data.Success) {
-                        isFollowed = !isFollowed;
-                        const btn = document.getElementById('followBtn');
-                        btn.className = 'btn-follow' + (isFollowed ? ' following' : '');
-                        btn.innerHTML = isFollowed ? '<i class="fas fa-check"></i> <span>已关注</span>' : '<i class="fas fa-plus"></i> <span>关注</span>';
-                        // 更新粉丝数
-                        const fansNum = document.querySelector('.stat-item:nth-child(2) .stat-num');
-                        if (fansNum) {
-                            let n = parseInt(fansNum.innerText) || 0;
-                            fansNum.innerText = n + (isFollowed ? 1 : -1);
-                        }
-                    } else {
-                        alert('操作失败');
-                    }
+/**
+ * 加载粉丝列表（调用 Users/GetRelations 接口，DisplayType=1 代表粉丝）
+ * 需要页面中存在 id="fansList" 的容器元素，以及全局变量 targetUserId
+ */
+function loadFans() {
+    const list = document.getElementById('fansList');
+    if (!list) return;
+    list.innerHTML = '<div class="empty-state">加载中...</div>';
+
+    fetch('/api/get_relations.php?id=' + targetUserId + '&displayType=1&skip=0&take=50')
+        .then(res => res.json())
+        .then(data => {
+            list.innerHTML = '';
+            if (!data.Success || !data.Data) {
+                list.innerHTML = '<div class="empty-state">加载失败</div>';
+                return;
+            }
+            const users = Array.isArray(data.Data) ? data.Data : (data.Data.Users || []);
+            if (users.length === 0) {
+                list.innerHTML = '<div class="empty-state">暂无粉丝</div>';
+                return;
+            }
+            users.forEach(user => {
+                const uid = user.ID;
+                const avatarUrl = (user.Avatar > 0 && uid)
+                    ? `http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/${uid.substring(0,4)}/${uid.substring(4,6)}/${uid.substring(6,8)}/${uid.substring(8,16)}/${user.Avatar}.jpg!full`
+                    : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iMjAiIGZpbGw9IiNFMEUwRTAiLz4KPHBhdGggZD0iTTIwIDI1QzIzLjMxNCAyNSAyNiAyMi4zMTQgMjYgMTlDMjYgMTUuNjg2IDIzLjMxNCAxMyAyMCAxM0MxNi42ODYgMTMgMTQgMTUuNjg2IDE0IDE5QzE0IDIyLjMxNCAxNi42ODYgMjUgMjAgMjVaIiBmaWxsPSIjQkRCREJEIi8+CjxwYXRoIGQ9Ik0yOSAzMEgxMUMxMC40NDc3IDMwIDEwIDI5LjU1MjMgMTAgMjlWMjRDMTAgMjMuNDQ3NyAxMC40NDc3IDIzIDExIDIzSDI5QzI5LjU1MjMgMjMgMzAgMjMuNDQ3NyAzMCAyNFYyOU MyMCAyOS41NTIzIDI5LjU1MjMgMzAgMjkgMzBaTTExIDI0VjI5SDI5VjI0SDExWiIgZmlsbD0iI0JEQkRCRCIvPgo8L3N2Zz4=';
+                const li = document.createElement('li');
+                li.className = 'fans-item';
+                li.style.cssText = 'display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0;cursor:pointer';
+                li.innerHTML = `
+                    <img class="fans-avatar" src="${avatarUrl}" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iMjAiIGZpbGw9IiNFMEUwRTAiLz4KPHBhdGggZD0iTTIwIDI1QzIzLjMxNCAyNSAyNiAyMi4zMTQgMjYgMTlDMjYgMTUuNjg2IDIzLjMxNCAxMyAyMCAxM0MxNi42ODYgMTMgMTQgMTUuNjg2IDE0IDE5QzE0IDIyLjMxNCAxNi42ODYgMjUgMjAgMjVaIiBmaWxsPSIjQkRCREJEIi8+CjxwYXRoIGQ9Ik0yOSAzMEgxMUMxMC40NDc3IDMwIDEwIDI5LjU1MjMgMTAgMjlWMjRDMTAgMjMuNDQ3NyAxMC40NDc3IDIzIDExIDIzSDI5QzI5LjU1MjMgMjMgMzAgMjMuNDQ3NyAzMCAyNFYyOU MyMCAyOS41NTIzIDI5LjU1MjMgMzAgMjkgMzBaTTExIDI0VjI5SDI5VjI0SDExWiIgZmlsbD0iI0JEQkRCRCIvPgo8L3N2Zz4=';" style="width:40px;height:40px;border-radius:50%;margin-right:10px;flex-shrink:0">
+                    <span style="font-weight:500;">${escapeHtml(user.Nickname || '匿名')}</span>
+                `;
+                li.addEventListener('click', function() {
+                    location.href = 'user.php?id=' + uid;
                 });
-        }
+                list.appendChild(li);
+            });
+        })
+        .catch(() => {
+            list.innerHTML = '<div class="empty-state">网络错误</div>';
+        });
+}
 
-        function sendMessage() { switchTab('comments'); }
-        function shareProfile() {
-            if (navigator.share) {
-                navigator.share({ title: '<?= htmlspecialchars($targetUser['Nickname'] ?? '用户主页') ?>', url: window.location.href }).catch(()=>{});
+// 关注/取消关注
+var isFollowed = <?= $isFollowed ? 'true' : 'false' ?>;
+function toggleFollow() {
+    const action = isFollowed ? 0 : 1;  // 0 取消关注，1 关注
+    fetch('/api/follow.php?id=' + targetUserId + '&action=' + action, { method: 'POST' })
+        .then(function(res) { return res.json(); })
+        .then(function(data) {
+            if (data.Success) {
+                isFollowed = !isFollowed;
+                var btn = document.getElementById('followBtn');
+                btn.className = 'btn-follow' + (isFollowed ? ' following' : '');
+                btn.innerHTML = isFollowed ?
+                    '<i class="fas fa-check"></i> <span>已关注</span>' :
+                    '<i class="fas fa-plus"></i> <span>关注</span>';
+
+                // 更新粉丝数（简单 +1 / -1）
+                var fansNum = document.querySelector('.stat-item:nth-child(2) .stat-num');
+                if (fansNum) {
+                    var n = parseInt(fansNum.innerText, 10) || 0;
+                    fansNum.innerText = n + (isFollowed ? 1 : -1);
+                }
             } else {
-                prompt('复制链接分享:', window.location.href);
+                alert('操作失败');
             }
-        }
-        function toggleMenu() { alert('菜单功能（举报等）即将开放'); }
-    </script>
+        })
+        .catch(function() {
+            alert('网络错误');
+        });
+}
+
+function shareProfile() {
+    if (navigator.share) navigator.share({ title: document.title, url: location.href }).catch(()=>{});
+    else prompt('复制链接分享:', location.href);
+}
+function toggleMenu() { alert('菜单功能即将开放'); }
+
+function buildAvatarUrl(uid, av) {
+    if (!av || !uid) return '<?= DEFAULT_AVATAR ?>';
+    return 'http://netlogo-cn.oss-cn-hongkong.aliyuncs.com/users/avatars/' + uid.substring(0,4) + '/' + uid.substring(4,6) + '/' + uid.substring(6,8) + '/' + uid.substring(8,16) + '/' + av + '.jpg!full';
+}
+function escapeHtml(text) {
+    return String(text).replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]);
+}
+</script>
 </body>
 </html>
\ No newline at end of file

From efa02ddefd0633ca12c4d8806b9ee42b0da75b62 Mon Sep 17 00:00:00 2001
From: Tiaotiao <65841827@qq.com>
Date: Sun, 3 May 2026 11:49:32 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20index.php?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 comment/index.php | 434 +++++++++++++++++-----------------------------
 1 file changed, 158 insertions(+), 276 deletions(-)

diff --git a/comment/index.php b/comment/index.php
index 4beff28..14b15b9 100644
--- a/comment/index.php
+++ b/comment/index.php
@@ -1,22 +1,19 @@
 <?php
 session_start();
 
-// 获取参数，category首字母大写
+// 获取参数
 $category = isset($_GET['category']) ? ucfirst($_GET['category']) : 'Model';
 $contentId = $_GET['id'] ?? '';
 $skp = isset($_GET['skip']) ? (int)$_GET['skip'] : 0;
 
-// 获取用户数据
-$dt = null;
-if (isset($_SESSION['responseBody'])) {
-    $dt = is_string($_SESSION['responseBody']) ? json_decode($_SESSION['responseBody'], true) : $_SESSION['responseBody'];
-} else {
-    $redirectUrl = '/getv.php?r=' . urlencode('med.php?category=' . $category . '&id=' . $contentId . '&skip=' . $skp);
+// 如果未登录，重定向去获取 token
+if (!isset($_SESSION['responseBody'])) {
+    $redirectUrl = '/getv.php?r=' . urlencode("comment/?category={$category}&id={$contentId}&skip={$skp}");
     header('Location: ' . $redirectUrl);
     exit;
 }
 
-// 类形式的实现
+// ---------- MessageService 类（完整版）----------
 class MessageService {
     private $token;
     private $authCode;
@@ -27,9 +24,6 @@ public function __construct($token = null, $authCode = null) {
         $this->authCode = $authCode;
     }
     
-    /**
-     * 获取留言/评论信息
-     */
     public function getMessages(
         $ID, 
         $type = "Discussion", 
@@ -37,7 +31,6 @@ public function getMessages(
         $from = null, 
         $skip = 0
     ) {
-        // 验证必需参数
         if (empty($ID)) {
             throw new Exception("ID参数不能为空");
         }
@@ -59,7 +52,6 @@ public function getMessages(
             'Skip' => $skip,
         ];
         
-        // 只有在提供了from参数时才添加CommentID字段
         if ($from !== null) {
             $requestData['CommentID'] = $from;
         }
@@ -117,7 +109,6 @@ public function getMessages(
             throw new Exception("JSON解析失败: " . json_last_error_msg());
         }
         
-        // 检查API返回的业务状态码
         if (isset($data['Status']) && $data['Status'] !== 200) {
             $errorMsg = $data['Message'] ?? '未知错误';
             throw new Exception("API返回错误: " . $errorMsg);
@@ -126,7 +117,6 @@ public function getMessages(
         return $data;
     }
     
-    // 设置认证信息
     public function setAuth($token, $authCode) {
         $this->token = $token;
         $this->authCode = $authCode;
@@ -134,7 +124,7 @@ public function setAuth($token, $authCode) {
     }
 }
 
-// 类形式的使用示例：
+// 初始化评论服务
 $messageService = new MessageService($_SESSION['token'] ?? null, $_SESSION['authCode'] ?? null);
 try {
     $messages = $messageService->getMessages($contentId, $category, 20, null, $skp);
@@ -145,128 +135,64 @@ public function setAuth($token, $authCode) {
     $error = $e->getMessage();
 }
 
-// 生成头像URL函数
+// ---------- 辅助函数 ----------
 function getAvatarUrl($userID, $avatarNumber) {
-    // 根据用户ID构建头像路径
     $part1 = substr($userID, 0, 4);
     $part2 = substr($userID, 4, 2);
     $part3 = substr($userID, 6, 2);
     $part4 = substr($userID, 8, 16);
-    
     return "http://netlogo-static-cn.turtlesim.com/users/avatars/{$part1}/{$part2}/{$part3}/{$part4}/{$avatarNumber}.jpg!full";
 }
 
-// 格式化时间函数
 function formatCommentTime($timestamp) {
     if (!$timestamp) return '未知时间';
-    
-    // 如果是毫秒时间戳，转换为秒
-    if ($timestamp > 9999999999) {
-        $timestamp = $timestamp / 1000;
-    }
-    
+    if ($timestamp > 9999999999) $timestamp = $timestamp / 1000;
     $date = date('n/j', $timestamp);
     $hour = date('G', $timestamp);
     $minute = date('i', $timestamp);
-    
-    // 转换为12小时制并添加上午/下午
-    if ($hour < 12) {
-        $period = '上午';
-        $displayHour = $hour == 0 ? 12 : $hour;
-    } else {
-        $period = '下午';
-        $displayHour = $hour > 12 ? $hour - 12 : $hour;
-    }
-    
+    $period = $hour < 12 ? '上午' : '下午';
+    $displayHour = $hour == 0 ? 12 : ($hour > 12 ? $hour - 12 : $hour);
     return "{$date} {$period}{$displayHour}:{$minute}";
 }
 
-// 自定义标签解析器类
 class CustomTagParser {
-    
-    /**
-     * 解析包含自定义标签的文本
-     */
     public static function parse(string $text): string {
-        if (empty($text)) {
-            return '';
-        }
-        
-        // 先转义HTML特殊字符，防止XSS攻击
+        if (empty($text)) return '';
         $text = htmlspecialchars($text);
-        
-        // 将换行符转换为<br>
         $text = nl2br($text);
         
-        // 解析自定义标签
         $patterns = [
-            // user标签 - 保持原有格式
             '/&lt;user=([a-f0-9]+)&gt;(.*?)&lt;\/user&gt;/i',
-            // experiment标签 - 跳转链接
             '/&lt;experiment=([a-f0-9]+)&gt;(.*?)&lt;\/experiment&gt;/i',
-            // discussion标签 - 跳转链接
             '/&lt;discussion=([a-f0-9]+)&gt;(.*?)&lt;\/discussion&gt;/i',
-            // model标签 - 跳转链接
             '/&lt;model=([a-f0-9]+)&gt;(.*?)&lt;\/model&gt;/i',
-            // external标签 - 外部链接
             '/&lt;external=([^&]+)&gt;(.*?)&lt;\/external&gt;/i',
-            // size标签
             '/&lt;size=([^&]+)&gt;(.*?)&lt;\/size&gt;/i',
-            // color标签 - 新增
             '/&lt;color=([^&]+)&gt;(.*?)&lt;\/color&gt;/i',
-            // b标签
             '/&lt;b&gt;(.*?)&lt;\/b&gt;/i',
-            // i标签
             '/&lt;i&gt;(.*?)&lt;\/i&gt;/i',
-            // a标签 - 深蓝色标签
             '/&lt;a&gt;(.*?)&lt;\/a&gt;/i'
         ];
         
         $replacements = [
-            // user标签
             '<span class="RUser" data-user="$1">$2</span>',
-            // experiment标签
             '<a href="med.php?id=$1&category=Experiment" class="experiment-link">$2</a>',
-            // discussion标签
             '<a href="med.php?id=$1&category=Discussion" class="discussion-link">$2</a>',
-            // model标签
             '<a href="med.php?id=$1&category=Model" class="model-link">$2</a>',
-            // external标签
             '<a href="$1" target="_blank" rel="noopener noreferrer nofollow" class="external-link">$2</a>',
-            // size标签
             '<span style="font-size: $1;">$2</span>',
-            // color标签 - 新增
             '<span style="color: $1;">$2</span>',
-            // b标签
             '<strong>$1</strong>',
-            // i标签
             '<em>$1</em>',
-            // a标签
             '<span class="blue-tag">$1</span>'
         ];
         
         $text = preg_replace($patterns, $replacements, $text);
         
-        // 解析简单的Markdown格式
-        $text = self::parseSimpleMarkdown($text);
-        
-        return $text;
-    }
-    
-    /**
-     * 解析简单的Markdown格式
-     */
-    private static function parseSimpleMarkdown(string $text): string {
-        // 粗体
+        // 简单 Markdown
         $text = preg_replace('/\*\*(.*?)\*\*/', '<strong>$1</strong>', $text);
-        
-        // 斜体
         $text = preg_replace('/\*(.*?)\*/', '<em>$1</em>', $text);
-        
-        // 删除线
         $text = preg_replace('/~~(.*?)~~/', '<del>$1</del>', $text);
-        
-        // 行内代码
         $text = preg_replace('/`([^`]+)`/', '<code>$1</code>', $text);
         
         return $text;
@@ -274,172 +200,133 @@ private static function parseSimpleMarkdown(string $text): string {
 }
 ?>
 <style>
-        #notification_container {
-            display: flex;
-            padding: 12px 0;
-            align-items: flex-start;
-        }
-        
-        .img {
-            margin-right: 12px;
-            flex-shrink: 0;
-        }
-        
-        #avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            object-fit: cover;
-            border: 1px solid #e0e0e0;
-        }
-        
-        .notification {
-            flex: 1;
-            min-width: 0;
-        }
-        
-        .notification_title {
-            display: flex;
-            align-items: center;
-            margin-bottom: 4px;
-        }
-        
-        .name {
-            font-weight: 600;
-            font-size: 15px;
-            color: #1a1a1a;
-            flex: 1;
-        }
-        
-        .time {
-            font-size: 13px;
-            color: #999;
-            margin-left: 8px;
-        }
-        
-        .notification_message {
-            margin-top: 2px;
-        }
-        
-        .notification_text {
-            font-size: 15px;
-            color: #333;
-            line-height: 1.4;
-            word-break: break-word;
-        }
-        
-        .RUser {
-            color: #1890ff;
-            font-weight: 500;
-        }
-        
-        .n-divider {
-            display: flex;
-            align-items: center;
-            margin: 16px 0;
-        }
-        
-        .n-divider__line {
-            flex: 1;
-            height: 1px;
-            background-color: #efeff5;
-        }
-        
-        .n-divider__line--left {
-            margin-right: 0;
-        }
-        
-        .observer-element {
-            height: 20px;
-        }
-        
-        .error-message {
-            background: #fff2f0;
-            border: 1px solid #ffccc7;
-            border-radius: 6px;
-            padding: 12px 16px;
-            margin-bottom: 16px;
-            color: #a8071a;
-        }
-        
-        .empty-state {
-            text-align: center;
-            padding: 40px 20px;
-            color: #999;
-        }
-        
-        .empty-state i {
-            font-size: 48px;
-            margin-bottom: 16px;
-            color: #d9d9d9;
-        }
-</style>
-<style>
-/* <a>标签样式 - 深蓝色标签，无边框，大小与普通字体一样 */
-.blue-tag {
-    color: #0000FF;
-    font-size: 1em;
-    text-decoration: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    background: none;
-    font-weight: normal;
-}
-
-/* 会跳转的标签样式 - 包括experiment, discussion, model, external */
-.experiment-link,
-.discussion-link,
-.model-link,
-.external-link {
-    color: #2881E0;
-    font-size: 1em;
-    text-decoration: none;
-    border: none;
-    padding: 0;
-    margin: 0 2px;
-    background: none;
-    font-weight: normal;
-}
-
-.experiment-link:hover,
-.discussion-link:hover,
-.model-link:hover,
-.external-link:hover {
-    text-decoration: underline;
-}
-
-/* color标签样式 - 继承父元素字体大小 */
-.notification_text [style*="color:"] {
-    font-size: inherit;
-    border: none;
-    padding: 0;
-    margin: 0;
-    background: none;
-}
-
-/* Markdown代码样式 */
-.notification_text code {
-    background-color: #f5f5f5;
-    padding: 2px 4px;
-    border-radius: 2px;
-    font-family: monospace;
-    font-size: 0.9em;
-    color: #c7254e;
-}
-
-.notification_text del {
-    color: #999;
-    text-decoration: line-through;
-}
-
-.notification_text strong {
-    font-weight: 600;
-}
-
-.notification_text em {
-    font-style: italic;
-}
+    #notification_container {
+        display: flex;
+        padding: 12px 0;
+        align-items: flex-start;
+    }
+    .img {
+        margin-right: 12px;
+        flex-shrink: 0;
+    }
+    #avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 1px solid #e0e0e0;
+    }
+    .notification {
+        flex: 1;
+        min-width: 0;
+    }
+    .notification_title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 4px;
+    }
+    .name {
+        font-weight: 600;
+        font-size: 15px;
+        color: #1a1a1a;
+        flex: 1;
+    }
+    .time {
+        font-size: 13px;
+        color: #999;
+        margin-left: 8px;
+    }
+    .notification_message {
+        margin-top: 2px;
+    }
+    .notification_text {
+        font-size: 15px;
+        color: #333;
+        line-height: 1.4;
+        word-break: break-word;
+    }
+    .RUser {
+        color: #1890ff;
+        font-weight: 500;
+    }
+    .n-divider {
+        display: flex;
+        align-items: center;
+        margin: 16px 0;
+    }
+    .n-divider__line {
+        flex: 1;
+        height: 1px;
+        background-color: #efeff5;
+    }
+    .n-divider__line--left {
+        margin-right: 0;
+    }
+    .error-message {
+        background: #fff2f0;
+        border: 1px solid #ffccc7;
+        border-radius: 6px;
+        padding: 12px 16px;
+        margin-bottom: 16px;
+        color: #a8071a;
+    }
+    .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: #999;
+    }
+    .empty-state i {
+        font-size: 48px;
+        margin-bottom: 16px;
+        color: #d9d9d9;
+    }
+    .blue-tag {
+        color: #0000FF;
+        font-size: 1em;
+        text-decoration: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+        font-weight: normal;
+    }
+    .experiment-link,
+    .discussion-link,
+    .model-link,
+    .external-link {
+        color: #2881E0;
+        font-size: 1em;
+        text-decoration: none;
+        border: none;
+        padding: 0;
+        margin: 0 2px;
+        background: none;
+        font-weight: normal;
+    }
+    .experiment-link:hover,
+    .discussion-link:hover,
+    .model-link:hover,
+    .external-link:hover {
+        text-decoration: underline;
+    }
+    .notification_text code {
+        background-color: #f5f5f5;
+        padding: 2px 4px;
+        border-radius: 2px;
+        font-family: monospace;
+        font-size: 0.9em;
+        color: #c7254e;
+    }
+    .notification_text del {
+        color: #999;
+        text-decoration: line-through;
+    }
+    .notification_text strong {
+        font-weight: 600;
+    }
+    .notification_text em {
+        font-style: italic;
+    }
 </style>
 
 <div id="top-con"></div>
@@ -451,18 +338,16 @@ private static function parseSimpleMarkdown(string $text): string {
     <?php endif; ?>
     
     <?php if (empty($comments)): ?>
-        <div class="empty-state">
-            <p>暂无评论</p>
-        </div>
+        <div class="empty-state"><p>暂无评论</p></div>
     <?php else: ?>
         <?php foreach ($comments as $index => $comment): ?>
             <div>
                 <div id="notification_container" data-rid="<?= htmlspecialchars($comment['UserID'] ?? '') ?>">
                     <div class="img">
-                        <img id="avatar" 
+                        <img id="avatar" class="avatar"
                              src="<?= getAvatarUrl($comment['UserID'] ?? '', $comment['Avatar'] ?? 0) ?>" 
                              alt="<?= htmlspecialchars($comment['Nickname'] ?? '用户') ?>"
-                             onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iMjAiIGZpbGw9IiNGRjVFNjYiLz4KPHN2ZyB4PSI4IiB5PSI4IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyQzIgMTcuNTIgNi40OCAyMiAxMiAyMkMxNy41MiAyMiAyMiAxNy41MiAyMiAxMkMyMiA2LjQ4IDE3LjUyIDIgMTIgMlpNMTIgNUMxMy42NiA1IDE1IDYuMzQgMTUgOEMxNSA5LjY2IDEzLjY2IDExIDEyIDExQzEwLjM0IDExIDkgOS42NiA5IDhDOSA2LjM0IDEwLjM0IDUgMTIgNVpNMTIgMTkuMkM5LjUgMTkuMiA3LjIxIDE3LjkyIDYgMTUuOThDNi4wMSAxMy45OSAxMCAxMi45IDEyIDEyLjlDMTMuOTkgMTIuOSAxNy45OSAxMy45OSAxOCAxNS45OEMxNi43OSAxNy45MiAxNC41IDE5LjIgMTIgMTkuMloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo8L3N2Zz4K'">
+                             onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iMjAiIGZpbGw9IiNGRjVFNjYiLz4KPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyQzIgMTcuNTIgNi40OCAyMiAxMiAyMkMxNy41MiAyMiAyMiAxNy41MiAyMiAxMkMyMiA2LjQ4IDE3LjUyIDIgMTIgMlpNMTIgNUMxMy42NiA1IDE1IDYuMzQgMTUgOEMxNSA5LjY2IDEzLjY2IDExIDEyIDExQzEwLjM0IDExIDkgOS42NiA5IDhDOSA2LjM0IDEwLjM0IDUgMTIgNVpNMTIgMTkuMkM5LjUgMTkuMiA3LjIxIDE3LjkyIDYgMTUuOThDNi4wMSAxMy45OSAxMCAxMi45IDEyIDEyLjlDMTMuOTkgMTIuOSAxNy45OSAxMy45OSAxOCAxNS45OEMxNi43OSAxNy45MiAxNC41IDE5LjIgMTIgMTkuMloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='">
                     </div>
                     <div id="notification" class="notification">
                         <div id="notification_title" class="notification_title">
@@ -478,7 +363,7 @@ private static function parseSimpleMarkdown(string $text): string {
                 </div>
                 
                 <?php if ($index < count($comments) - 1): ?>
-                <div role="separator" class="n-divider n-divider--no-title" style="--n-bezier: cubic-bezier(0.4, 0, 0.2, 1); --n-color: rgb(239, 239, 245); --n-text-color: rgb(31, 34, 37); --n-font-weight: 500; margin: 0px;">
+                <div role="separator" class="n-divider" style="margin: 0px;">
                     <div class="n-divider__line n-divider__line--left"></div>
                 </div>
                 <?php endif; ?>
@@ -489,36 +374,33 @@ private static function parseSimpleMarkdown(string $text): string {
 <div id="bottom-con" style="margin-top: 0px;"></div>
 
 <script>
-// 添加点击交互功能
-document.addEventListener('DOMContentLoaded', function() {
-    // 点击用户头像或名称时跳转到用户页面
-    const userElements = document.querySelectorAll('#notification_container');
-    userElements.forEach(container => {
-        const avatar = container.querySelector('#avatar');
+(function() {
+    const containers = document.querySelectorAll('#notification_container');
+    document.body.forEach(container => {
+        const avatar = container.querySelector('.avatar');
         const name = container.querySelector('.name');
         const userId = container.getAttribute('data-rid');
         
-        const onClick = function() {
-            // 跳转到用户页面
-            if (userId) {
-                window.location.href = 'user.php?id=' + userId;
+        const openCard = function(e) {
+            e.stopPropagation();
+            if (userId && typeof getUserCard === 'function') {
+                getUserCard(userId);
             }
         };
         
-        if (avatar) avatar.addEventListener('click', onClick);
-        if (name) name.addEventListener('click', onClick);
+        if (avatar) avatar.addEventListener('click', openCard);
+        if (name) name.addEventListener('click', openCard);
     });
     
-    // 点击@用户时跳转到对应用户页面
     const rUsers = document.querySelectorAll('.RUser');
     rUsers.forEach(rUser => {
         rUser.addEventListener('click', function(e) {
             e.stopPropagation();
-            const userId = this.getAttribute('data-user');
-            if (userId) {
-                window.location.href = 'user.php?id=' + userId;
+            const uid = this.getAttribute('data-user');
+            if (uid && typeof getUserCard === 'function') {
+                getUserCard(uid);
             }
         });
     });
-});
-</script>
+})();
+</script>
\ No newline at end of file