初始化
This commit is contained in:
198
templates/websites.html
Normal file
198
templates/websites.html
Normal file
@@ -0,0 +1,198 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="stat-row">
|
||||
<div class="stat">
|
||||
<div class="stat-num" style="color:var(--brand);">{{ websites|length }}</div>
|
||||
<div class="stat-label">网站</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-num" style="color:var(--success);" id="accountCount">-</div>
|
||||
<div class="stat-label">账号</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary btn-block" onclick="showAddWebsite()">添加网站</button>
|
||||
<button class="btn btn-outline btn-block" onclick="showImportModal()">智能导入</button>
|
||||
|
||||
<div class="sidebar-label">
|
||||
<span>文件夹</span>
|
||||
<span onclick="showAddFolder()" style="cursor:pointer; color:var(--brand); font-size:15px;">+</span>
|
||||
</div>
|
||||
|
||||
<input class="input mb-sm" type="text" placeholder="搜索网站或网址…" id="siteSearch" oninput="filterSites()">
|
||||
|
||||
<div style="flex:1; overflow-y:auto;">
|
||||
{% for folder in folders %}
|
||||
<div class="folder-group" data-folder-id="{{ folder.id }}">
|
||||
<div class="folder-item" onclick="toggleFolder(this)" style="position:relative;">
|
||||
<span class="folder-arrow">▼</span>
|
||||
<span style="flex:1; font-weight:500;">📁 {{ folder.name }}</span>
|
||||
<span class="count">-</span>
|
||||
<span class="folder-more" onclick="event.stopPropagation();toggleFolderMenu(this)">⋮</span>
|
||||
<div class="folder-menu hidden">
|
||||
<div class="folder-menu-item" onclick="renameFolder({{ folder.id }})">✏️ 重命名</div>
|
||||
<div class="folder-menu-item danger" onclick="deleteFolder({{ folder.id }})">🗑 删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="folder-children">
|
||||
{% for site in websites if site.folder_id == folder.id %}
|
||||
<div class="site-item" data-site-id="{{ site.id }}" data-site-url="{{ site.url }}"
|
||||
onclick="selectWebsite({{ site.id }}, this)">
|
||||
<span>🌐</span>
|
||||
<span class="site-name">{{ site.name }}</span>
|
||||
<span class="site-count">{{ site.accounts|length }}个</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<!-- 未分类 -->
|
||||
<div class="sidebar-label">未分类</div>
|
||||
{% for site in websites if not site.folder_id %}
|
||||
<div class="site-item" data-site-id="{{ site.id }}" data-site-url="{{ site.url }}"
|
||||
onclick="selectWebsite({{ site.id }}, this)">
|
||||
<span>🌐</span>
|
||||
<span class="site-name">{{ site.name }}</span>
|
||||
<span class="site-count">{{ site.accounts|length }}个</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 右侧网站详情 -->
|
||||
<section class="content">
|
||||
<div class="content-header">
|
||||
<div id="siteHeaderInfo" class="text-muted">选择左侧网站查看账号</div>
|
||||
<div style="display:flex; gap:6px;">
|
||||
<button class="btn btn-ghost btn-sm hidden" id="editSiteBtn" onclick="editWebsite()">✏️ 编辑</button>
|
||||
<button class="btn btn-outline btn-sm hidden" id="addAccountBtn" onclick="showAddAccount()">+ 添加账号</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-pane" id="accountCards" style="flex:1;">
|
||||
<div style="text-align:center; padding:80px 20px; color:var(--text-placeholder);">
|
||||
<div style="font-size:48px; margin-bottom:16px; opacity:0.4;">🔐</div>
|
||||
<p>选择左侧网站查看账号密码</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 智能导入弹窗 ===== -->
|
||||
<div class="modal-overlay hidden" id="importModal" onclick="if(event.target===this)hideImportModal()">
|
||||
<div class="modal" style="width:520px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">智能导入</span>
|
||||
<button class="modal-close" onclick="hideImportModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label">粘贴账号信息</label>
|
||||
<textarea class="import-textarea" id="importText"
|
||||
placeholder="https://github.com 代码网站 zhangsan@qq.com Abc123 个人开发账号"></textarea>
|
||||
<div class="import-hint">首行=网址+空格+网站名 | 第2行=账号 | 第3行=密码 | 第4行=备注</div>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-block mb-md" onclick="parseImport()">🔍 自动识别</button>
|
||||
|
||||
<div class="result-box hidden" id="parseResult">
|
||||
<div style="font-weight:600; color:#166534; margin-bottom:10px;">识别结果</div>
|
||||
<div class="result-grid" id="parseGrid"></div>
|
||||
|
||||
<div class="form-group" style="margin-top:12px;">
|
||||
<label class="form-label">存放文件夹</label>
|
||||
<div class="form-row">
|
||||
<select class="select" id="importFolderSelect">
|
||||
<option value="">已有文件夹…</option>
|
||||
{% for folder in folders %}
|
||||
<option value="{{ folder.id }}">{{ folder.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<span class="text-muted">或</span>
|
||||
<input class="input" type="text" id="importNewFolder" placeholder="新建文件夹…">
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning hidden mb-md" id="duplicateAlert"></div>
|
||||
|
||||
<div class="modal-footer" style="padding:0; border:none;">
|
||||
<button class="btn btn-ghost" onclick="hideImportModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmImport()">确认添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 网站弹窗 ===== -->
|
||||
<div class="modal-overlay hidden" id="websiteModal" onclick="if(event.target===this)hideWebsiteModal()">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title" id="websiteModalTitle">添加网站</span>
|
||||
<button class="modal-close" onclick="hideWebsiteModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label">网站名</label>
|
||||
<input class="input" id="websiteName" placeholder="例如：GitHub">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">网址</label>
|
||||
<input class="input" id="websiteUrl" placeholder="https://github.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">文件夹</label>
|
||||
<select class="select" id="websiteFolder">
|
||||
<option value="">未分类</option>
|
||||
{% for folder in folders %}
|
||||
<option value="{{ folder.id }}">{{ folder.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-ghost" onclick="hideWebsiteModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveWebsite()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 账号弹窗 ===== -->
|
||||
<div class="modal-overlay hidden" id="accountModal" onclick="if(event.target===this)hideAccountModal()">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title" id="accountModalTitle">添加账号</span>
|
||||
<button class="modal-close" onclick="hideAccountModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label">账号 / 用户名</label>
|
||||
<input class="input" id="accountUsername" placeholder="user@example.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">密码</label>
|
||||
<div class="form-row">
|
||||
<input class="input" id="accountPassword" type="password" placeholder="输入密码" style="flex:1;">
|
||||
<button class="btn btn-ghost btn-sm" type="button" onclick="togglePwVisibility()">显示</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">备注</label>
|
||||
<textarea class="textarea" id="accountRemark" rows="2" placeholder="例如：主账号、小号…"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-ghost" onclick="hideAccountModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveAccount()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="currentSiteId" value="">
|
||||
<input type="hidden" id="editWebsiteId" value="">
|
||||
<input type="hidden" id="editAccountId" value="">
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/js/websites.js"></script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user