agent
c3c536200e
- secrets-core: EntryWriteRow；按 id 更新/删除（含并发冲突与唯一键）
- Web: PATCH/DELETE /api/entries/{id}；列表编辑/删除与错误映射
- entries 模板：Notes 限高滚动；空 Notes 不显示占位框
- 版本 0.3.5 → 0.3.6，同步 Cargo.lock
Made-with: Cursor
386 lines
19 KiB
HTML
386 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" href="/favicon.svg?v={{ version }}" type="image/svg+xml">
|
||
<title>Secrets — 条目</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Inter:wght@400;500;600&display=swap');
|
||
:root {
|
||
--bg: #0d1117; --surface: #161b22; --surface2: #21262d;
|
||
--border: #30363d; --text: #e6edf3; --text-muted: #8b949e;
|
||
--accent: #58a6ff; --accent-hover: #79b8ff;
|
||
}
|
||
body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; min-height: 100vh; }
|
||
.layout { display: flex; min-height: 100vh; }
|
||
.sidebar {
|
||
width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border);
|
||
padding: 24px 16px; display: flex; flex-direction: column; gap: 20px;
|
||
}
|
||
.sidebar-logo { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 600;
|
||
color: var(--text); text-decoration: none; padding: 0 10px; }
|
||
.sidebar-logo span { color: var(--accent); }
|
||
.sidebar-menu { display: flex; flex-direction: column; gap: 6px; }
|
||
.sidebar-link {
|
||
padding: 10px 12px; border-radius: 8px; color: var(--text-muted); text-decoration: none;
|
||
border: 1px solid transparent; font-size: 13px; font-weight: 500;
|
||
}
|
||
.sidebar-link:hover { background: var(--surface2); color: var(--text); }
|
||
.sidebar-link.active {
|
||
background: rgba(88,166,255,0.12); color: var(--text); border-color: rgba(88,166,255,0.35);
|
||
}
|
||
.content-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||
.topbar {
|
||
background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px;
|
||
display: flex; align-items: center; gap: 12px; min-height: 52px;
|
||
}
|
||
.topbar-spacer { flex: 1; }
|
||
.nav-user { font-size: 13px; color: var(--text-muted); }
|
||
.btn-sign-out {
|
||
padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border);
|
||
background: none; color: var(--text); font-size: 12px; text-decoration: none; cursor: pointer;
|
||
}
|
||
.btn-sign-out:hover { background: var(--surface2); }
|
||
.main { padding: 32px 24px 40px; flex: 1; }
|
||
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
|
||
padding: 24px; width: 100%; max-width: 1280px; margin: 0 auto; }
|
||
.card-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
|
||
.card-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }
|
||
.filter-bar {
|
||
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
|
||
margin-bottom: 20px; padding: 16px; background: var(--bg); border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
}
|
||
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 140px; flex: 1; }
|
||
.filter-field label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
|
||
.filter-field input {
|
||
background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
|
||
color: var(--text); padding: 8px 10px; font-size: 13px; font-family: 'JetBrains Mono', monospace;
|
||
outline: none; width: 100%;
|
||
}
|
||
.filter-field input:focus { border-color: var(--accent); }
|
||
.filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
||
.btn-filter {
|
||
padding: 8px 16px; border-radius: 6px; border: none; background: var(--accent); color: #0d1117;
|
||
font-size: 13px; font-weight: 600; cursor: pointer;
|
||
}
|
||
.btn-filter:hover { background: var(--accent-hover); }
|
||
.btn-clear {
|
||
padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: transparent;
|
||
color: var(--text-muted); font-size: 13px; text-decoration: none; cursor: pointer;
|
||
}
|
||
.btn-clear:hover { background: var(--surface2); color: var(--text); }
|
||
.empty { color: var(--text-muted); font-size: 14px; padding: 20px 0; }
|
||
.table-wrap { overflow-x: auto; }
|
||
table { width: 100%; border-collapse: collapse; min-width: 720px; }
|
||
th, td { text-align: left; vertical-align: top; padding: 12px 10px; border-top: 1px solid var(--border); }
|
||
th { color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
|
||
td { font-size: 13px; }
|
||
.mono { font-family: 'JetBrains Mono', monospace; }
|
||
.cell-notes, .cell-meta {
|
||
max-width: 280px; word-break: break-word;
|
||
}
|
||
.notes-scroll {
|
||
max-height: 160px;
|
||
overflow: auto;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
padding: 8px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
}
|
||
.detail {
|
||
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
|
||
padding: 10px; white-space: pre-wrap; word-break: break-word; font-size: 12px;
|
||
max-width: 320px; max-height: 160px; overflow: auto;
|
||
}
|
||
.col-actions { white-space: nowrap; }
|
||
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.btn-row {
|
||
padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
|
||
border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted);
|
||
font-family: inherit;
|
||
}
|
||
.btn-row:hover { color: var(--text); border-color: var(--text-muted); }
|
||
.btn-row.danger:hover { border-color: #f85149; color: #f85149; }
|
||
.modal-overlay {
|
||
position: fixed; inset: 0; background: rgba(1, 4, 9, 0.65); z-index: 200;
|
||
display: flex; align-items: center; justify-content: center; padding: 16px;
|
||
}
|
||
.modal-overlay[hidden] { display: none !important; }
|
||
.modal {
|
||
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
|
||
padding: 22px; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
|
||
box-shadow: 0 16px 48px rgba(0,0,0,0.45);
|
||
}
|
||
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
|
||
.modal-field { margin-bottom: 12px; }
|
||
.modal-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
|
||
.modal-field input, .modal-field textarea {
|
||
width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
|
||
color: var(--text); padding: 8px 10px; font-size: 13px; font-family: 'JetBrains Mono', monospace;
|
||
outline: none;
|
||
}
|
||
.modal-field textarea { min-height: 72px; resize: vertical; }
|
||
.modal-field textarea.metadata-edit { min-height: 140px; }
|
||
.modal-error { color: #f85149; font-size: 12px; margin-bottom: 10px; display: none; }
|
||
.modal-error.visible { display: block; }
|
||
.modal-footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
|
||
.btn-modal { padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: transparent; color: var(--text); }
|
||
.btn-modal.primary { background: var(--accent); color: #0d1117; border-color: transparent; font-weight: 600; }
|
||
.btn-modal.primary:hover { background: var(--accent-hover); }
|
||
.btn-modal.danger { border-color: #f85149; color: #f85149; }
|
||
@media (max-width: 900px) {
|
||
.layout { flex-direction: column; }
|
||
.sidebar {
|
||
width: 100%; border-right: none; border-bottom: 1px solid var(--border);
|
||
padding: 16px; gap: 14px;
|
||
}
|
||
.sidebar-menu { flex-direction: row; flex-wrap: wrap; }
|
||
.sidebar-link { flex: 1; text-align: center; min-width: 72px; }
|
||
.main { padding: 20px 12px 28px; }
|
||
.card { padding: 16px; }
|
||
.topbar { padding: 12px 16px; flex-wrap: wrap; }
|
||
table, thead, tbody, th, td, tr { display: block; }
|
||
thead { display: none; }
|
||
tr { border-top: 1px solid var(--border); padding: 12px 0; }
|
||
td { border-top: none; padding: 6px 0; max-width: none; }
|
||
td::before {
|
||
display: block; color: var(--text-muted); font-size: 11px;
|
||
margin-bottom: 4px; text-transform: uppercase;
|
||
}
|
||
td.col-updated::before { content: "更新"; }
|
||
td.col-folder::before { content: "Folder"; }
|
||
td.col-type::before { content: "Type"; }
|
||
td.col-name::before { content: "Name"; }
|
||
td.col-notes::before { content: "Notes"; }
|
||
td.col-tags::before { content: "Tags"; }
|
||
td.col-meta::before { content: "Metadata"; }
|
||
td.col-actions::before { content: "操作"; }
|
||
.detail { max-width: none; }
|
||
.notes-scroll { max-width: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="layout">
|
||
<aside class="sidebar">
|
||
<a href="/dashboard" class="sidebar-logo"><span>secrets</span></a>
|
||
<nav class="sidebar-menu">
|
||
<a href="/dashboard" class="sidebar-link">MCP</a>
|
||
<a href="/entries" class="sidebar-link active">条目</a>
|
||
<a href="/audit" class="sidebar-link">审计</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<div class="content-shell">
|
||
<div class="topbar">
|
||
<span class="topbar-spacer"></span>
|
||
<span class="nav-user">{{ user_name }}{% if !user_email.is_empty() %} · {{ user_email }}{% endif %}</span>
|
||
<form action="/auth/logout" method="post" style="display:inline">
|
||
<button type="submit" class="btn-sign-out">退出</button>
|
||
</form>
|
||
</div>
|
||
|
||
<main class="main">
|
||
<section class="card">
|
||
<div class="card-title">我的条目</div>
|
||
<div class="card-subtitle">在当前筛选条件下，共 <strong>{{ total_count }}</strong> 条记录；本页显示 <strong>{{ shown_count }}</strong> 条（按更新时间降序，单页最多 {{ limit }} 条）。不含密文字段。时间为浏览器本地时区。</div>
|
||
|
||
<form class="filter-bar" method="get" action="/entries">
|
||
<div class="filter-field">
|
||
<label for="filter-folder">Folder（精确匹配）</label>
|
||
<input id="filter-folder" name="folder" type="text" value="{{ filter_folder }}" placeholder="例如 refining" autocomplete="off">
|
||
</div>
|
||
<div class="filter-field">
|
||
<label for="filter-type">Type（精确匹配）</label>
|
||
<input id="filter-type" name="type" type="text" value="{{ filter_type }}" placeholder="例如 server" autocomplete="off">
|
||
</div>
|
||
<div class="filter-actions">
|
||
<button type="submit" class="btn-filter">筛选</button>
|
||
<a href="/entries" class="btn-clear">清空</a>
|
||
</div>
|
||
</form>
|
||
|
||
{% if entries.is_empty() %}
|
||
<div class="empty">暂无条目。</div>
|
||
{% else %}
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>更新</th>
|
||
<th>Folder</th>
|
||
<th>Type</th>
|
||
<th>Name</th>
|
||
<th>Notes</th>
|
||
<th>Tags</th>
|
||
<th>Metadata</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for entry in entries %}
|
||
<tr data-entry-id="{{ entry.id }}">
|
||
<td class="col-updated mono"><time class="entry-local-time" datetime="{{ entry.updated_at_iso }}">{{ entry.updated_at_iso }}</time></td>
|
||
<td class="col-folder mono cell-folder">{{ entry.folder }}</td>
|
||
<td class="col-type mono cell-type">{{ entry.entry_type }}</td>
|
||
<td class="col-name mono cell-name">{{ entry.name }}</td>
|
||
<td class="col-notes cell-notes">{% if !entry.notes.is_empty() %}<div class="notes-scroll cell-notes-val">{{ entry.notes }}</div>{% endif %}</td>
|
||
<td class="col-tags mono cell-tags-val">{{ entry.tags }}</td>
|
||
<td class="col-meta cell-meta"><pre class="detail cell-meta-val">{{ entry.metadata }}</pre></td>
|
||
<td class="col-actions">
|
||
<div class="row-actions">
|
||
<button type="button" class="btn-row btn-edit">编辑</button>
|
||
<button type="button" class="btn-row danger btn-del">删除</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{% endif %}
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="edit-overlay" class="modal-overlay" hidden>
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-title">
|
||
<div class="modal-title" id="edit-title">编辑条目</div>
|
||
<div id="edit-error" class="modal-error"></div>
|
||
<div class="modal-field"><label for="edit-folder">Folder</label><input id="edit-folder" type="text" autocomplete="off"></div>
|
||
<div class="modal-field"><label for="edit-type">Type</label><input id="edit-type" type="text" autocomplete="off"></div>
|
||
<div class="modal-field"><label for="edit-name">Name</label><input id="edit-name" type="text" autocomplete="off"></div>
|
||
<div class="modal-field"><label for="edit-notes">Notes</label><textarea id="edit-notes"></textarea></div>
|
||
<div class="modal-field"><label for="edit-tags">Tags（逗号分隔）</label><input id="edit-tags" type="text" autocomplete="off"></div>
|
||
<div class="modal-field"><label for="edit-metadata">Metadata（JSON 对象）</label><textarea id="edit-metadata" class="metadata-edit"></textarea></div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn-modal" id="edit-cancel">取消</button>
|
||
<button type="button" class="btn-modal primary" id="edit-save">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
(function () {
|
||
document.querySelectorAll('time.entry-local-time[datetime]').forEach(function (el) {
|
||
var raw = el.getAttribute('datetime');
|
||
var d = raw ? new Date(raw) : null;
|
||
if (d && !isNaN(d.getTime())) {
|
||
el.textContent = d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'medium' });
|
||
el.title = raw + ' (UTC)';
|
||
}
|
||
});
|
||
|
||
var editOverlay = document.getElementById('edit-overlay');
|
||
var editError = document.getElementById('edit-error');
|
||
var editFolder = document.getElementById('edit-folder');
|
||
var editType = document.getElementById('edit-type');
|
||
var editName = document.getElementById('edit-name');
|
||
var editNotes = document.getElementById('edit-notes');
|
||
var editTags = document.getElementById('edit-tags');
|
||
var editMetadata = document.getElementById('edit-metadata');
|
||
var currentEntryId = null;
|
||
|
||
function showEditErr(msg) {
|
||
editError.textContent = msg || '';
|
||
editError.classList.toggle('visible', !!msg);
|
||
}
|
||
|
||
function openEdit(tr) {
|
||
var id = tr.getAttribute('data-entry-id');
|
||
if (!id) return;
|
||
currentEntryId = id;
|
||
showEditErr('');
|
||
editFolder.value = tr.querySelector('.cell-folder') ? tr.querySelector('.cell-folder').textContent.trim() : '';
|
||
editType.value = tr.querySelector('.cell-type') ? tr.querySelector('.cell-type').textContent.trim() : '';
|
||
editName.value = tr.querySelector('.cell-name') ? tr.querySelector('.cell-name').textContent.trim() : '';
|
||
editNotes.value = tr.querySelector('.cell-notes-val') ? tr.querySelector('.cell-notes-val').textContent : '';
|
||
var tagsText = tr.querySelector('.cell-tags-val') ? tr.querySelector('.cell-tags-val').textContent.trim() : '';
|
||
editTags.value = tagsText;
|
||
var metaPre = tr.querySelector('.cell-meta-val');
|
||
editMetadata.value = metaPre ? metaPre.textContent : '{}';
|
||
editOverlay.hidden = false;
|
||
}
|
||
|
||
function closeEdit() {
|
||
editOverlay.hidden = true;
|
||
currentEntryId = null;
|
||
showEditErr('');
|
||
}
|
||
|
||
document.getElementById('edit-cancel').addEventListener('click', closeEdit);
|
||
editOverlay.addEventListener('click', function (e) {
|
||
if (e.target === editOverlay) closeEdit();
|
||
});
|
||
|
||
document.getElementById('edit-save').addEventListener('click', function () {
|
||
if (!currentEntryId) return;
|
||
var meta;
|
||
try {
|
||
meta = JSON.parse(editMetadata.value);
|
||
} catch (err) {
|
||
showEditErr('Metadata 不是合法 JSON');
|
||
return;
|
||
}
|
||
if (meta === null || typeof meta !== 'object' || Array.isArray(meta)) {
|
||
showEditErr('Metadata 必须是 JSON 对象');
|
||
return;
|
||
}
|
||
var tags = editTags.value.split(',').map(function (s) { return s.trim(); }).filter(Boolean);
|
||
var body = {
|
||
folder: editFolder.value,
|
||
type: editType.value,
|
||
name: editName.value.trim(),
|
||
notes: editNotes.value,
|
||
tags: tags,
|
||
metadata: meta
|
||
};
|
||
showEditErr('');
|
||
fetch('/api/entries/' + encodeURIComponent(currentEntryId), {
|
||
method: 'PATCH',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify(body)
|
||
}).then(function (r) {
|
||
return r.json().then(function (data) {
|
||
if (!r.ok) throw new Error(data.error || ('HTTP ' + r.status));
|
||
return data;
|
||
});
|
||
}).then(function () {
|
||
closeEdit();
|
||
window.location.reload();
|
||
}).catch(function (e) {
|
||
showEditErr(e.message || String(e));
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('tr[data-entry-id]').forEach(function (tr) {
|
||
tr.querySelector('.btn-edit').addEventListener('click', function () { openEdit(tr); });
|
||
tr.querySelector('.btn-del').addEventListener('click', function () {
|
||
var id = tr.getAttribute('data-entry-id');
|
||
var nameEl = tr.querySelector('.cell-name');
|
||
var name = nameEl ? nameEl.textContent.trim() : '';
|
||
if (!id) return;
|
||
if (!confirm('确定删除条目「' + name + '」？关联的密文字段将一并删除。')) return;
|
||
fetch('/api/entries/' + encodeURIComponent(id), { method: 'DELETE', credentials: 'same-origin' })
|
||
.then(function (r) {
|
||
return r.json().then(function (data) {
|
||
if (!r.ok) throw new Error(data.error || ('HTTP ' + r.status));
|
||
return data;
|
||
});
|
||
})
|
||
.then(function () { window.location.reload(); })
|
||
.catch(function (e) { alert(e.message || String(e)); });
|
||
});
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|