style: 移除右侧浮动面板，保留标题栏下拉菜单
This commit is contained in:
xiaji
@@ -3,150 +3,38 @@
|
||||
|
||||
{% 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">
|
||||
<i class="bi bi-globe me-2 text-info"></i>公开内容
|
||||
</h2>
|
||||
{% if user.is_authenticated %}
|
||||
<div>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-cloud-arrow-up me-1"></i>API上传
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end p-3" style="min-width: 350px;">
|
||||
<li>
|
||||
<h6 class="dropdown-header">临时文件上传 API</h6>
|
||||
<p class="small text-muted mb-2">端点: <code>POST /api/v1/temp-upload/</code></p>
|
||||
<hr>
|
||||
<p class="small mb-1"><strong>参数:</strong></p>
|
||||
<ul class="small mb-2">
|
||||
<li><code>title</code> - 文件标题</li>
|
||||
<li><code>file</code> - 文件(最大500MB)</li>
|
||||
<li><code>expire_type</code> - expire_1h / expire_1d / expire_7d</li>
|
||||
</ul>
|
||||
<p class="small mb-1"><strong>cURL示例:</strong></p>
|
||||
<pre class="small bg-dark text-white p-2 rounded"><code>curl -X POST -F "file=@f.pdf" -F "title=文件" -F "expire_type=expire_1d" /api/v1/temp-upload/</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% if user.is_authenticated %}
|
||||
<a href="{% url 'add_public_content' %}" class="btn btn-primary">
|
||||
<i class="bi bi-plus-lg me-1"></i>添加内容
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 临时发言区域 -->
|
||||
|
||||
Reference in New Issue
Block a user