✨ feat(ui): 判题结果页 AI 点评区支持折叠
- 为 LLM 点评标题增加点击折叠/展开交互,减少页面占用空间 - 新增标题悬停反馈与图标旋转动画样式 - 移除快捷操作区中的"下载测试数据"按钮入口
This commit is contained in:
@@ -101,6 +101,20 @@
|
|||||||
#llm-section .ui.header {
|
#llm-section .ui.header {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
#llm-section .llm-section-header {
|
||||||
|
transition: background-color 0.15s;
|
||||||
|
padding: 4px 8px;
|
||||||
|
margin-left: -8px;
|
||||||
|
margin-right: -8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
#llm-section .llm-section-header:hover {
|
||||||
|
background-color: rgba(33,150,243,0.06);
|
||||||
|
}
|
||||||
|
#llm-section .llm-toggle-icon {
|
||||||
|
transition: transform 0.2s;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
#llm-review-result {
|
#llm-review-result {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -157,16 +171,18 @@ i.icon.spinning {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- 3. AI 点评区(直接显示按钮,提到原始错误上面) -->
|
<!-- 3. AI 点评区(标题可点击折叠/展开) -->
|
||||||
<?php if (isset($OJ_LLM_ENABLED) && $OJ_LLM_ENABLED) { ?>
|
<?php if (isset($OJ_LLM_ENABLED) && $OJ_LLM_ENABLED) { ?>
|
||||||
<div class="ui raised segment" id="llm-section">
|
<div class="ui raised segment" id="llm-section">
|
||||||
<h3 class="ui header">
|
<h3 class="ui header llm-section-header" id="llm-toggle" style="cursor: pointer; user-select: none;">
|
||||||
<i class="magic icon"></i>
|
<i class="magic icon"></i>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
AI 智能点评
|
AI 智能点评
|
||||||
<div class="sub header"><?php echo isset($MSG_AI_REVIEW_DESC) ? $MSG_AI_REVIEW_DESC : '基于你的代码和判题结果分析'; ?></div>
|
<div class="sub header"><?php echo isset($MSG_AI_REVIEW_DESC) ? $MSG_AI_REVIEW_DESC : '基于你的代码和判题结果分析'; ?></div>
|
||||||
</div>
|
</div>
|
||||||
|
<i class="dropdown icon llm-toggle-icon" style="margin-left: auto; font-size: 1em;"></i>
|
||||||
</h3>
|
</h3>
|
||||||
|
<div id="llm-section-body">
|
||||||
<button class="ui labeled icon primary button" id="llm-review-btn" onclick="fetchLLMReview()">
|
<button class="ui labeled icon primary button" id="llm-review-btn" onclick="fetchLLMReview()">
|
||||||
<i class="magic icon"></i> 获取 AI 点评
|
<i class="magic icon"></i> 获取 AI 点评
|
||||||
</button>
|
</button>
|
||||||
@@ -182,8 +198,31 @@ i.icon.spinning {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// 折叠/展开 AI 点评区
|
||||||
|
(function(){
|
||||||
|
var header = document.getElementById('llm-toggle');
|
||||||
|
var body = document.getElementById('llm-section-body');
|
||||||
|
var icon = header ? header.querySelector('.llm-toggle-icon') : null;
|
||||||
|
if (!header || !body) return;
|
||||||
|
|
||||||
|
header.addEventListener('click', function(e){
|
||||||
|
// 如果用户点击的是按钮本身,不要触发展开(按钮事件自己处理)
|
||||||
|
if (e.target.closest('button')) return;
|
||||||
|
var collapsed = body.style.display === 'none';
|
||||||
|
body.style.display = collapsed ? '' : 'none';
|
||||||
|
if (icon) {
|
||||||
|
icon.className = collapsed
|
||||||
|
? 'dropdown icon llm-toggle-icon'
|
||||||
|
: 'dropdown icon llm-toggle-icon active';
|
||||||
|
// active class 让 Semantic UI 的箭头自动旋转 90°,但我们手写也行
|
||||||
|
icon.style.transform = collapsed ? 'rotate(0deg)' : 'rotate(-90deg)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
function fetchLLMReview(){
|
function fetchLLMReview(){
|
||||||
var btn = $('#llm-review-btn');
|
var btn = $('#llm-review-btn');
|
||||||
btn.prop('disabled', true).addClass('loading');
|
btn.prop('disabled', true).addClass('loading');
|
||||||
@@ -338,11 +377,7 @@ i.icon.spinning {
|
|||||||
<a class="ui button" href="problem.php?id=<?php echo intval($row['problem_id']) ?>">
|
<a class="ui button" href="problem.php?id=<?php echo intval($row['problem_id']) ?>">
|
||||||
<i class="info circle icon"></i> <?php echo isset($MSG_VIEW_PROBLEM) ? $MSG_VIEW_PROBLEM : '查看题目'; ?>
|
<i class="info circle icon"></i> <?php echo isset($MSG_VIEW_PROBLEM) ? $MSG_VIEW_PROBLEM : '查看题目'; ?>
|
||||||
</a>
|
</a>
|
||||||
<?php if (isset($OJ_DOWNLOAD) && $OJ_DOWNLOAD && ($isRE || $row['result']==6)) { ?>
|
|
||||||
<a class="ui orange button" href="download.php?sid=<?php echo intval($id) ?>">
|
|
||||||
<i class="download icon"></i> <?php echo isset($MSG_DOWNLOAD_DATA) ? $MSG_DOWNLOAD_DATA : '下载测试数据'; ?>
|
|
||||||
</a>
|
|
||||||
<?php } ?>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user