344 lines
9.6 KiB
HTML
344 lines
9.6 KiB
HTML
|
|
{% extends "app/base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ T.version_title|default:'关于系统' }} - {{ settings.name|default:"Monitor" }}{% endblock %}
|
|
{% block page_title %}{{ T.version_title|default:'关于系统' }}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<style>
|
|
.version-container {
|
|
padding: 20px;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
}
|
|
.version-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
.version-col-left {
|
|
flex: 0 0 320px;
|
|
}
|
|
.version-col-right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.version-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 20px 24px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
}
|
|
.version-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #eef2f5;
|
|
}
|
|
.version-card-header h3 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
.version-info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 10px;
|
|
margin-bottom: 4px;
|
|
background: #f9fafb;
|
|
border-radius: 4px;
|
|
}
|
|
.version-info-label {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
min-width: 70px;
|
|
}
|
|
.version-info-value {
|
|
font-size: 12px;
|
|
color: #374151;
|
|
font-weight: 500;
|
|
}
|
|
.btn-check {
|
|
width: 100%;
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-top: 12px;
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
color: white;
|
|
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-check:hover {
|
|
background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-check:active {
|
|
transform: translateY(0);
|
|
}
|
|
.version-result {
|
|
min-height: 300px;
|
|
}
|
|
.version-item {
|
|
background: #fefce8;
|
|
border: 1px solid #fef08a;
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.version-header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #fef08a;
|
|
}
|
|
.version-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 8px;
|
|
background: #eab308;
|
|
color: white;
|
|
border-radius: 3px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
margin-right: 10px;
|
|
}
|
|
.version-title-text {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #713f12;
|
|
flex: 1;
|
|
}
|
|
.version-date {
|
|
font-size: 11px;
|
|
color: #a16207;
|
|
}
|
|
.update-list {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
.update-item {
|
|
padding: 3px 0;
|
|
font-size: 12px;
|
|
color: #57534e;
|
|
line-height: 1.6;
|
|
}
|
|
.version-actions {
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #fef08a;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.btn-link {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-download {
|
|
background: linear-gradient(135deg, #169F85 0%, #14b89a 100%);
|
|
color: white;
|
|
}
|
|
.btn-download:hover {
|
|
box-shadow: 0 3px 8px rgba(22, 159, 133, 0.3);
|
|
color: white;
|
|
transform: translateY(-1px);
|
|
text-decoration: none;
|
|
}
|
|
.btn-history {
|
|
background: white;
|
|
color: #606266;
|
|
border: 1px solid #dcdfe6;
|
|
}
|
|
.btn-history:hover {
|
|
color: #169F85;
|
|
border-color: #169F85;
|
|
background: #f0f9f6;
|
|
text-decoration: none;
|
|
}
|
|
.no-update {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
}
|
|
.no-update-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
margin: 0 auto 12px;
|
|
background: #f0fdf4;
|
|
border-radius: 50%;
|
|
color: #22c55e;
|
|
font-size: 28px;
|
|
}
|
|
.no-update-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin-bottom: 6px;
|
|
}
|
|
.loading-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
}
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid #e5e7eb;
|
|
border-top: 3px solid #169F85;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 12px;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.loading-text {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.version-row { flex-direction: column; }
|
|
.version-col-left { flex: none; }
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="version-container">
|
|
<div class="version-row">
|
|
<!-- 左侧：关于系统 -->
|
|
<div class="version-col-left">
|
|
<div class="version-card">
|
|
<div class="version-card-header">
|
|
<h3>{{ T.version_about_system|default:'关于系统' }}</h3>
|
|
</div>
|
|
|
|
<div class="version-info-item">
|
|
<span class="version-info-label">{{ T.version_app_name|default:'应用名称' }}</span>
|
|
<span class="version-info-value">{{ settings.name }}</span>
|
|
</div>
|
|
|
|
<div class="version-info-item">
|
|
<span class="version-info-label">{{ T.version_software_version|default:'软件版本' }}</span>
|
|
<span class="version-info-value">v{{ project_version }}</span>
|
|
</div>
|
|
|
|
<div class="version-info-item">
|
|
<span class="version-info-label">{{ T.version_software_flag|default:'软件标记' }}</span>
|
|
<span class="version-info-value">{{ project_flag }}</span>
|
|
</div>
|
|
|
|
<button onclick="f_openCheckVersion()" class="btn-check">
|
|
{{ T.version_check_new|default:'检测新版本' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：版本检测结果 -->
|
|
<div class="version-col-right">
|
|
<div class="version-card">
|
|
<div class="version-card-header">
|
|
<h3>{{ T.version_result|default:'版本检测结果' }}</h3>
|
|
</div>
|
|
|
|
<div class="version-result" id="versionResult">
|
|
<div class="loading-state">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text">{{ T.version_checking|default:'正在检测版本...' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
let eleResult = document.getElementById("versionResult");
|
|
|
|
function f_openCheckVersion() {
|
|
eleResult.innerHTML = '<div class="loading-state">' +
|
|
'<div class="loading-spinner"></div>' +
|
|
'<div class="loading-text">{{ T.version_checking|default:"正在检测版本..." }}</div>' +
|
|
'</div>';
|
|
|
|
fetch('/version/openCheckVersion', {
|
|
method: 'GET',
|
|
headers: {'Content-Type': 'application/json'}
|
|
}).then(function(res) {
|
|
return res.json();
|
|
}).then(function(res) {
|
|
let info = res.info || {};
|
|
let historyVersionUrl = info.historyVersionUrl || '';
|
|
|
|
if (1000 === res.code) {
|
|
let version = (info.version || '').toString();
|
|
let updateContent = info.updateContent || [];
|
|
let pubdate = info.pubdate || '';
|
|
let url = info.url || '';
|
|
|
|
let html = '<div class="version-item">' +
|
|
'<div class="version-header-row">' +
|
|
'<span class="version-badge">{{ T.version_new_badge|default:"NEW" }}</span>' +
|
|
'<span class="version-title-text">{{ T.version_found_new|default:"发现新版本" }} v' + version + '</span>' +
|
|
'<span class="version-date">' + pubdate + '</span>' +
|
|
'</div>' +
|
|
'<ul class="update-list">';
|
|
|
|
for (let i = 0; i < updateContent.length; i++) {
|
|
html += '<li class="update-item">' + updateContent[i] + '</li>';
|
|
}
|
|
|
|
html += '</ul>' +
|
|
'<div class="version-actions">' +
|
|
'<a href="' + url + '" target="_blank" class="btn-link btn-download">{{ T.version_download_new|default:"下载新版本" }}</a>';
|
|
|
|
if (historyVersionUrl) {
|
|
html += '<a href="' + historyVersionUrl + '" target="_blank" class="btn-link btn-history">{{ T.version_history|default:"历史版本" }}</a>';
|
|
}
|
|
|
|
html += '</div></div>';
|
|
eleResult.innerHTML = html;
|
|
} else {
|
|
let html = '<div class="no-update">' +
|
|
'<div class="no-update-icon">✓</div>' +
|
|
'<div class="no-update-title">' + res.msg + '</div>';
|
|
|
|
if (historyVersionUrl) {
|
|
html += '<a href="' + historyVersionUrl + '" target="_blank" class="btn-link btn-history" style="margin-top:12px">{{ T.version_view_history|default:"查看历史版本" }}</a>';
|
|
}
|
|
|
|
html += '</div>';
|
|
eleResult.innerHTML = html;
|
|
}
|
|
}).catch(function() {
|
|
eleResult.innerHTML = '<div class="no-update">' +
|
|
'<div class="no-update-icon" style="color:#ef4444;background:#fef2f2">✗</div>' +
|
|
'<div class="no-update-title">{{ T.version_net_error_title|default:"网络异常" }}</div>' +
|
|
'<div style="font-size:12px;color:#6b7280">{{ T.version_net_error_desc|default:"请检查网络连接后重试" }}</div>' +
|
|
'</div>';
|
|
});
|
|
}
|
|
|
|
window.onload = function () {
|
|
f_openCheckVersion();
|
|
};
|
|
</script>
|
|
{% endblock %}
|