agent
7909f7102d
- entries 路由支持 ?folder=&type= 查询，与搜索层 SearchParams 对齐 - 条目列表页增加筛选表单与说明文案 - 版本 0.3.4 → 0.3.5，同步 Cargo.lock Made-with: Cursor
210 lines
10 KiB
HTML
210 lines
10 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;
|
||
}
|
||
.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;
|
||
}
|
||
@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"; }
|
||
.detail { 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>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for entry in entries %}
|
||
<tr>
|
||
<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">{{ entry.folder }}</td>
|
||
<td class="col-type mono">{{ entry.entry_type }}</td>
|
||
<td class="col-name mono">{{ entry.name }}</td>
|
||
<td class="col-notes cell-notes">{{ entry.notes }}</td>
|
||
<td class="col-tags mono">{{ entry.tags }}</td>
|
||
<td class="col-meta cell-meta"><pre class="detail">{{ entry.metadata }}</pre></td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{% endif %}
|
||
</section>
|
||
</main>
|
||
</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)';
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|