feat(公开内容): 添加临时留言功能，留言保留10分钟，显示用户名、内容、时间和来源IP
This commit is contained in:
xiaji
@@ -1,6 +1,140 @@
|
||||
{% extends 'core/base.html' %}
|
||||
{% load humanize %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<style>
|
||||
.api-float-panel {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 16px;
|
||||
width: 280px;
|
||||
z-index: 1050;
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
.api-float-panel.collapsed {
|
||||
transform: translateX(260px);
|
||||
}
|
||||
.api-float-panel .panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, #0d6efd, #6610f2);
|
||||
color: #fff;
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
}
|
||||
.api-float-panel .panel-body {
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.api-float-panel .panel-body code {
|
||||
font-size: 11px;
|
||||
background: #f8f9fa;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
color: #d63384;
|
||||
}
|
||||
.api-float-panel .panel-body pre {
|
||||
font-size: 11px;
|
||||
margin: 4px 0 0;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.api-float-panel .btn-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.api-float-panel .btn-toggle:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.api-float-panel .panel-tab {
|
||||
display: none;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(135deg, #0d6efd, #6610f2);
|
||||
color: #fff;
|
||||
padding: 10px 6px;
|
||||
border-radius: 6px 0 0 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
writing-mode: vertical-rl;
|
||||
letter-spacing: 2px;
|
||||
z-index: 1049;
|
||||
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.api-float-panel.collapsed .panel-tab {
|
||||
display: block;
|
||||
}
|
||||
.api-float-panel.collapsed .panel-header,
|
||||
.api-float-panel.collapsed .panel-body {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-float-panel {
|
||||
width: 240px;
|
||||
right: 4px;
|
||||
top: 70px;
|
||||
}
|
||||
.api-float-panel.collapsed {
|
||||
transform: translateX(225px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 浮动API说明面板 -->
|
||||
<div class="api-float-panel" id="apiFloatPanel">
|
||||
<div class="panel-tab" onclick="toggleApiPanel()" title="展开API说明">API 说明</div>
|
||||
<div class="panel-header">
|
||||
<span><i class="bi bi-terminal me-1"></i>API 说明</span>
|
||||
<button class="btn-toggle" onclick="toggleApiPanel()" title="最小化">−</button>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p class="mb-1"><strong>端点:</strong></p>
|
||||
<code class="d-block mb-2">POST /api/v1/temp-upload/</code>
|
||||
<p class="mb-1"><strong>参数:</strong></p>
|
||||
<ul class="small mb-2 ps-3">
|
||||
<li><code>title</code> 文件标题</li>
|
||||
<li><code>file</code> 文件(≤500MB)</li>
|
||||
<li><code>expire_type</code> expire_1h / 1d / 7d</li>
|
||||
</ul>
|
||||
<p class="mb-1"><strong>cURL:</strong></p>
|
||||
<pre class="bg-dark text-white"><code>curl -X POST \
|
||||
-F "file=@f.pdf" \
|
||||
-F "title=文件" \
|
||||
-F "expire_type=expire_1d" \
|
||||
/api/v1/temp-upload/</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleApiPanel() {
|
||||
var panel = document.getElementById('apiFloatPanel');
|
||||
panel.classList.toggle('collapsed');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 页面标题 -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2 class="mb-0">
|
||||
@@ -35,6 +169,64 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 临时发言区域 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-chat-left-text me-2"></i>临时发言
|
||||
<span class="badge bg-light text-dark ms-2">留言仅保留10分钟</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="post" action="{% url 'public_content' %}" class="mb-3">
|
||||
{% csrf_token %}
|
||||
<div class="row g-2">
|
||||
<div class="col-md-3">
|
||||
<input type="text" name="username" class="form-control" maxlength="20" placeholder="用户名（可选）">
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<input type="text" name="content" class="form-control" maxlength="1000" placeholder="说点什么...（最多1000字节）" required>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
<i class="bi bi-send me-1"></i>发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% if temp_messages %}
|
||||
<div class="list-group mt-3">
|
||||
{% for message in temp_messages %}
|
||||
<div class="list-group-item">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-1">
|
||||
<i class="bi bi-person me-1"></i>{{ message.username|default:"匿名" }}
|
||||
<small class="text-muted ms-2">
|
||||
<i class="bi bi-clock me-1"></i>{{ message.created_at|naturaltime }}
|
||||
</small>
|
||||
</h6>
|
||||
<p class="mb-1">{{ message.content }}</p>
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-geo-alt me-1"></i>IP: {{ message.ip_address|default:"未知" }}
|
||||
</small>
|
||||
</div>
|
||||
<span class="badge bg-secondary">
|
||||
{{ message.created_at|naturaltime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted text-center mb-0">
|
||||
<i class="bi bi-chat-left me-1"></i>暂无留言
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if content_by_type %}
|
||||
{% for type_name, contents in content_by_type.items %}
|
||||
<div class="card mb-4">
|
||||
@@ -71,7 +263,6 @@
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if content.is_temp_file and content.expire_at %}
|
||||
{% load humanize %}
|
||||
<span class="badge bg-secondary">
|
||||
<i class="bi bi-clock me-1"></i>{{ content.expire_at|naturaltime }}过期
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user