Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
738ab8dc35 | ||
|
|
cea991cbdd |
+13
-5
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="往来台账总账管理端" />
|
||||
<title>总账管理端 · 往来台账</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css?v=bai30-2" />
|
||||
</head>
|
||||
<body data-portal="admin">
|
||||
<!--
|
||||
@@ -36,12 +36,12 @@
|
||||
</aside>
|
||||
|
||||
<div class="workspace">
|
||||
<header class="topbar">
|
||||
<header class="topbar is-home-view" data-home-view="dashboard">
|
||||
<button class="icon-button menu-button" id="menuButton" aria-label="打开导航" aria-expanded="false" aria-controls="sidebar" title="打开导航"><svg><use href="icons.svg#menu"/></svg></button>
|
||||
<div class="workspace-name"><span>集团财务中心</span><strong id="currentViewName">管理总览</strong></div>
|
||||
<span class="demo-badge">演示数据</span>
|
||||
<div class="topbar-actions">
|
||||
<label class="search-box"><svg><use href="icons.svg#search"/></svg><span class="sr-only">全局检索</span><input id="globalSearch" type="search" placeholder="检索公司、账号或流水" /></label>
|
||||
<label class="search-box"><svg><use href="icons.svg#search"/></svg><span class="sr-only">全局检索</span><input class="global-search" id="globalSearch" type="search" placeholder="检索公司、账号或流水" /></label>
|
||||
<button class="period-button" type="button"><svg><use href="icons.svg#calendar"/></svg><span>截至 2026.07.31</span></button>
|
||||
<button class="icon-button" data-view-link="reminders" aria-label="提醒管理,4 项未处理" title="提醒管理"><svg><use href="icons.svg#bell"/></svg><i class="notification-dot">4</i></button>
|
||||
</div>
|
||||
@@ -49,7 +49,15 @@
|
||||
|
||||
<main id="main-content">
|
||||
<section class="app-view is-active" data-page="dashboard">
|
||||
<header class="page-heading"><div><h1>管理总览</h1><p>集团账务口径与高优先级事项</p></div><button class="button secondary" data-view-link="settings"><svg><use href="icons.svg#settings"/></svg>账期设置</button></header>
|
||||
<header class="dashboard-head">
|
||||
<div class="dashboard-title"><h1>管理总览</h1><p>集团账务口径与高优先级事项</p></div>
|
||||
<label class="search-box dashboard-search"><svg><use href="icons.svg#search"/></svg><span class="sr-only">全局检索</span><input class="global-search" type="search" placeholder="检索公司、账号或流水" /></label>
|
||||
<div class="dashboard-tools">
|
||||
<button class="icon-button" data-view-link="reminders" aria-label="提醒管理,4 项未处理" title="提醒管理"><svg><use href="icons.svg#bell"/></svg><i class="notification-dot">4</i></button>
|
||||
<button class="period-button" type="button"><svg><use href="icons.svg#calendar"/></svg><span>截至 2026.07.31</span></button>
|
||||
<button class="button secondary" data-view-link="settings"><svg><use href="icons.svg#settings"/></svg>账期设置</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="metric-grid" aria-label="总账关键指标">
|
||||
<article class="metric-card danger" data-metric-link="audit" tabindex="0" role="button" aria-label="查看 7 项待审核事项">
|
||||
@@ -234,6 +242,6 @@
|
||||
</form>
|
||||
</dialog>
|
||||
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
|
||||
<script src="app.js"></script>
|
||||
<script src="app.js?v=bai30-2"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+8
-2
@@ -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 });
|
||||
|
||||
+12
-5
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="往来台账公司业务端" />
|
||||
<title>A公司业务端 · 往来台账</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css?v=bai30-2" />
|
||||
</head>
|
||||
<body data-portal="company">
|
||||
<!--
|
||||
@@ -37,12 +37,12 @@
|
||||
</aside>
|
||||
|
||||
<div class="workspace">
|
||||
<header class="topbar">
|
||||
<header class="topbar is-home-view" data-home-view="workspace">
|
||||
<button class="icon-button menu-button" id="menuButton" aria-label="打开导航" aria-expanded="false" aria-controls="sidebar" title="打开导航"><svg><use href="icons.svg#menu"/></svg></button>
|
||||
<div class="workspace-name"><span>A公司</span><strong id="currentViewName">工作台</strong></div>
|
||||
<span class="demo-badge">演示数据</span>
|
||||
<div class="topbar-actions">
|
||||
<label class="search-box"><svg><use href="icons.svg#search"/></svg><span class="sr-only">搜索本公司数据</span><input id="globalSearch" type="search" placeholder="搜索本公司流水或对方" /></label>
|
||||
<label class="search-box"><svg><use href="icons.svg#search"/></svg><span class="sr-only">搜索本公司数据</span><input class="global-search" id="globalSearch" type="search" placeholder="搜索本公司流水或对方" /></label>
|
||||
<button class="period-button" type="button"><svg><use href="icons.svg#calendar"/></svg><span>2026 年 7 月</span></button>
|
||||
<button class="button primary" data-open-upload><svg><use href="icons.svg#upload"/></svg>上传流水</button>
|
||||
</div>
|
||||
@@ -50,7 +50,14 @@
|
||||
|
||||
<main id="main-content">
|
||||
<section class="app-view is-active" data-page="workspace">
|
||||
<header class="page-heading"><div><h1>本月待办</h1><p>A公司 · 距离集团结账日还有 3 天</p></div><span class="status warning" id="workspacePendingStatus">4 项待处理</span></header>
|
||||
<header class="dashboard-head">
|
||||
<div class="dashboard-title"><h1>本月待办</h1><p>A公司 · 距离集团结账日还有 3 天 · <span id="workspacePendingStatus">4 项待处理</span></p></div>
|
||||
<label class="search-box dashboard-search"><svg><use href="icons.svg#search"/></svg><span class="sr-only">搜索本公司数据</span><input class="global-search" type="search" placeholder="搜索本公司流水或对方" /></label>
|
||||
<div class="dashboard-tools">
|
||||
<button class="period-button" type="button"><svg><use href="icons.svg#calendar"/></svg><span>2026 年 7 月</span></button>
|
||||
<button class="button primary" data-open-upload><svg><use href="icons.svg#upload"/></svg>上传流水</button>
|
||||
</div>
|
||||
</header>
|
||||
<section class="metric-grid" aria-label="本公司关键指标">
|
||||
<article class="metric-card danger" data-metric-action="upload" tabindex="0" role="button" aria-label="上传 1 个待补流水账户">
|
||||
<div class="metric-copy"><span class="metric-label">待上传账户</span><strong class="metric-value">1<small>/ 4</small></strong></div>
|
||||
@@ -173,6 +180,6 @@
|
||||
</form>
|
||||
</dialog>
|
||||
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
|
||||
<script src="app.js"></script>
|
||||
<script src="app.js?v=bai30-2"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+15
-3
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user