leefer/caiwuzongzhang
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

HEL-121: 第2批——两端外壳 + 管理总览 + 公司工作台（按原型换壳，保留 showView/角标/退出逻辑）

Browse Source 
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
leefer
2026-08-25 09:32:40 +08:00
co-authored by multica-agent
parent 7938a274f2
commit 020b556801
5 changed files with 496 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/company.html
+209 -104
View File
@@ -6,125 +6,230 @@
<meta name="description" content="金牛集团公司业务端" />
<title>公司业务端 · 金牛集团</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="design-system.css?v=2" />
</head>
<body data-portal="company">
<!--
THESIS: 公司端是面向出纳的当月处理驾驶舱，拒绝复制总账端的管理视角。
OWN-WORLD: 与集团一致的深黑玻璃系统，以荧光绿表示可执行动作，以琥珀红区分断档和待确认风险。
STORY: 出纳从四个本公司指标进入上传、匹配和复核，补齐证据后完成当月确认。
FIRST VIEWPORT: 浮动公司侧栏与账期顶栏围合工作区；四张待办统计卡领衔，阻断结账的异常和任务队列位于其下。
FORM: 用户参考图锁定的深色玻璃财务工作台，Operate 模式；seed key fe8a50aa。
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
-->
<a class="skip-link" href="#main-content">跳到主要内容</a>
<div class="app-shell">
<div class="shell">
<aside class="sidebar" id="sidebar" aria-label="公司业务导航">
<div class="brand"><span class="brand-mark">金</span><span class="brand-copy"><strong>金牛集团</strong><small>公司业务端</small></span></div>
<div class="company-context"><span>A</span><div><strong>A公司</strong><small>当前登录公司</small></div></div>
<nav class="nav-list">
<button class="nav-item is-active" data-view="workspace"><svg><use href="icons.svg#layout-dashboard"/></svg><span>工作台</span><b>4</b></button>
<button class="nav-item" data-view="upload"><svg><use href="icons.svg#upload"/></svg><span>流水导入</span></button>
<button class="nav-item" data-view="manual"><svg><use href="icons.svg#plus"/></svg><span>手工记录</span></button>
<button class="nav-item" data-view="flows"><svg><use href="icons.svg#file-spreadsheet"/></svg><span>流水管理</span></button>
<button class="nav-item" data-view="reconcile"><svg><use href="icons.svg#arrow-left-right"/></svg><span>往来确认</span><b>2</b></button>
<button class="nav-item" data-view="accounts"><svg><use href="icons.svg#landmark"/></svg><span>银行账户</span></button>
<button class="nav-item" data-view="notifications"><svg><use href="icons.svg#bell"/></svg><span>通知</span><b>2</b></button>
<div class="side-brand">
<div class="brand-name">金牛实业 · 资金往来</div>
<div class="brand-sub">HENAN JINNIU INDUSTRIAL GROUP</div>
<span class="side-role company">公司业务端</span>
</div>
<nav class="side-nav">
<div class="nav-group">业务</div>
<a class="active" data-view="workspace" href="#workspace"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="5" rx="1.5"/><rect x="13" y="10" width="8" height="11" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/></svg><span class="nav-label">工作台</span></a>
<a data-view="upload" href="#upload"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 16V4m0 0l-4 4m4-4l4 4"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg><span class="nav-label">流水导入</span></a>
<a data-view="manual" href="#manual"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg><span class="nav-label">手工记录</span></a>
<a data-view="flows" href="#flows"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M4 6h16M4 12h16M4 18h10"/></svg><span class="nav-label">流水管理</span></a>
<a data-view="reconcile" href="#reconcile"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M9 11.5l2 2 4-4.5"/><rect x="4" y="3" width="16" height="18" rx="2"/></svg><span class="nav-label">往来确认</span><span class="nav-badge">2</span></a>
<div class="nav-group">账户与消息</div>
<a data-view="accounts" href="#accounts"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg><span class="nav-label">银行账户</span></a>
<a data-view="notifications" href="#notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 19a2 2 0 0 0 4 0"/></svg><span class="nav-label">通知</span><span class="nav-badge">2</span></a>
</nav>
<div class="sidebar-footer">
<a class="nav-item" href="index.html"><svg><use href="icons.svg#log-out"/></svg><span>退出登录</span></a>
<div class="user-block"><span class="avatar">牛</span><span><strong>牛女士</strong><small>A公司出纳</small></span></div>
<div class="side-foot">
<div class="user-row">
<span class="avatar">牛</span>
<div>
<div class="user-name">牛女士</div>
<div class="user-meta">金牛煤业 · 煤业出纳</div>
</div>
<button class="logout" type="button">退出</button>
</div>
</div>
</aside>
<div class="workspace">
<main id="main-content">
<div class="main">
<div class="topbar">
<span class="crumb">公司业务端 / <b id="currentViewName">工作台</b></span>
<div class="topbar-right">
<span class="tag">账期 2026-07</span>
<span class="tag">统计截止 2026-08-20</span>
</div>
</div>
<main class="content" id="main-content">
<section class="app-view is-active" data-page="workspace">
<header class="page-heading dashboard-head"><div><h1>本月待办</h1><p>A公司 · 距离集团结账日还有 3 天</p><span class="status warning" id="workspacePendingStatus">4 项待处理</span></div>
<div class="content-toolbar">
<label class="search-box"><svg><use href="icons.svg#search"/></svg><span class="sr-only">搜索本公司数据</span><input id="globalSearch" type="search" placeholder="搜索本公司流水或对方" /></label>
<div class="toolbar-group">
<button class="icon-button" data-view-link="notifications" aria-label="通知，2 项未读" title="通知"><svg><use href="icons.svg#bell"/></svg><i class="notification-dot">2</i></button>
<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>
<div class="page-head">
<div>
<h1>工作台</h1>
<p class="page-sub"><span class="company-identity">河南金牛煤业有限公司</span> · 2026 年 7 月账期。本月 18 项账期任务已完成 13 项，剩余 4 项待办，其中 3 项阻断结账。</p>
</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>
<span class="metric-icon"><svg><use href="icons.svg#upload"/></svg></span>
<p class="metric-foot"><strong>工商银行 9481</strong> · 缺少 21 天</p>
</article>
<article class="metric-card warning" data-metric-link="reconcile" tabindex="0" role="button" aria-label="确认 1 笔待匹配流水">
<div class="metric-copy"><span class="metric-label">待确认流水</span><strong class="metric-value">1<small>笔</small></strong></div>
<span class="metric-icon"><svg><use href="icons.svg#arrow-left-right"/></svg></span>
<p class="metric-foot"><strong>280.00 万元</strong> · 有 2 个候选</p>
</article>
<article class="metric-card" data-metric-link="manual" tabindex="0" role="button" aria-label="查看 1 笔待复核手工记录">
<div class="metric-copy"><span class="metric-label">待复核记录</span><strong class="metric-value">1<small>笔</small></strong></div>
<span class="metric-icon"><svg><use href="icons.svg#list-checks"/></svg></span>
<p class="metric-foot"><strong>已提交总账</strong> · 等待管理员处理</p>
</article>
<article class="metric-card success">
<div class="metric-copy"><span class="metric-label">本月完成进度</span><strong class="metric-value">75<small>%</small></strong></div>
<span class="metric-icon"><svg><use href="icons.svg#circle-check"/></svg></span>
<p class="metric-foot"><strong>3 / 4 个账户</strong> · 距结账还有 3 天</p>
</article>
</section>
<section class="company-alert"><svg><use href="icons.svg#circle-alert"/></svg><div><strong>7 月数据尚不能结账</strong><p>工商银行账户缺少 07.01—07.21 流水，补齐后系统将重新计算匹配结果。</p></div><button class="button primary" data-open-upload>补传流水</button></section>
<section class="panel company-stack-panel" aria-label="账户覆盖">
<div class="panel-heading"><div><h2>账户覆盖</h2><p>A公司 · 4 个银行账户</p></div><span class="status warning">3 / 4 连续</span></div>
<div class="company-list" role="list">
<article class="company-row" role="listitem" data-detail="acct-citic" tabindex="0" aria-label="中信银行 5316 全部连续，查看详情"><span class="company-row-mark">中</span><div class="company-row-body"><strong>中信银行 · 5316</strong><small>基本户 · 最近导入 09:42</small></div><div class="company-row-figure"><strong>01.01—07.31</strong><small>7 个月连续</small></div><em class="status success">连续</em></article>
<article class="company-row" role="listitem" data-detail="acct-abc" tabindex="0" aria-label="农业银行 3650 全部连续，查看详情"><span class="company-row-mark">农</span><div class="company-row-body"><strong>农业银行 · 3650</strong><small>一般户 · 最近导入 08:01</small></div><div class="company-row-figure"><strong>01.01—07.31</strong><small>7 个月连续</small></div><em class="status success">连续</em></article>
<article class="company-row is-danger" role="listitem" data-detail="acct-icbc" tabindex="0" aria-label="工商银行 9481 缺少 21 天，查看详情"><span class="company-row-mark">工</span><div class="company-row-body"><strong>工商银行 · 9481</strong><small>一般户 · 已逾期 2 天</small></div><div class="company-row-figure"><strong>缺口 21 天</strong><small>07.01—07.21</small></div><em class="status danger">断档</em></article>
<article class="company-row" role="listitem" data-detail="acct-ccb" tabindex="0" aria-label="建设银行 0845 全部连续，查看详情"><span class="company-row-mark">建</span><div class="company-row-body"><strong>建设银行 · 0845</strong><small>一般户 · 最近导入 08:01</small></div><div class="company-row-figure"><strong>01.01—07.31</strong><small>7 个月连续</small></div><em class="status success">连续</em></article>
<div class="page-actions">
<button class="btn" data-open-upload>上传流水</button>
<button class="btn btn-primary" data-view-link="reconcile">去确认单边流水 (3)</button>
</div>
</section>
<div class="company-dashboard-grid">
<section class="panel task-panel">
<div class="panel-heading"><div><h2>需要处理</h2><p>按结账影响和期限排序</p></div></div>
<div class="cashier-tasks">
<article data-task-type="upload" data-detail="task-upload"><span class="task-level danger">1</span><div><h3>补传工商银行流水</h3><p>账户尾号 9481 · 缺少 07.01—07.21</p><small>影响：7 月账户覆盖与双边匹配</small></div><button class="button secondary small" data-open-upload>上传</button></article>
<article data-task-type="match" data-detail="task-match"><span class="task-level warning">2</span><div><h3>确认 1 笔单边流水</h3><p>对方：B公司 · 07.18 · 280.00 万元</p><small>系统找到 2 个候选，请核对摘要与账号</small></div><button class="button secondary small" data-view-link="reconcile">去匹配</button></article>
<article data-task-type="subject" data-detail="task-subject"><span class="task-level warning">3</span><div><h3>确认往来科目</h3><p>对方：C公司 · 06.27 · 600.00 万元</p><small>待确认：应收或其他应收</small></div><button class="button secondary small" data-view-link="reconcile">去确认</button></article>
<article data-detail="task-notice"><span class="task-level neutral">4</span><div><h3>阅读总账提醒</h3><p>请于 08.08 前完成 7 月银行流水确认</p><small>管理员 · 今天 09:30</small></div><button class="button secondary small" data-view-link="notifications">查看</button></article>
</div>
</section>
<aside class="panel coverage-panel">
<div class="panel-heading"><div><h2>账户覆盖</h2><p>起算日 2026.01.01</p></div><span class="status warning">3 / 4 连续</span></div>
<div class="coverage-list"><article><span><strong>中信银行 · 5316</strong><small>01.01—07.31</small></span><em class="status success">连续</em></article><article><span><strong>建设银行 · 0845</strong><small>01.01—07.31</small></span><em class="status success">连续</em></article><article><span><strong>农业银行 · 3650</strong><small>01.01—07.31</small></span><em class="status success">连续</em></article><article><span><strong>工商银行 · 9481</strong><small>缺少 07.01—07.21</small></span><em class="status danger">断档</em></article></div>
<button class="text-button full-text-button" data-view-link="accounts">查看全部账户</button>
</aside>
</div>
<section class="work-progress" aria-label="本月处理进度"><div><span>1</span><p><strong>流水上传</strong><small>3 / 4 个账户完成</small></p></div><i></i><div><span>2</span><p><strong>异常处理</strong><small>2 项待确认</small></p></div><i></i><div class="pending"><span>3</span><p><strong>公司确认</strong><small>尚未提交</small></p></div><i></i><div class="pending"><span>4</span><p><strong>集团结账</strong><small>次月 5 日</small></p></div></section>
<section class="panel timeline-panel" aria-label="账期时间轴">
<div class="panel-heading"><div><h2>账期时间轴</h2><p>起算日 2026.01.01 · 每月 5 日结上月账</p></div><span class="status warning">距 7 月结账日 08.05 还有 3 天</span></div>
<div class="timeline" role="img" aria-label="2026 年账期时间轴：1 至 6 月已结账，7 月进行中，工商银行 9481 在 07.01 至 07.21 断档，今天 08.08">
<div class="timeline-bar">
<span class="timeline-seg is-closed" style="left:0;width:81.9%"></span>
<span class="timeline-seg is-current" style="left:81.9%;width:15.8%"></span>
<span class="timeline-gap" style="left:81.9%;width:9.1%"></span>
<i class="timeline-today" style="left:99.1%"></i>
<div class="card">
<div class="card-head">
<span class="card-title">账期流程 · 2026-07<span class="sub">当前停在第 3 步「往来确认」，完成后即可等待集团结账</span></span>
<span class="pill pill-warn">结账日顺延至 08-29</span>
</div>
<div class="flow">
<a class="flow-step part" data-view-link="upload" href="#upload">
<div class="fs-top"><span class="fs-idx">01</span><span class="fs-dot"></span><span class="fs-name">流水导入</span></div>
<div class="fs-state">部分完成</div>
<div class="fs-meta">2/3 账户已覆盖 · 交行 7710 待审核</div>
</a>
<a class="flow-step done" data-view-link="manual" href="#manual">
<div class="fs-top"><span class="fs-idx">02</span><span class="fs-dot"></span><span class="fs-name">手工补录</span></div>
<div class="fs-state">已完成</div>
<div class="fs-meta">7 月手工记录 5 笔已提交</div>
</a>
<a class="flow-step doing" data-view-link="reconcile" href="#reconcile">
<div class="fs-top"><span class="fs-idx">03</span><span class="fs-dot"></span><span class="fs-name">往来确认</span></div>
<div class="fs-state">待处理 5 笔</div>
<div class="fs-meta">单边流水 3 笔 · 科目确认 2 笔</div>
</a>
<div class="flow-step wait">
<div class="fs-top"><span class="fs-idx">04</span><span class="fs-dot"></span><span class="fs-name">总账复核</span></div>
<div class="fs-state">等待集团</div>
<div class="fs-meta">2 笔复核在途 · 无需本公司操作</div>
</div>
<div class="timeline-ticks" aria-hidden="true">
<span style="left:0">01.01<small>起算日</small></span>
<span style="left:14%">2月</span>
<span style="left:26.7%">3月</span>
<span style="left:40.7%">4月</span>
<span style="left:54.3%">5月</span>
<span style="left:68.3%">6月</span>
<span style="left:81.9%">7月</span>
<span style="left:95.9%">8月</span>
<div class="flow-step wait">
<div class="fs-top"><span class="fs-idx">05</span><span class="fs-dot"></span><span class="fs-name">账期结账</span></div>
<div class="fs-state">08-29</div>
<div class="fs-meta">需先完成上方前 3 步</div>
</div>
</div>
<ul class="timeline-legend">
<li><i class="dot success"></i>1—6 月已结账</li>
<li><i class="dot warning"></i>7 月进行中 · 08.05 结账</li>
<li><i class="dot danger"></i>工行 9481 断档 07.01—07.21</li>
<li><i class="dot today"></i>今天 08.08</li>
</ul>
</section>
</div>
<div class="grid grid-3-2" style="margin-top: 14px;">
<div class="stack">
<div class="card">
<div class="card-head">
<span class="card-title">本月待办<span class="sub">本月任务 13/18 · 按处理顺序排列，前 3 项阻断结账</span></span>
<span class="pill pill-warn" id="workspacePendingStatus">4 项待处理</span>
</div>
<div class="list-row">
<span class="pill pill-danger">阻断</span>
<div class="lr-main">
<div class="lr-title">处理 3 笔单边流水确认</div>
<div class="lr-sub">选择对方银行流水作为证据后提交确认</div>
</div>
<button class="btn btn-sm" data-view-link="reconcile">去确认</button>
</div>
<div class="list-row">
<span class="pill pill-danger">阻断</span>
<div class="lr-main">
<div class="lr-title">确认 2 笔其他应收科目</div>
<div class="lr-sub">核对后改判或维持原科目</div>
</div>
<button class="btn btn-sm" data-view-link="manual">去处理</button>
</div>
<div class="list-row">
<span class="pill pill-danger">阻断</span>
<div class="lr-main">
<div class="lr-title">补传交行尾号 7710 账户 7 月流水</div>
<div class="lr-sub">账户已登记，待总行审核通过后即可导入</div>
</div>
<button class="btn btn-sm" data-view-link="accounts">查看账户</button>
</div>
<div class="list-row">
<span class="pill pill-muted">一般</span>
<div class="lr-main">
<div class="lr-title">核对与金牛置业 320 万往来</div>
<div class="lr-sub">置业 8821 账户 7 月流水断档，需人工核对</div>
</div>
<button class="btn btn-sm" data-view-link="flows">去核对</button>
</div>
<div class="table-foot">
<span>完成以上 4 项后，7 月账期即可提交集团结账</span>
</div>
</div>
<div class="card">
<div class="card-head">
<span class="card-title">账户覆盖情况<span class="sub">本公司已登记银行账户与流水上传覆盖区间</span></span>
<button class="btn btn-sm btn-ghost" data-view-link="accounts">管理账户 →</button>
</div>
<div class="table-wrap" style="border: 0;">
<table class="ds-table">
<thead>
<tr><th>银行账户</th><th>流水覆盖区间</th><th>状态</th></tr>
</thead>
<tbody>
<tr>
<td class="cell-main">工商银行<span class="cell-sub">尾号 3305 · 基本户</span></td>
<td class="meta">2026-01-01 ~ 2026-08-20</td>
<td><span class="pill pill-success">已覆盖</span></td>
</tr>
<tr>
<td class="cell-main">中国银行<span class="cell-sub">尾号 9916 · 一般户</span></td>
<td class="meta">2026-01-01 ~ 2026-08-12</td>
<td><span class="pill pill-warn">部分覆盖</span></td>
</tr>
<tr>
<td class="cell-main">交通银行<span class="cell-sub">尾号 7710 · 一般户</span></td>
<td class="meta">未上传</td>
<td><span class="pill pill-info">待审核</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="stack">
<div class="card">
<div class="card-head">
<span class="card-title">本公司往来合计<span class="sub">2026-01-01 至 2026-08-20 · 与集团总账口径一致 · 单位：万元</span></span>
</div>
<div class="mini-stats">
<div class="mini-stat">
<div class="ms-label">借方合计</div>
<div class="ms-value">18,420.50<span class="unit">万元</span></div>
</div>
<div class="mini-stat">
<div class="ms-label">贷方合计</div>
<div class="ms-value">12,386.00<span class="unit">万元</span></div>
</div>
<div class="mini-stat">
<div class="ms-label">明细笔数</div>
<div class="ms-value">128<span class="unit">笔</span></div>
</div>
<div class="mini-stat">
<div class="ms-label">期末净往来 · 应收方向</div>
<div class="ms-value pos">+6,034.50<span class="unit">万元</span></div>
</div>
</div>
<button class="btn btn-ghost" data-view-link="flows" style="width: 100%; margin-top: 12px;">查看本公司逐笔流水 →</button>
</div>
<div class="card">
<div class="card-head">
<span class="card-title">最新通知<span class="sub">来自集团总账</span></span>
<button class="btn btn-sm btn-ghost" data-view-link="notifications">全部通知 (3) →</button>
</div>
<div class="list-row">
<span class="pill pill-warn">提醒</span>
<div class="lr-main">
<div class="lr-title">7 月账期结账日顺延至 08-29</div>
<div class="lr-sub">请在此之前完成往来确认事项</div>
</div>
<span class="lr-side meta">08-18</span>
</div>
<div class="list-row">
<span class="pill pill-warn">提醒</span>
<div class="lr-main">
<div class="lr-title">3 笔单边流水待确认</div>
<div class="lr-sub">涉及金牛置业、金牛贸易往来</div>
</div>
<span class="lr-side meta">08-16</span>
</div>
<div class="list-row">
<span class="pill pill-success">通过</span>
<div class="lr-main">
<div class="lr-title">中行尾号 9916 流水导入成功</div>
<div class="lr-sub">流水覆盖至 08-12</div>
</div>
<span class="lr-side meta">08-12</span>
</div>
</div>
</div>
</div>
</section>
<section class="app-view" data-page="upload">