From 7938a274f26afb018e16fdd1f5bfffe651f6a449 Mon Sep 17 00:00:00 2001 From: leefer Date: Tue, 25 Aug 2026 08:42:11 +0800 Subject: [PATCH] =?UTF-8?q?HEL-120:=20=E7=AC=AC1=E6=89=B9=E9=97=A8?= =?UTF-8?q?=E9=9D=A2=E2=80=94=E2=80=94=E5=AF=BC=E5=BC=95=E5=85=A5=E5=8F=A3?= =?UTF-8?q?=20+=20=E4=B8=A4=E5=BC=A0=E7=99=BB=E5=BD=95=E9=A1=B5=20+=20?= =?UTF-8?q?=E9=A6=96=E7=99=BB=E6=94=B9=E5=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: multica-agent --- web/design-system.css | 572 +++++++++++++++++++++++++++++++++++++++++ web/index.html | 100 +++---- web/login-admin.html | 77 ++++++ web/login-company.html | 77 ++++++ web/login.js | 96 +++++++ 5 files changed, 851 insertions(+), 71 deletions(-) create mode 100644 web/design-system.css create mode 100644 web/login-admin.html create mode 100644 web/login-company.html create mode 100644 web/login.js diff --git a/web/design-system.css b/web/design-system.css new file mode 100644 index 0000000..ab2d2a3 --- /dev/null +++ b/web/design-system.css @@ -0,0 +1,572 @@ +/* ─── 金牛实业资金往来管理系统 · 共享样式 ───────────────────────────── + 方向:tech-utility(数据密集型工具)。六枚基础 token 绑定设计方向, + 状态色仅在此 :root 块内以 oklch 派生,组件一律引用变量。 */ + +:root { + --bg: oklch(98% 0.005 250); + --surface: oklch(100% 0 0); + --fg: oklch(22% 0.02 240); + --muted: oklch(50% 0.018 240); + --border: oklch(90% 0.008 240); + --accent: oklch(58% 0.16 145); + + /* 状态色 — 仅此处定义 */ + --success: oklch(55% 0.14 150); + --warn: oklch(62% 0.14 70); + --danger: oklch(55% 0.18 25); + --info: oklch(52% 0.12 240); + + --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent); + --success-soft: color-mix(in oklch, var(--success) 12%, transparent); + --warn-soft: color-mix(in oklch, var(--warn) 14%, transparent); + --danger-soft: color-mix(in oklch, var(--danger) 11%, transparent); + --info-soft: color-mix(in oklch, var(--info) 10%, transparent); + --fg-soft: color-mix(in oklch, var(--fg) 5%, transparent); + + --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; + --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; + + --radius: 8px; + --radius-lg: 12px; + --side-w: 232px; +} + +/* ─── reset ─────────────────────────────────────────────────────── */ +*, *::before, *::after { box-sizing: border-box; } +body { + margin: 0; + background: var(--bg); + color: var(--fg); + font-family: var(--font-body); + font-size: 14px; + line-height: 1.55; + -webkit-font-smoothing: antialiased; +} +img, svg { display: block; } +a { color: inherit; text-decoration: none; } +button { font: inherit; cursor: pointer; } +h1, h2, h3, h4 { margin: 0; line-height: 1.3; } +p { margin: 0; } + +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + border-radius: 4px; +} + +/* ─── 应用外壳 ──────────────────────────────────────────────────── */ +.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; } + +.sidebar { + background: var(--surface); + border-right: 1px solid var(--border); + display: flex; + flex-direction: column; + position: sticky; + top: 0; + height: 100vh; +} +.side-brand { + padding: 18px 20px 16px; + border-bottom: 1px solid var(--border); +} +.side-brand .brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; } +.side-brand .brand-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: 0.02em; } +.side-role { + display: inline-flex; align-items: center; gap: 6px; + margin-top: 10px; + padding: 3px 9px; + border-radius: 999px; + background: var(--accent-soft); + color: var(--accent); + font-size: 11px; font-weight: 600; +} +.side-role.company { background: var(--info-soft); color: var(--info); } + +.side-nav { flex: 1; overflow-y: auto; padding: 12px 10px; } +.side-nav .nav-group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); padding: 14px 10px 6px; } +.side-nav a { + display: flex; align-items: center; gap: 10px; + padding: 8px 10px; + border-radius: var(--radius); + color: var(--muted); + font-size: 13.5px; + margin-bottom: 1px; +} +.side-nav a svg { width: 16px; height: 16px; flex: none; } +.side-nav a:hover { color: var(--fg); background: var(--fg-soft); } +.side-nav a.active { + color: var(--fg); + background: var(--accent-soft); + font-weight: 600; +} +.side-nav a.active svg { color: var(--accent); } +.side-nav a .nav-badge { + margin-left: auto; + font-family: var(--font-mono); + font-size: 10.5px; + padding: 1px 7px; + border-radius: 999px; + background: var(--danger-soft); + color: var(--danger); + font-weight: 600; +} +.side-foot { border-top: 1px solid var(--border); padding: 12px 16px; } +.side-foot .user-row { display: flex; align-items: center; gap: 10px; min-width: 0; } +.side-foot .user-row > div { min-width: 0; } +.side-foot .avatar { + width: 30px; height: 30px; border-radius: 50%; + background: var(--fg); color: var(--surface); + display: grid; place-items: center; + font-size: 12px; font-weight: 600; + flex: none; +} +.side-foot .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; } +.side-foot .user-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.side-foot .logout { margin-left: auto; color: var(--muted); font-size: 12px; padding: 4px 6px; border-radius: 6px; background: none; border: 0; flex: none; white-space: nowrap; } +.side-foot .logout:hover { color: var(--danger); background: var(--danger-soft); } + +.main { min-width: 0; display: flex; flex-direction: column; } + +.topbar { + position: sticky; top: 0; z-index: 20; + background: color-mix(in oklch, var(--bg) 88%, transparent); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border); + padding: 12px 28px; + display: flex; align-items: center; gap: 16px; +} +.topbar .crumb { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } +.topbar .crumb b { color: var(--fg); font-weight: 600; } +.topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } + +.content { padding: 24px 28px 64px; max-width: 1440px; width: 100%; margin-inline: auto; } + +/* ─── 页头 ──────────────────────────────────────────────────────── */ +.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } +.page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; } +.page-head .page-sub { color: var(--muted); font-size: 13px; margin-top: 5px; max-width: 72ch; } +.page-head .page-actions { display: flex; gap: 8px; flex-wrap: wrap; } + +/* ─── 按钮 ──────────────────────────────────────────────────────── */ +.btn { + display: inline-flex; align-items: center; justify-content: center; gap: 7px; + padding: 8px 14px; + min-height: 34px; + border-radius: var(--radius); + border: 1px solid var(--border); + background: var(--surface); + color: var(--fg); + font-size: 13px; font-weight: 550; + transition: background 0.12s ease, border-color 0.12s ease; +} +.btn:hover { border-color: color-mix(in oklch, var(--fg) 40%, var(--border)); background: var(--fg-soft); } +.btn:active { transform: translateY(1px); } +.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--surface); } +.btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); border-color: color-mix(in oklch, var(--accent) 88%, black); } +.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } +.btn-ghost:hover { color: var(--fg); background: var(--fg-soft); } +.btn-danger { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 35%, var(--border)); } +.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); } +.btn-sm { padding: 4px 10px; min-height: 26px; font-size: 12px; border-radius: 6px; } +.btn[disabled] { opacity: 0.5; cursor: not-allowed; } +.btn-primary[disabled] { opacity: 1; background: var(--fg-soft); border-color: var(--border); color: var(--muted); } + +/* ─── 卡片 ──────────────────────────────────────────────────────── */ +.card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 18px 20px; +} +.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } +.card-title { font-size: 14px; font-weight: 650; letter-spacing: -0.005em; } +.card-title .sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; } + +/* ─── 指标卡 ────────────────────────────────────────────────────── */ +.stat-card { padding: 16px 18px; } +.stat-card .stat-label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; } +.stat-card .stat-value { + font-family: var(--font-mono); + font-variant-numeric: tabular-nums; + font-size: 26px; font-weight: 650; + letter-spacing: -0.02em; + margin-top: 6px; +} +.stat-card .stat-value .unit { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 2px; } +.stat-card .stat-foot { font-size: 12px; color: var(--muted); margin-top: 6px; } +.stat-card.alert .stat-value { color: var(--danger); } +.stat-card.warn .stat-value { color: var(--warn); } +.stat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } +.stat-dot.danger { background: var(--danger); } +.stat-dot.warn { background: var(--warn); } +.stat-dot.success { background: var(--success); } +.stat-dot.info { background: var(--info); } + +/* ─── 栅格与布局工具 ────────────────────────────────────────────── */ +.grid { display: grid; gap: 14px; } +.grid-2 { grid-template-columns: repeat(2, 1fr); } +.grid-3 { grid-template-columns: repeat(3, 1fr); } +.grid-4 { grid-template-columns: repeat(4, 1fr); } +.grid-5 { grid-template-columns: repeat(5, 1fr); } +.grid-2-1 { grid-template-columns: 2fr 1fr; align-items: start; } +.grid-1-2 { grid-template-columns: 1fr 2fr; align-items: start; } +.grid-3-2 { grid-template-columns: 3fr 2fr; align-items: start; } +.row { display: flex; align-items: center; gap: 10px; } +.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } +.stack { display: flex; flex-direction: column; gap: 14px; } +.muted { color: var(--muted); } +.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } +.meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } +.mt-0 { margin-top: 0; } + +@media (max-width: 1100px) { + .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } + .grid-3, .grid-2-1, .grid-1-2, .grid-3-2 { grid-template-columns: 1fr; } +} +@media (max-width: 860px) { + .shell { grid-template-columns: 1fr; } + .sidebar { position: static; height: auto; } + .grid-2 { grid-template-columns: 1fr; } + .content { padding: 16px 16px 48px; } +} + +/* ─── 数据表 ────────────────────────────────────────────────────── */ +.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } +.ds-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; } +.ds-table th, .ds-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } +.ds-table th { + color: var(--muted); font-weight: 550; + font-family: var(--font-mono); font-size: 11px; + letter-spacing: 0.05em; + background: var(--bg); + position: sticky; top: 0; +} +.ds-table tbody tr:hover { background: var(--fg-soft); } +.ds-table tbody tr:last-child td { border-bottom: 0; } +.ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } +.ds-table td.wrap, .ds-table th.wrap { white-space: normal; min-width: 180px; } +.ds-table .cell-main { font-weight: 550; } +.ds-table .cell-sub { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 1px; } +.ds-table tr.clickable { cursor: pointer; } +.ds-table .amt-in { color: var(--success); } +.ds-table .amt-out { color: var(--danger); } +.table-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); } + +/* ─── 徽章 / 状态 ───────────────────────────────────────────────── */ +.pill { + display: inline-flex; align-items: center; gap: 5px; + padding: 2px 9px; + border-radius: 999px; + font-size: 11.5px; font-weight: 600; + white-space: nowrap; +} +.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } +.pill-success { background: var(--success-soft); color: var(--success); } +.pill-warn { background: var(--warn-soft); color: color-mix(in oklch, var(--warn) 80%, black); } +.pill-danger { background: var(--danger-soft); color: var(--danger); } +.pill-info { background: var(--info-soft); color: var(--info); } +.pill-muted { background: var(--fg-soft); color: var(--muted); } +.pill-accent { background: var(--accent-soft); color: var(--accent); } + +.tag { + display: inline-flex; align-items: center; + padding: 2px 8px; + border: 1px solid var(--border); + border-radius: 6px; + font-family: var(--font-mono); + font-size: 11px; + color: var(--muted); + white-space: nowrap; +} + +/* ─── 筛选栏与表单 ──────────────────────────────────────────────── */ +.filters { + display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; + padding: 14px 16px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + margin-bottom: 14px; +} +.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } +.field > label { font-size: 12px; color: var(--muted); font-weight: 550; } +.input, .select, .textarea { + padding: 7px 11px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--surface); + color: var(--fg); + font: inherit; + font-size: 13px; + min-height: 34px; +} +.input:focus, .select:focus, .textarea:focus { + outline: 2px solid var(--accent-soft); + border-color: var(--accent); +} +.input.num-input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } +.textarea { min-height: 84px; resize: vertical; line-height: 1.55; } +.field .hint { font-size: 11.5px; color: var(--muted); } +.field .hint.error { color: var(--danger); } + +/* ─── Tabs ──────────────────────────────────────────────────────── */ +.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } +.tabs button { + background: none; border: 0; + padding: 9px 14px; + font-size: 13px; font-weight: 550; + color: var(--muted); + border-bottom: 2px solid transparent; + margin-bottom: -1px; +} +.tabs button:hover { color: var(--fg); } +.tabs button.active { color: var(--fg); border-bottom-color: var(--accent); } +.tabs button .tab-count { + font-family: var(--font-mono); font-size: 10.5px; + padding: 1px 6px; border-radius: 999px; + background: var(--fg-soft); color: var(--muted); + margin-left: 5px; +} +.tabs button.active .tab-count { background: var(--accent-soft); color: var(--accent); } + +/* ─── 时间轴(账期) ─────────────────────────────────────────────── */ +.timeline { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } +.tl-cell { flex: 1; padding: 12px 10px; border-right: 1px solid var(--border); text-align: center; min-width: 0; } +.tl-cell:last-child { border-right: 0; } +.tl-cell .tl-month { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } +.tl-cell .tl-state { font-size: 12px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; } +.tl-cell.closed { background: var(--fg-soft); } +.tl-cell.closed .tl-state { color: var(--muted); } +.tl-cell.current { background: var(--accent-soft); } +.tl-cell.current .tl-state { color: var(--accent); } +.tl-cell.open .tl-state { color: var(--fg); } + +/* ─── 进度条 ────────────────────────────────────────────────────── */ +.progress { height: 6px; border-radius: 999px; background: var(--fg-soft); overflow: hidden; } +.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } +.progress.warn > span { background: var(--warn); } +.progress.danger > span { background: var(--danger); } + +/* ─── 列表行(快查 / 待办 / 通知) ────────────────────────────────── */ +.list-row { + display: flex; align-items: center; gap: 12px; + padding: 10px 4px; + border-bottom: 1px solid var(--border); + font-size: 13px; +} +.list-row:last-child { border-bottom: 0; } +.list-row .lr-main { min-width: 0; flex: 1; } +.list-row .lr-title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.list-row .lr-sub { font-size: 12px; color: var(--muted); margin-top: 1px; } +.list-row .lr-side { text-align: right; flex: none; } + +/* ─── 弹窗 ──────────────────────────────────────────────────────── */ +.modal-backdrop { + position: fixed; inset: 0; z-index: 50; + background: color-mix(in oklch, var(--fg) 45%, transparent); + display: none; + align-items: center; justify-content: center; + padding: 24px; +} +.modal-backdrop.open { display: flex; } +.modal { + background: var(--surface); + border-radius: var(--radius-lg); + border: 1px solid var(--border); + width: 100%; max-width: 560px; + max-height: 86vh; overflow-y: auto; + padding: 22px 24px; + box-shadow: 0 18px 50px color-mix(in oklch, var(--fg) 25%, transparent); +} +.modal.wide { max-width: 760px; } +.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } +.modal-title { font-size: 16px; font-weight: 700; } +.modal-close { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 4px 8px; border-radius: 6px; } +.modal-close:hover { background: var(--fg-soft); color: var(--fg); } +.modal-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; } +.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } + +/* ─── 明细展开行 ────────────────────────────────────────────────── */ +.detail-box { + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 12px 14px; + font-size: 12.5px; +} +.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; font-size: 12.5px; } +.kv dt { color: var(--muted); } +.kv dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } + +/* ─── 提示条 ────────────────────────────────────────────────────── */ +.notice { + display: flex; gap: 10px; align-items: flex-start; + padding: 12px 14px; + border-radius: var(--radius-lg); + border: 1px solid var(--border); + font-size: 13px; + background: var(--surface); +} +.notice.warn { background: var(--warn-soft); border-color: color-mix(in oklch, var(--warn) 30%, transparent); } +.notice.danger { background: var(--danger-soft); border-color: color-mix(in oklch, var(--danger) 30%, transparent); } +.notice.info { background: var(--info-soft); border-color: color-mix(in oklch, var(--info) 25%, transparent); } +.notice .n-title { font-weight: 650; } +.notice .n-body { color: color-mix(in oklch, var(--fg) 80%, var(--muted)); margin-top: 2px; font-size: 12.5px; } + +/* ─── 登录页 ────────────────────────────────────────────────────── */ +.login-wrap { + min-height: 100vh; + display: grid; + grid-template-columns: 1fr 1fr; +} +.login-aside { + background: var(--fg); + color: var(--surface); + padding: 48px 56px; + display: flex; flex-direction: column; +} +.login-aside .brand-mark { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.65; } +.login-aside h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; line-height: 1.25; } +.login-aside .aside-sub { opacity: 0.72; font-size: 14px; margin-top: 14px; max-width: 40ch; } +.login-aside .aside-list { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } +.login-aside .aside-item { display: flex; gap: 10px; font-size: 13px; opacity: 0.85; align-items: baseline; } +.login-aside .aside-item .tick { font-family: var(--font-mono); color: var(--accent); } +.login-panel { display: grid; place-items: center; padding: 48px 32px; } +.login-card { width: 100%; max-width: 400px; } +.login-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } +.login-card .login-sub { color: var(--muted); font-size: 13px; margin: 6px 0 24px; } +.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; } +.role-switch button { + border: 1px solid var(--border); + background: var(--surface); + border-radius: var(--radius); + padding: 12px 10px; + text-align: left; + transition: border-color 0.12s ease, background 0.12s ease; +} +.role-switch button .r-name { font-size: 13.5px; font-weight: 650; } +.role-switch button .r-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; } +.role-switch button.active { border-color: var(--accent); background: var(--accent-soft); } +.role-switch button.active .r-name { color: var(--accent); } +.login-card .field { margin-bottom: 14px; } +.login-foot { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; } +.login-foot a { color: var(--accent); font-weight: 550; } +.login-foot a:hover { text-decoration: underline; } +@media (max-width: 900px) { + .login-wrap { grid-template-columns: 1fr; } + .login-aside { display: none; } +} + +/* ─── 空状态 ────────────────────────────────────────────────────── */ +.empty { + padding: 40px 20px; + text-align: center; + color: var(--muted); + font-size: 13px; +} +.empty .e-title { font-weight: 600; color: var(--fg); margin-bottom: 4px; } + +/* ─── 账期流程条(公司端工作台) ─────────────────────────────────── */ +.flow { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } +.flow-step { padding: 14px 16px 13px; border-right: 1px solid var(--border); min-width: 0; } +.flow-step:last-child { border-right: 0; } +a.flow-step { cursor: pointer; transition: background 0.12s ease; } +a.flow-step:hover { background: var(--fg-soft); } +.flow-step .fs-top { display: flex; align-items: center; gap: 8px; } +.flow-step .fs-idx { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } +.flow-step .fs-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; } +.flow-step .fs-name { font-size: 13.5px; font-weight: 650; } +.flow-step .fs-state { font-size: 12px; font-weight: 600; margin-top: 7px; color: var(--muted); } +.flow-step .fs-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } +.flow-step.done .fs-dot { background: var(--success); } +.flow-step.done .fs-state { color: var(--success); } +.flow-step.part .fs-dot { background: var(--warn); } +.flow-step.part .fs-state { color: color-mix(in oklch, var(--warn) 78%, black); } +.flow-step.doing { background: var(--warn-soft); } +.flow-step.doing .fs-dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 22%, transparent); } +.flow-step.doing .fs-state { color: color-mix(in oklch, var(--warn) 78%, black); } +a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, transparent); } +@media (max-width: 860px) { + .flow { grid-template-columns: 1fr; } + .flow-step { border-right: 0; border-bottom: 1px solid var(--border); } + .flow-step:last-child { border-bottom: 0; } +} + +/* ─── 迷你指标(2×2 数字块) ────────────────────────────────────── */ +.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } +.mini-stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; min-width: 0; } +.mini-stat .ms-label { font-size: 11.5px; color: var(--muted); } +.mini-stat .ms-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; margin-top: 3px; } +.mini-stat .ms-value .unit { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 2px; } +.mini-stat .ms-value.pos { color: var(--success); } +.mini-stat .ms-value.neg { color: var(--danger); } + +/* ─── 上传组件(拖放区 / 文件条 / 附件选择) ────────────────────── */ +.dropzone { + border: 1.5px dashed color-mix(in oklch, var(--fg) 28%, var(--border)); + border-radius: var(--radius-lg); + background: var(--bg); + padding: 30px 20px; + text-align: center; + cursor: pointer; + transition: border-color 0.12s ease, background 0.12s ease; +} +.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: var(--accent-soft); } +.dropzone.dragover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); } +.dropzone svg { width: 28px; height: 28px; margin: 0 auto 10px; color: var(--muted); } +.dropzone .dz-title { font-size: 14px; font-weight: 650; } +.dropzone .dz-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; } +.dropzone .dz-sub .dz-browse { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } +.dropzone .dz-formats { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 12px; letter-spacing: 0.02em; } + +.file-chip { + display: flex; align-items: center; gap: 10px; + margin-top: 12px; + padding: 10px 12px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--surface); +} +.file-chip svg { width: 18px; height: 18px; color: var(--muted); flex: none; } +.file-chip .fc-info { min-width: 0; flex: 1; } +.file-chip .fc-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.file-chip .fc-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 1px; } +.file-chip .fc-remove { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 4px 8px; border-radius: 6px; flex: none; } +.file-chip .fc-remove:hover { color: var(--danger); background: var(--danger-soft); } + +.attach-pick { + display: inline-flex; align-items: center; gap: 7px; + padding: 7px 12px; + min-height: 34px; + border: 1.5px dashed color-mix(in oklch, var(--fg) 28%, var(--border)); + border-radius: var(--radius); + color: var(--muted); + font-size: 13px; + cursor: pointer; + transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; +} +.attach-pick svg { width: 15px; height: 15px; } +.attach-pick:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } + +/* ─── 数据表合计行 ─────────────────────────────────────────────── */ +.ds-table tfoot td { background: var(--bg); font-weight: 650; border-top: 1.5px solid color-mix(in oklch, var(--fg) 30%, var(--border)); border-bottom: 0; } + +/* ─── 入口页(index) ────────────────────────────────────────────── */ +.portal-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; } +.portal-inner { width: 100%; max-width: 880px; } +.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; } +.portal-card { + display: block; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 24px; + transition: border-color 0.12s ease, transform 0.12s ease; +} +.portal-card:hover { border-color: var(--accent); transform: translateY(-2px); } +.portal-card .pc-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); } +.portal-card h3 { font-size: 17px; font-weight: 700; margin-top: 8px; } +.portal-card p { color: var(--muted); font-size: 13px; margin-top: 6px; } +.portal-card .pc-go { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 14px; } +@media (max-width: 720px) { .portal-grid { grid-template-columns: 1fr; } } diff --git a/web/index.html b/web/index.html index ce57708..3b71ca7 100644 --- a/web/index.html +++ b/web/index.html @@ -1,75 +1,33 @@ - - - - - 登录 · 河南金牛实业集团有限公司资金往来管理系统 - - - -
-
-
- - 河南金牛实业集团有限公司资金往来管理系统 -
-
+ + + + 金牛实业资金往来管理系统 · 入口 + + + +
+
+

JINNIU GROUP · INTERCOMPANY TREASURY

+

河南金牛实业集团有限公司 · 资金往来管理系统

+

集团内部公司间资金往来记账平台。银行流水导入后自动轧算往来余额，支持从集团汇总逐级穿透至银行原始流水。本系统包含总账管理端与公司业务端两套界面。

-
-
-

集团资金往来管理

-

集团内部资金往来登记、核对及台账查询入口

-
- -
- -
-
-
-

欢迎登录

-

请选择登录入口，使用账号和密码进入系统

-
- - - -
- - -
- - - - - - -
- - 首次登录需修改密码 -
- - - -

登录即表示你已阅读并遵守集团资金往来管理规范

-
-
-
- - +
+ + 总账管理端 · 7 个页面 +

管理总览 / 往来查询 / 审核中心 / 流水管理 / 公司与账号 / 结账与期初 / 提醒管理

+

面向集团总账会计：全局监控各公司流水提交与往来余额，集中处理审核事项，执行月度结账。

+ 去管理端登录 → + + + 公司业务端 · 7 个页面 +

工作台 / 流水导入 / 手工记录 / 流水管理 / 往来确认 / 银行账户 / 通知

+

面向成员公司出纳：上传银行流水、登记手工往来、确认单边匹配与科目，跟踪本月完成进度。

+ 去公司端登录 → + +
+ + + diff --git a/web/login-admin.html b/web/login-admin.html new file mode 100644 index 0000000..c3ecfc8 --- /dev/null +++ b/web/login-admin.html @@ -0,0 +1,77 @@ + + + + + + 登录 · 金牛实业资金往来管理系统 + + + + + + + + + + diff --git a/web/login-company.html b/web/login-company.html new file mode 100644 index 0000000..912e1ca --- /dev/null +++ b/web/login-company.html @@ -0,0 +1,77 @@ + + + + + + 登录 · 金牛实业资金往来管理系统 + + + + + + + + + + diff --git a/web/login.js b/web/login.js new file mode 100644 index 0000000..94fc2ea --- /dev/null +++ b/web/login.js @@ -0,0 +1,96 @@ +const ROLE = document.body.dataset.role || "admin"; +const REDIRECT = ROLE === "admin" ? "admin.html" : "company.html"; + +const form = document.getElementById("login-form"); +const accountInput = document.getElementById("account"); +const passwordInput = document.getElementById("password"); +const accountErr = document.getElementById("account-err"); +const passwordErr = document.getElementById("password-err"); +const loginErr = document.getElementById("login-err"); +const submitButton = form.querySelector('button[type="submit"]'); + +const modal = document.getElementById("pwd-modal"); +const newPwd = document.getElementById("new-pwd"); +const newPwd2 = document.getElementById("new-pwd2"); +const newPwdErr = document.getElementById("new-pwd-err"); +const newPwd2Err = document.getElementById("new-pwd2-err"); +const pwdErr = document.getElementById("pwd-err"); +const pwdConfirm = document.getElementById("pwd-confirm"); + +const submitLabel = "登 录"; + +function setLoading(loading) { + submitButton.disabled = loading; + submitButton.textContent = loading ? "登录中…" : submitLabel; + accountInput.disabled = loading; + passwordInput.disabled = loading; +} + +function showLoginError(message) { + loginErr.textContent = message || ""; + loginErr.hidden = !message; +} + +function openPasswordModal() { + newPwd.value = ""; + newPwd2.value = ""; + newPwdErr.hidden = true; + newPwd2Err.hidden = true; + pwdErr.hidden = true; + modal.classList.add("open"); + newPwd.focus(); +} + +form.addEventListener("submit", async (event) => { + event.preventDefault(); + showLoginError(""); + const account = accountInput.value.trim(); + const password = passwordInput.value; + accountErr.hidden = Boolean(account); + passwordErr.hidden = Boolean(password); + if (!account || !password) return; + + setLoading(true); + const response = await fetch("/api/login", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ username: account, password, portal: ROLE }), + }).catch(() => null); + const result = await response?.json().catch(() => ({})); + if (!response || !response.ok) { + showLoginError(result?.message || "登录服务暂时不可用，请稍后重试。"); + setLoading(false); + return; + } + if (result.must_change_password) { + setLoading(false); + openPasswordModal(); + return; + } + window.location.href = REDIRECT; +}); + +pwdConfirm.addEventListener("click", async () => { + const p1 = newPwd.value; + const p2 = newPwd2.value; + const valid = p1.length >= 8 && /[a-zA-Z]/.test(p1) && /\d/.test(p1); + newPwdErr.hidden = valid; + newPwd2Err.hidden = p1 === p2; + pwdErr.hidden = true; + if (!valid || p1 !== p2) return; + + pwdConfirm.disabled = true; + const response = await fetch("/api/password/change", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ old_password: passwordInput.value, new_password: p1 }), + }).catch(() => null); + const result = await response?.json().catch(() => ({})); + if (!response || !response.ok) { + pwdErr.textContent = result?.message || "修改密码失败，请稍后重试。"; + pwdErr.hidden = false; + pwdConfirm.disabled = false; + return; + } + window.location.href = REDIRECT; +});