189 lines
7.8 KiB
HTML
189 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>备份管理器</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<link rel="stylesheet" href="styles/main.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 标题栏 -->
|
||
<div class="titlebar">
|
||
<div class="titlebar-drag">
|
||
<i class="fa-solid fa-box-archive titlebar-icon"></i>
|
||
<span class="titlebar-title">备份管理器</span>
|
||
</div>
|
||
<div class="titlebar-controls">
|
||
<button class="titlebar-btn minimize" onclick="window.electronAPI.minimize()"><i
|
||
class="fa-solid fa-minus"></i></button>
|
||
<button class="titlebar-btn maximize" onclick="window.electronAPI.maximize()"><i
|
||
class="fa-regular fa-square"></i></button>
|
||
<button class="titlebar-btn close" onclick="window.electronAPI.close()"><i
|
||
class="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主容器 -->
|
||
<div class="container">
|
||
<!-- 侧边栏 -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<span class="sidebar-label">数据库</span>
|
||
<button class="btn-icon" id="btnNewDb" onclick="showNewDbModal()" title="新建数据库">
|
||
<i class="fa-solid fa-plus"></i>
|
||
</button>
|
||
</div>
|
||
<div class="database-list" id="databaseList">
|
||
<!-- 数据库列表动态生成 -->
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="main-content">
|
||
<!-- 未选择数据库提示 -->
|
||
<div class="no-database" id="noDatabase">
|
||
<i class="fa-solid fa-folder-open no-database-icon"></i>
|
||
<h2>选择数据库开始</h2>
|
||
<p>从左侧选择或新建数据库</p>
|
||
</div>
|
||
|
||
<!-- 数据库内容区 -->
|
||
<div class="database-content" id="databaseContent" style="display: none;">
|
||
<!-- 工具栏 -->
|
||
<div class="toolbar">
|
||
<div class="search-box">
|
||
<i class="fa-solid fa-search"></i>
|
||
<input type="text" id="searchInput" placeholder="搜索备份..." oninput="filterBackups()">
|
||
</div>
|
||
<div class="toolbar-info">
|
||
<span id="backupCount">0 个备份</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 拖拽区域 -->
|
||
<div class="drop-zone" id="dropZone">
|
||
<i class="fa-solid fa-cloud-arrow-up drop-icon"></i>
|
||
<span>拖拽文件或文件夹到此处导入</span>
|
||
</div>
|
||
|
||
<!-- 备份列表 -->
|
||
<div class="backup-list" id="backupList">
|
||
<!-- 备份项动态生成 -->
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- 新建/编辑数据库模态框 -->
|
||
<div class="modal" id="dbModal">
|
||
<div class="modal-overlay"></div>
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="dbModalTitle">新建数据库</h3>
|
||
<button class="modal-close" onclick="closeModal('dbModal')"><i class="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label for="dbName">数据库名称</label>
|
||
<input type="text" id="dbName" placeholder="输入名称（如：LittleW）" maxlength="50">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeModal('dbModal')">取消</button>
|
||
<button class="btn btn-primary" id="btnConfirmDb">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标签编辑模态框 -->
|
||
<div class="modal" id="tagModal">
|
||
<div class="modal-overlay"></div>
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>编辑标签</h3>
|
||
<button class="modal-close" onclick="closeModal('tagModal')"><i class="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label for="tagInput">标签备注</label>
|
||
<input type="text" id="tagInput" placeholder="输入标签（如：稳定版 v1.0）" maxlength="100">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeModal('tagModal')">取消</button>
|
||
<button class="btn btn-danger" id="btnClearTag">清除</button>
|
||
<button class="btn btn-primary" id="btnConfirmTag">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 确认对话框 -->
|
||
<div class="modal" id="confirmModal">
|
||
<div class="modal-overlay"></div>
|
||
<div class="modal-content modal-sm">
|
||
<div class="modal-header">
|
||
<h3 id="confirmTitle">确认</h3>
|
||
<button class="modal-close" onclick="closeModal('confirmModal')"><i
|
||
class="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="confirmMessage">确定要执行此操作吗？</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeModal('confirmModal')">取消</button>
|
||
<button class="btn btn-primary" id="btnConfirmAction">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文件名不匹配模态框 -->
|
||
<div class="modal" id="nameMismatchModal">
|
||
<div class="modal-overlay"></div>
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fa-solid fa-triangle-exclamation" style="color: var(--warning);"></i> 文件名不匹配</h3>
|
||
<button class="modal-close" onclick="closeModal('nameMismatchModal')"><i
|
||
class="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="mismatch-info">
|
||
<div class="mismatch-row">
|
||
<span class="mismatch-label">源文件</span>
|
||
<span class="mismatch-value" id="sourceFileName">-</span>
|
||
</div>
|
||
<div class="mismatch-row">
|
||
<span class="mismatch-label">数据库</span>
|
||
<span class="mismatch-value" id="targetDbName">-</span>
|
||
</div>
|
||
<div class="mismatch-row">
|
||
<span class="mismatch-label">重命名为</span>
|
||
<span class="mismatch-value highlight" id="newFileName">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeModal('nameMismatchModal')">取消</button>
|
||
<button class="btn btn-primary" id="btnConfirmImport">确认导入</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast 提示 -->
|
||
<div class="toast" id="toast">
|
||
<i class="toast-icon" id="toastIcon"></i>
|
||
<span class="toast-message" id="toastMessage"></span>
|
||
</div>
|
||
|
||
<!-- 加载遮罩 -->
|
||
<div class="loading-overlay" id="loadingOverlay">
|
||
<div class="loading-spinner"></div>
|
||
<p class="loading-text" id="loadingText">处理中...</p>
|
||
</div>
|
||
|
||
<script src="scripts/renderer.js"></script>
|
||
</body>
|
||
|
||
</html> |