443 lines
18 KiB
HTML
443 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" data-bs-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}{% endblock %} — {{ site_name|default('个人资料库') }}</title>
|
|
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
|
|
<!-- Bootstrap 5 -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Bootstrap Icons -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
|
<!-- Custom -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
{% if current_user.is_authenticated %}
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
{% endif %}
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
|
|
{% if current_user.is_authenticated %}
|
|
<!-- ── 侧边栏布局 ─────────────────────────────────────────────── -->
|
|
<div class="d-flex" id="wrapper">
|
|
|
|
<!-- 侧边栏 -->
|
|
<nav id="sidebar" class="sidebar d-flex flex-column flex-shrink-0 p-3 text-white">
|
|
<a href="{{ url_for('main.index') }}"
|
|
class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
|
<i class="bi bi-collection-play fs-4 me-2"></i>
|
|
<span class="fs-5 fw-semibold">{{ site_name|default('个人资料库') }}</span>
|
|
</a>
|
|
<hr>
|
|
|
|
{% if current_user.is_admin %}
|
|
<p class="text-uppercase text-muted small px-1 mb-1">管理</p>
|
|
<ul class="nav nav-pills flex-column mb-2">
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('admin.dashboard') }}"
|
|
class="nav-link text-white {% if request.endpoint == 'admin.dashboard' %}active{% endif %}">
|
|
<i class="bi bi-speedometer2 me-2"></i>控制台
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('admin.users') }}"
|
|
class="nav-link text-white {% if request.endpoint and 'admin.user' in request.endpoint %}active{% endif %}">
|
|
<i class="bi bi-people me-2"></i>用户管理
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('admin.settings') }}"
|
|
class="nav-link text-white {% if request.endpoint == 'admin.settings' %}active{% endif %}">
|
|
<i class="bi bi-gear me-2"></i>系统设置
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<hr>
|
|
{% endif %}
|
|
|
|
<p class="text-uppercase text-muted small px-1 mb-1">资料库</p>
|
|
<ul class="nav nav-pills flex-column mb-auto">
|
|
<li>
|
|
<a href="{{ url_for('resources.list_resources') }}"
|
|
class="nav-link text-white {% if request.endpoint == 'resources.list_resources' and not request.args.get('folder_id') and not request.args.get('type') %}active{% endif %}">
|
|
<i class="bi bi-grid me-2"></i>全部资源
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ url_for('resources.list_resources') }}?type=text"
|
|
class="nav-link text-white">
|
|
<i class="bi bi-file-text me-2"></i>文本
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ url_for('resources.list_resources') }}?type=image"
|
|
class="nav-link text-white">
|
|
<i class="bi bi-image me-2"></i>图片
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ url_for('resources.list_resources') }}?type=audio"
|
|
class="nav-link text-white">
|
|
<i class="bi bi-music-note-beamed me-2"></i>音频
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ url_for('resources.list_resources') }}?type=video"
|
|
class="nav-link text-white">
|
|
<i class="bi bi-camera-video me-2"></i>视频
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 文件夹区块 -->
|
|
<li class="mt-2">
|
|
<div class="d-flex align-items-center justify-content-between px-1 py-1">
|
|
<button class="nav-link text-white text-start d-flex align-items-center gap-1 p-0 border-0 bg-transparent"
|
|
type="button" data-bs-toggle="collapse" data-bs-target="#folderTree"
|
|
aria-expanded="true" style="font-size:.9rem">
|
|
<i class="bi bi-folder2 me-1"></i>文件夹
|
|
<i class="bi bi-chevron-down small ms-1" id="folderChevron"></i>
|
|
</button>
|
|
<button class="btn btn-sm p-0 text-white opacity-75 border-0 bg-transparent"
|
|
title="新建文件夹"
|
|
data-bs-toggle="modal" data-bs-target="#createFolderModal"
|
|
onclick="openCreateFolder(null)">
|
|
<i class="bi bi-folder-plus"></i>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
<div class="collapse show" id="folderTree">
|
|
<ul class="nav flex-column ps-2" id="folderTreeList">
|
|
<li class="text-muted small px-2 py-1" id="folderTreeLoading">
|
|
<i class="bi bi-hourglass-split me-1"></i>加载中…
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<li class="mt-2">
|
|
<a href="{{ url_for('resources.upload') }}"
|
|
class="nav-link text-white {% if request.endpoint == 'resources.upload' %}active{% endif %}">
|
|
<i class="bi bi-cloud-upload me-2"></i>上传资源
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<hr>
|
|
|
|
<!-- 用户信息 -->
|
|
<div class="dropdown">
|
|
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
|
|
data-bs-toggle="dropdown">
|
|
<div class="avatar-circle me-2">
|
|
{{ current_user.username[0].upper() }}
|
|
</div>
|
|
<strong class="text-truncate" style="max-width:120px">{{ current_user.username }}</strong>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
|
|
<li><a class="dropdown-item" href="{{ url_for('main.profile') }}">
|
|
<i class="bi bi-person me-1"></i>个人资料
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('auth.change_password') }}">
|
|
<i class="bi bi-key me-1"></i>修改密码
|
|
</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li>
|
|
<form action="{{ url_for('auth.logout') }}" method="post" class="d-inline">
|
|
{{ csrf_token_input() }}
|
|
<button type="submit" class="dropdown-item text-danger">
|
|
<i class="bi bi-box-arrow-right me-1"></i>退出登录
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主内容区 -->
|
|
<div id="main-content" class="flex-grow-1">
|
|
<!-- 顶栏 -->
|
|
<header class="topbar d-flex align-items-center px-4 py-2 border-bottom bg-white">
|
|
<button class="btn btn-sm btn-outline-secondary me-3" id="sidebarToggle">
|
|
<i class="bi bi-list"></i>
|
|
</button>
|
|
<!-- 面包屑 -->
|
|
<nav aria-label="breadcrumb" class="flex-grow-1">
|
|
{% block breadcrumb %}{% endblock %}
|
|
</nav>
|
|
<!-- 主题切换 -->
|
|
<button class="btn btn-sm btn-outline-secondary" id="themeToggle" title="切换主题">
|
|
<i class="bi bi-sun-fill" id="themeIcon"></i>
|
|
</button>
|
|
</header>
|
|
|
|
<div class="p-4">
|
|
<!-- Flash 消息 -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for cat, msg in messages %}
|
|
<div class="alert alert-{{ cat }} alert-dismissible fade show" role="alert">
|
|
{{ msg }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- 未登录：居中布局 -->
|
|
<div class="auth-wrapper d-flex align-items-center justify-content-center min-vh-100">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="auth-flash position-fixed top-0 start-50 translate-middle-x mt-3 w-auto" style="z-index:9999">
|
|
{% for cat, msg in messages %}
|
|
<div class="alert alert-{{ cat }} alert-dismissible fade show mb-2">
|
|
{{ msg }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{{ self.content() }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- 创建文件夹 Modal -->
|
|
<div class="modal fade" id="createFolderModal" tabindex="-1">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header py-2">
|
|
<h6 class="modal-title"><i class="bi bi-folder-plus me-2"></i>新建文件夹</h6>
|
|
<button type="button" class="btn-close btn-close-sm" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body py-2">
|
|
<input type="hidden" id="createFolderParentId" value="">
|
|
<div class="mb-2">
|
|
<label class="form-label form-label-sm mb-1">文件夹名称</label>
|
|
<input type="text" id="createFolderName" class="form-control form-control-sm"
|
|
placeholder="输入名称" maxlength="128">
|
|
</div>
|
|
<div class="mb-1">
|
|
<label class="form-label form-label-sm mb-1">父文件夹</label>
|
|
<select id="createFolderParentSelect" class="form-select form-select-sm">
|
|
<option value="">— 根目录 —</option>
|
|
</select>
|
|
</div>
|
|
<div class="text-danger small mt-1 d-none" id="createFolderError"></div>
|
|
</div>
|
|
<div class="modal-footer py-2">
|
|
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="submitCreateFolder()">创建</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 重命名文件夹 Modal -->
|
|
<div class="modal fade" id="renameFolderModal" tabindex="-1">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header py-2">
|
|
<h6 class="modal-title"><i class="bi bi-pencil me-2"></i>重命名文件夹</h6>
|
|
<button type="button" class="btn-close btn-close-sm" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body py-2">
|
|
<input type="hidden" id="renameFolderId">
|
|
<label class="form-label form-label-sm mb-1">新名称</label>
|
|
<input type="text" id="renameFolderName" class="form-control form-control-sm"
|
|
placeholder="新名称" maxlength="128">
|
|
<div class="text-danger small mt-1 d-none" id="renameFolderError"></div>
|
|
</div>
|
|
<div class="modal-footer py-2">
|
|
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="submitRenameFolder()">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
|
|
{% if current_user.is_authenticated %}
|
|
<script>
|
|
// ── 文件夹树 ─────────────────────────────────────────────────────────────────
|
|
const _currentFolderId = {{ (request.args.get('folder_id') or 'null') | safe }};
|
|
let _folderTreeData = [];
|
|
|
|
function _escHtml(str) {
|
|
return String(str).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
|
}
|
|
|
|
function renderFolderNodes(nodes, depth) {
|
|
if (!nodes || !nodes.length) return '';
|
|
return nodes.map(n => `
|
|
<li class="nav-item">
|
|
<div class="d-flex align-items-center folder-tree-item"
|
|
style="padding-left:${(depth + 1) * 10}px">
|
|
<a href="/resources/?folder_id=${n.id}"
|
|
class="nav-link text-white py-1 flex-grow-1 text-truncate
|
|
${_currentFolderId == n.id ? 'active' : ''}"
|
|
style="font-size:.82rem;padding-right:2px">
|
|
<i class="bi bi-folder${n.children && n.children.length ? '2' : ''} me-1"></i>
|
|
${_escHtml(n.name)}
|
|
<span class="badge bg-secondary ms-1" style="font-size:.6rem">${n.resource_count}</span>
|
|
</a>
|
|
<div class="folder-actions d-flex gap-1 me-1">
|
|
<button class="btn btn-sm p-0 text-white opacity-50 border-0 bg-transparent"
|
|
style="font-size:.7rem" title="子文件夹"
|
|
onclick="openCreateFolder(${n.id});event.preventDefault()">
|
|
<i class="bi bi-folder-plus"></i>
|
|
</button>
|
|
<button class="btn btn-sm p-0 text-white opacity-50 border-0 bg-transparent"
|
|
style="font-size:.7rem" title="重命名"
|
|
onclick="openRename(${n.id},'${_escHtml(n.name)}');event.preventDefault()">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
<button class="btn btn-sm p-0 text-danger opacity-75 border-0 bg-transparent"
|
|
style="font-size:.7rem" title="删除"
|
|
onclick="deleteFolder(${n.id},'${_escHtml(n.name)}');event.preventDefault()">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
${n.children && n.children.length
|
|
? '<ul class="nav flex-column">' + renderFolderNodes(n.children, depth + 1) + '</ul>'
|
|
: ''}
|
|
</li>`).join('');
|
|
}
|
|
|
|
async function loadFolderTree() {
|
|
const list = document.getElementById('folderTreeList');
|
|
if (!list) return;
|
|
try {
|
|
const resp = await fetch('/folders/tree');
|
|
_folderTreeData = await resp.json();
|
|
const html = renderFolderNodes(_folderTreeData, 0);
|
|
list.innerHTML = html ||
|
|
'<li class="text-muted small px-2 py-1">暂无文件夹</li>';
|
|
_fillParentSelect(_folderTreeData, document.getElementById('createFolderParentSelect'));
|
|
} catch(e) {
|
|
list.innerHTML = '<li class="text-muted small px-2 py-1">加载失败</li>';
|
|
}
|
|
}
|
|
|
|
function _fillParentSelect(nodes, sel, depth) {
|
|
depth = depth || 0;
|
|
(nodes || []).forEach(n => {
|
|
const opt = document.createElement('option');
|
|
opt.value = n.id;
|
|
opt.textContent = '\u3000'.repeat(depth) + n.name;
|
|
sel.appendChild(opt);
|
|
if (n.children && n.children.length) _fillParentSelect(n.children, sel, depth + 1);
|
|
});
|
|
}
|
|
|
|
// ── 创建文件夹 ───────────────────────────────────────────────────────────────
|
|
function openCreateFolder(parentId) {
|
|
document.getElementById('createFolderName').value = '';
|
|
document.getElementById('createFolderError').classList.add('d-none');
|
|
const sel = document.getElementById('createFolderParentSelect');
|
|
sel.innerHTML = '<option value="">— 根目录 —</option>';
|
|
_fillParentSelect(_folderTreeData, sel);
|
|
sel.value = parentId || '';
|
|
new bootstrap.Modal(document.getElementById('createFolderModal')).show();
|
|
}
|
|
|
|
async function submitCreateFolder() {
|
|
const name = document.getElementById('createFolderName').value.trim();
|
|
const parentId = document.getElementById('createFolderParentSelect').value;
|
|
const errEl = document.getElementById('createFolderError');
|
|
errEl.classList.add('d-none');
|
|
if (!name) { errEl.textContent = '请输入文件夹名称'; errEl.classList.remove('d-none'); return; }
|
|
|
|
const fd = new FormData();
|
|
fd.append('name', name);
|
|
if (parentId) fd.append('parent_id', parentId);
|
|
fd.append('csrf_token', document.querySelector('meta[name="csrf-token"]')?.content || '');
|
|
|
|
const resp = await fetch('/folders/create', {method:'POST', body:fd});
|
|
const data = await resp.json();
|
|
if (data.ok) {
|
|
bootstrap.Modal.getInstance(document.getElementById('createFolderModal')).hide();
|
|
loadFolderTree();
|
|
} else {
|
|
errEl.textContent = data.msg || '创建失败';
|
|
errEl.classList.remove('d-none');
|
|
}
|
|
}
|
|
|
|
// ── 重命名文件夹 ─────────────────────────────────────────────────────────────
|
|
function openRename(id, name) {
|
|
document.getElementById('renameFolderId').value = id;
|
|
document.getElementById('renameFolderName').value = name;
|
|
document.getElementById('renameFolderError').classList.add('d-none');
|
|
new bootstrap.Modal(document.getElementById('renameFolderModal')).show();
|
|
}
|
|
|
|
async function submitRenameFolder() {
|
|
const id = document.getElementById('renameFolderId').value;
|
|
const name = document.getElementById('renameFolderName').value.trim();
|
|
const errEl = document.getElementById('renameFolderError');
|
|
errEl.classList.add('d-none');
|
|
if (!name) { errEl.textContent = '请输入名称'; errEl.classList.remove('d-none'); return; }
|
|
|
|
const fd = new FormData();
|
|
fd.append('name', name);
|
|
fd.append('csrf_token', document.querySelector('meta[name="csrf-token"]')?.content || '');
|
|
|
|
const resp = await fetch(`/folders/${id}/rename`, {method:'POST', body:fd});
|
|
const data = await resp.json();
|
|
if (data.ok) {
|
|
bootstrap.Modal.getInstance(document.getElementById('renameFolderModal')).hide();
|
|
loadFolderTree();
|
|
if (_currentFolderId == id) location.reload();
|
|
} else {
|
|
errEl.textContent = data.msg || '重命名失败';
|
|
errEl.classList.remove('d-none');
|
|
}
|
|
}
|
|
|
|
// ── 删除文件夹 ───────────────────────────────────────────────────────────────
|
|
async function deleteFolder(id, name) {
|
|
if (!confirm(`确认删除文件夹「${name}」？\n其中的所有子文件夹和资源将一并删除，且无法恢复。`)) return;
|
|
|
|
const fd = new FormData();
|
|
fd.append('csrf_token', document.querySelector('meta[name="csrf-token"]')?.content || '');
|
|
|
|
const resp = await fetch(`/folders/${id}/delete`, {method:'POST', body:fd});
|
|
const data = await resp.json();
|
|
if (data.ok) {
|
|
if (_currentFolderId == id) {
|
|
location.href = '/resources/';
|
|
} else {
|
|
loadFolderTree();
|
|
}
|
|
} else {
|
|
alert(data.msg || '删除失败');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadFolderTree);
|
|
|
|
// Collapse 图标旋转
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const el = document.getElementById('folderTree');
|
|
const chevron = document.getElementById('folderChevron');
|
|
if (el && chevron) {
|
|
el.addEventListener('hide.bs.collapse', () => chevron.style.transform = 'rotate(-90deg)');
|
|
el.addEventListener('show.bs.collapse', () => chevron.style.transform = '');
|
|
}
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|