feat: service card dashboard, iframe toolbar with refresh and overview
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
+159
-10
@@ -117,6 +117,165 @@ a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.service-dashboard {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1.25rem 1.5rem 2rem;
|
||||
background: linear-gradient(165deg, #0c1016 0%, var(--bg) 42%, #0a0d12 100%);
|
||||
}
|
||||
|
||||
.service-dashboard[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dash-section {
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.dash-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dash-section-title {
|
||||
margin: 0 0 0.85rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.service-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.4rem;
|
||||
margin: 0;
|
||||
padding: 1.05rem 1.15rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(145deg, rgba(26, 35, 50, 0.95), rgba(18, 24, 34, 0.98));
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
transform 0.18s ease;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
border-color: rgba(61, 139, 253, 0.5);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(61, 139, 253, 0.12),
|
||||
0 12px 28px rgba(0, 0, 0, 0.35);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.service-card:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.service-card-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.service-card-group {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.dash-empty {
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
max-width: 28rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.frame-stack {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.frame-stack[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.frame-toolbar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0.9rem;
|
||||
background: #0e141c;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.frame-toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.btn-frame-back {
|
||||
flex-shrink: 0;
|
||||
padding: 0.32rem 0.55rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.15s ease,
|
||||
border-color 0.15s ease,
|
||||
background 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-frame-back:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--muted);
|
||||
background: rgba(61, 139, 253, 0.1);
|
||||
}
|
||||
|
||||
.frame-title {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-toolbar-refresh {
|
||||
flex-shrink: 0;
|
||||
padding: 0.38rem 0.85rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.frame-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
@@ -125,16 +284,6 @@ a:hover {
|
||||
background: #0a0e12;
|
||||
}
|
||||
|
||||
.frame-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.frame-wrap iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
+108
-8
@@ -30,7 +30,7 @@
|
||||
href="#"
|
||||
class="nav-link"
|
||||
role="button"
|
||||
data-url="{{ svc.build_url() }}"
|
||||
data-url="{{ svc.build_url()|e }}"
|
||||
data-name="{{ svc.name | e }}"
|
||||
>{{ svc.name }}</a
|
||||
>
|
||||
@@ -44,17 +44,61 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
</aside>
|
||||
<div class="content-column">
|
||||
<div class="service-dashboard" id="service-dashboard">
|
||||
{% for group, services in grouped %}
|
||||
<section class="dash-section">
|
||||
<h3 class="dash-section-title">{{ group.name }}</h3>
|
||||
<div class="service-card-grid">
|
||||
{% for svc in services %}
|
||||
<button
|
||||
type="button"
|
||||
class="service-card"
|
||||
data-url="{{ svc.build_url()|e }}"
|
||||
data-name="{{ svc.name | e }}"
|
||||
>
|
||||
<span class="service-card-title">{{ svc.name }}</span>
|
||||
<span class="service-card-group">{{ group.name }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% else %}
|
||||
<div class="dash-empty hint">
|
||||
暂无分组与服务，请到「分组管理」「服务管理」添加。
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="frame-stack" id="frame-stack" hidden>
|
||||
<div class="frame-toolbar">
|
||||
<div class="frame-toolbar-left">
|
||||
<button type="button" class="btn-frame-back" id="frame-back-overview" title="返回服务总览">
|
||||
总览
|
||||
</button>
|
||||
<span class="frame-title" id="current-service-name"></span>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary btn-toolbar-refresh" id="frame-refresh">
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
<div class="frame-wrap">
|
||||
<div class="frame-placeholder" id="placeholder" aria-hidden="true"></div>
|
||||
<iframe id="svc-frame" title="内嵌服务" hidden></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
var frame = document.getElementById("svc-frame");
|
||||
var placeholder = document.getElementById("placeholder");
|
||||
var dashboard = document.getElementById("service-dashboard");
|
||||
var frameStack = document.getElementById("frame-stack");
|
||||
var nameEl = document.getElementById("current-service-name");
|
||||
var links = document.querySelectorAll(".nav-link[data-url]");
|
||||
var cards = document.querySelectorAll(".service-card[data-url]");
|
||||
var btnRefresh = document.getElementById("frame-refresh");
|
||||
var btnBack = document.getElementById("frame-back-overview");
|
||||
var currentBaseUrl = "";
|
||||
|
||||
function setActive(el) {
|
||||
links.forEach(function (a) {
|
||||
@@ -63,17 +107,73 @@
|
||||
if (el) el.classList.add("active");
|
||||
}
|
||||
|
||||
function findNavLink(url) {
|
||||
var found = null;
|
||||
links.forEach(function (a) {
|
||||
if (a.getAttribute("data-url") === url) found = a;
|
||||
});
|
||||
return found;
|
||||
}
|
||||
|
||||
function openService(url, name, preferredNav) {
|
||||
if (!url) return;
|
||||
currentBaseUrl = url;
|
||||
nameEl.textContent = name || "";
|
||||
dashboard.hidden = true;
|
||||
frameStack.hidden = false;
|
||||
frame.hidden = false;
|
||||
frame.src = url;
|
||||
var nav = preferredNav || findNavLink(url);
|
||||
setActive(nav);
|
||||
}
|
||||
|
||||
function reloadUrl() {
|
||||
var u = currentBaseUrl;
|
||||
if (!u) return;
|
||||
var sep = u.indexOf("?") >= 0 ? "&" : "?";
|
||||
var hash = "";
|
||||
var base = u;
|
||||
var hashPos = u.indexOf("#");
|
||||
if (hashPos >= 0) {
|
||||
base = u.slice(0, hashPos);
|
||||
hash = u.slice(hashPos);
|
||||
}
|
||||
frame.src = base + sep + "_navts=" + Date.now() + hash;
|
||||
}
|
||||
|
||||
function showDashboard() {
|
||||
currentBaseUrl = "";
|
||||
frame.src = "about:blank";
|
||||
frame.hidden = true;
|
||||
frameStack.hidden = true;
|
||||
dashboard.hidden = false;
|
||||
setActive(null);
|
||||
}
|
||||
|
||||
links.forEach(function (a) {
|
||||
a.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
var url = a.getAttribute("data-url");
|
||||
if (!url) return;
|
||||
placeholder.hidden = true;
|
||||
frame.hidden = false;
|
||||
frame.src = url;
|
||||
setActive(a);
|
||||
var name = a.getAttribute("data-name") || "";
|
||||
openService(url, name, a);
|
||||
});
|
||||
});
|
||||
|
||||
cards.forEach(function (btn) {
|
||||
btn.addEventListener("click", function () {
|
||||
var url = btn.getAttribute("data-url");
|
||||
var name = btn.getAttribute("data-name") || "";
|
||||
openService(url, name, null);
|
||||
});
|
||||
});
|
||||
|
||||
btnRefresh.addEventListener("click", function () {
|
||||
reloadUrl();
|
||||
});
|
||||
|
||||
btnBack.addEventListener("click", function () {
|
||||
showDashboard();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user