diff --git a/web/admin.html b/web/admin.html index 312e107..e6df57a 100644 --- a/web/admin.html +++ b/web/admin.html @@ -36,12 +36,12 @@
-
+
集团财务中心管理总览
演示数据
- +
@@ -49,7 +49,15 @@
-

管理总览

集团账务口径与高优先级事项

+
+

管理总览

集团账务口径与高优先级事项

+ +
+ + + +
+
diff --git a/web/app.js b/web/app.js index ad00465..4781cb6 100644 --- a/web/app.js +++ b/web/app.js @@ -30,6 +30,7 @@ function animateView(view, { initial = false } = {}) { return; } const selectors = [ + ".dashboard-head > *", ".page-heading > *", ".metric-card", ".period-ribbon", @@ -159,6 +160,8 @@ function showView(view) { }); const title = $("#currentViewName"); if (title) title.textContent = viewNames[view]; + const topbar = $(".topbar[data-home-view]"); + topbar?.classList.toggle("is-home-view", topbar.dataset.homeView === view); closeNavigation({ restoreFocus: navigationWasOpen }); const activeView = $(`.app-view[data-page="${view}"]`); requestAnimationFrame(() => animateView(activeView)); @@ -243,13 +246,16 @@ function initShell() { $$("[data-toast]").forEach((button) => button.addEventListener("click", () => showToast(button.dataset.toast))); $(".nav-item[data-view].is-active")?.setAttribute("aria-current", "page"); - $("#globalSearch")?.addEventListener("input", (event) => { + $$(".global-search").forEach((search) => search.addEventListener("input", (event) => { + $$(".global-search").forEach((peer) => { + if (peer !== event.target) peer.value = event.target.value; + }); const view = $(`.app-view[data-page="${state.currentView}"]`); const query = event.target.value.trim().toLowerCase(); $$(".data-table tbody tr, .company-ledger, .notification-list article, .account-directory article", view).forEach((item) => { item.hidden = query ? !item.textContent.toLowerCase().includes(query) : false; }); - }); + })); document.addEventListener("click", (event) => { if ($("#sidebar")?.classList.contains("is-open") && !event.target.closest("#sidebar") && !event.target.closest("#menuButton")) closeNavigation({ restoreFocus: true }); diff --git a/web/company.html b/web/company.html index f693184..57f0e3b 100644 --- a/web/company.html +++ b/web/company.html @@ -37,12 +37,12 @@
-
+
A公司工作台
演示数据
- +
@@ -50,7 +50,14 @@
-

本月待办

A公司 · 距离集团结账日还有 3 天

4 项待处理
+
+

本月待办

A公司 · 距离集团结账日还有 3 天 · 4 项待处理

+ +
+ + +
+
待上传账户1/ 4
diff --git a/web/styles.css b/web/styles.css index 8296531..940d217 100644 --- a/web/styles.css +++ b/web/styles.css @@ -84,6 +84,7 @@ strong, .amount, .number, dd { font-variant-numeric: tabular-nums; } .avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #242c28; color: var(--color-primary-strong); font-weight: 700; } .workspace { min-width: 0; grid-column: 2; } .topbar { position: sticky; top: 0; z-index: 90; height: 78px; display: flex; align-items: center; gap: 13px; padding: 0 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.055); background: rgba(5, 7, 6, 0.82); backdrop-filter: blur(22px); } +.topbar.is-home-view { display: none; } .workspace-name { display: flex; flex-direction: column; min-width: 150px; } .workspace-name span { color: var(--color-ink-muted); font-size: 10px; } .workspace-name strong { font-size: 14px; } @@ -100,9 +101,15 @@ strong, .amount, .number, dd { font-variant-numeric: tabular-nums; } .period-button:hover, .icon-button:hover, .inside-icon:hover, .swap-button:hover { border-color: var(--color-line-strong); background: rgba(255, 255, 255, 0.07); color: var(--color-ink); transform: translateY(-1px); } .notification-dot { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid var(--color-bg); border-radius: 9px; background: var(--color-danger); color: #fff; font: 9px var(--font-data); } .menu-button { display: none; } -main { width: min(1560px, 100%); margin: 0 auto; padding: 32px 32px 58px; } +main { width: min(1560px, 100%); margin: 0 auto; padding: 12px 32px 58px; } .app-view { display: none; } .app-view.is-active { display: block; } +.dashboard-head { min-height: 70px; display: flex; align-items: center; gap: 20px; margin-bottom: 18px; } +.dashboard-title { flex: 0 0 auto; min-width: 220px; } +.dashboard-title h1 { font-size: clamp(26px, 3vw, 35px); line-height: 1.15; letter-spacing: 0; } +.dashboard-title p { margin-top: 7px; color: var(--color-ink-muted); } +.dashboard-search { flex: 0 1 390px; margin: 0 auto; } +.dashboard-tools { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; } .page-heading { min-height: 70px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .page-heading h1 { font-size: clamp(26px, 3vw, 35px); line-height: 1.15; letter-spacing: 0; } .page-heading p { margin-top: 7px; color: var(--color-ink-muted); } @@ -484,7 +491,7 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 32px 32px 58px; } @media (max-width: 900px) { main { padding-inline: 20px; } - .search-box { display: none; } + .search-box, .dashboard-search { display: none; } .settings-layout, .reminder-layout { grid-template-columns: 1fr; } .pair-query-form { grid-template-columns: 1fr 40px 1fr; } .pair-query-form .field:nth-of-type(3) { grid-column: 1 / 3; } @@ -519,7 +526,12 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 32px 32px 58px; } .demo-badge { padding: 2px 6px; } .period-button { display: none; } .topbar-actions .button { width: 40px; padding: 0; font-size: 0; } - main { padding: 22px 13px 42px; } + main { padding: 12px 13px 42px; } + .dashboard-head { min-height: auto; gap: 12px; margin-bottom: 18px; } + .dashboard-title { min-width: 0; flex: 1 1 auto; } + .dashboard-title h1 { font-size: 27px; } + .dashboard-tools .period-button { display: none; } + .dashboard-tools .button { width: 40px; padding: 0; font-size: 0; } .page-heading { min-height: auto; flex-direction: column; margin-bottom: 18px; } .page-heading h1 { font-size: 27px; } .page-heading > .button { align-self: stretch; }