Files
AIRegulation-DocAnalysis/Prototype/cc29bcb0-df2d-4d50-9428-7caa406ecb29/document-detail.html
wangwei dcda7e0423 @
chore: delete old layout/common/tabs components before redesign
@
2026-06-03 16:58:35 +08:00

624 lines
25 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AI + Compliance Hub - Document Detail</title>
<style>
:root {
--bg: #fafafa;
--surface: #ffffff;
--surface-warm: var(--surface);
--fg: #111111;
--fg-2: var(--fg);
--muted: #6b6b6b;
--meta: var(--muted);
--border: #e5e5e5;
--border-soft: var(--border);
--primary: #e20074;
--accent: var(--primary);
--accent-on: #ffffff;
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--success: #17a34a;
--warn: #eab308;
--danger: #dc2626;
--font-display: "TeleNeoWeb-Bold", "TeleNeoWeb-Medium", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body: "TeleNeoWeb-Regular", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 48px;
--text-4xl: 64px;
--leading-body: 1.5;
--leading-tight: 1.2;
--tracking-display: -0.01em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-20: 80px;
--section-y-desktop: 80px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 9999px;
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--container-max: 1440px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 12px;
--sidebar-w: 240px;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0f1014;
--surface: #17181d;
--surface-warm: #1d1f26;
--fg: #f5f7fb;
--fg-2: #e5e8ef;
--muted: #a2a9b8;
--meta: #858d9c;
--border: #2a2d35;
--border-soft: #21242c;
--accent-hover: color-mix(in oklab, var(--accent), white 12%);
--accent-active: color-mix(in oklab, var(--accent), black 6%);
--success: #22c55e;
--warn: #facc15;
--danger: #f87171;
--elev-raised: 0 14px 36px color-mix(in oklab, black, transparent 74%);
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 56%);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #0f1014;
--surface: #17181d;
--surface-warm: #1d1f26;
--fg: #f5f7fb;
--fg-2: #e5e8ef;
--muted: #a2a9b8;
--meta: #858d9c;
--border: #2a2d35;
--border-soft: #21242c;
--accent-hover: color-mix(in oklab, var(--accent), white 12%);
--accent-active: color-mix(in oklab, var(--accent), black 6%);
--success: #22c55e;
--warn: #facc15;
--danger: #f87171;
--elev-raised: 0 14px 36px color-mix(in oklab, black, transparent 74%);
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 56%);
color-scheme: dark;
}
:root[data-theme="light"] {
color-scheme: light;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
margin: 0;
font-family: var(--font-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fg); text-decoration: underline; }
button { font: inherit; }
/* ── Sidebar shell ── */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); z-index: 10; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.brand-logo { width: 26px; height: 26px; background: var(--accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-logo svg { color: #fff; }
.sidebar-brand-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1.2; }
.sidebar-brand-sub { font-size: 10px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-group { padding: 0 8px 4px; }
.nav-group + .nav-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.nav-group-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 0 8px 6px; display: block; }
.nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 6px; color: var(--muted); font-size: 13px; cursor: pointer; transition: background 140ms, color 140ms; position: relative; }
.nav-item:hover { background: color-mix(in oklab, var(--fg), transparent 94%); color: var(--fg); text-decoration: none; }
.nav-item.active { background: color-mix(in oklab, var(--accent), transparent 90%); color: var(--accent); font-weight: 600; }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.nav-item.active .nav-icon { opacity: 1; }
.sidebar-footer { border-top: 1px solid var(--border); padding: 10px 8px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; }
.sidebar-user:hover { background: color-mix(in oklab, var(--fg), transparent 94%); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-user-info { min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.sidebar-action { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 6px; color: var(--muted); font-size: 13px; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; transition: background 140ms, color 140ms; }
.sidebar-action:hover { background: color-mix(in oklab, var(--fg), transparent 94%); color: var(--fg); }
.content-area { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.content-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--bg), transparent 4%); backdrop-filter: blur(10px); }
.topbar-title { font-weight: 600; font-size: 15px; color: var(--fg); flex: 1; }
.footer-dot { width: 7px; height: 7px; border-radius: 50%; background: #19d3a2; box-shadow: 0 0 0 3px color-mix(in oklab, #19d3a2, transparent 82%); }
.footer-status { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 700px) { .app-shell { grid-template-columns: 1fr; } .sidebar { display: none; } }
/* ── Page-specific styles ── */
.footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 36px;
padding: 0 24px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: var(--text-xs);
font-family: var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
background: color-mix(in oklab, var(--bg), var(--surface) 12%);
}
.page {
max-width: 1440px;
margin: 0 auto;
padding: 24px;
display: grid;
gap: 20px;
}
.topline {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
min-height: 56px;
}
.back { color: var(--muted); font-size: var(--text-sm); }
.eyebrow {
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.hero {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
}
.hero h1 { font-size: clamp(30px, 4vw, 46px); }
.hero p { max-width: 72ch; color: var(--muted); }
.meta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.chip,
.status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
font-size: var(--text-xs);
font-family: var(--font-mono);
}
.status::before {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: currentColor;
}
.status.ok { color: var(--success); }
.status.warn { color: color-mix(in oklab, var(--warn), black 24%); }
.status.risk { color: var(--danger); }
.grid {
display: grid;
grid-template-columns: 0.9fr 1.4fr;
gap: 20px;
}
.stack {
display: grid;
gap: 20px;
}
.card {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
padding: 18px;
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.section-head h2 { font-size: var(--text-xl); }
.helper {
color: var(--muted);
font-size: var(--text-sm);
}
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.timeline {
display: grid;
gap: 14px;
}
.step {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 14px 14px 14px 16px;
background: color-mix(in oklab, var(--surface), var(--bg) 14%);
position: relative;
}
.step::before {
content: "";
position: absolute;
left: -1px;
top: 0;
bottom: 0;
width: 3px;
border-radius: 3px 0 0 3px;
background: var(--border);
}
.step.active::before { background: var(--accent); }
.step.done::before { background: var(--success); }
.step.fail::before { background: var(--danger); }
.progress {
height: 8px;
border-radius: 999px;
background: color-mix(in oklab, var(--fg), transparent 95%);
overflow: hidden;
margin-top: 10px;
}
.progress > span {
display: block;
height: 100%;
background: color-mix(in oklab, var(--accent), white 28%);
border-radius: inherit;
}
.artifact-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.artifact {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 14px;
background: color-mix(in oklab, var(--surface), var(--bg) 16%);
}
.artifact strong { display: block; margin-bottom: 6px; }
.table {
display: grid;
gap: 10px;
}
.table-row {
display: grid;
grid-template-columns: 1.1fr 0.9fr 0.9fr 0.9fr;
gap: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
background: color-mix(in oklab, var(--surface), var(--bg) 12%);
}
.log {
display: grid;
gap: 10px;
}
.log-item {
display: grid;
grid-template-columns: 90px 1fr;
gap: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
@media (max-width: 1100px) {
.grid,
.artifact-grid,
.table-row { grid-template-columns: 1fr; }
.hero { flex-direction: column; align-items: start; }
}
@media (max-width: 760px) {
.page { padding: 12px; }
.topline { align-items: start; flex-direction: column; }
.log-item { grid-template-columns: 1fr; }
}
</style>
</head>
<body data-page="detail">
<div class="app-shell">
<aside class="sidebar" aria-label="Primary navigation">
<div class="sidebar-brand">
<div class="brand-logo">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M2 3.5h12v1.5H2zm5.25 1.5h1.5v8h-1.5zm-3 2h2.25v1.5H4.25zm5.25 0h2.25v1.5H9.5zm-3 3h2.5v1.5H6.5z" fill="currentColor"/>
</svg>
</div>
<div>
<div class="sidebar-brand-name">T-Systems</div>
<div class="sidebar-brand-sub">Regulation Hub</div>
</div>
</div>
<nav class="sidebar-nav" aria-label="Primary">
<div class="nav-group">
<span class="nav-group-label">主导航</span>
<a class="nav-item" href="index.html">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M2 2h5v5H2zm7 0h5v5H9zM2 9h5v5H2zm7 0h5v5H9z" fill="currentColor" opacity=".7"/></svg>
概览
</a>
<a class="nav-item" href="dashboard.html">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M1.5 2.5h13v1H1.5zm0 3h13v1H1.5zm0 3h8v1h-8zm0 3h6v1h-6z" fill="currentColor"/></svg>
系统状态
</a>
</div>
<div class="nav-group">
<span class="nav-group-label">工作台</span>
<a class="nav-item active" href="document-management.html">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M3 1h7l3 3v11H3V1zm1 1v12h8V5h-3V2H4zm5 .5V4h1.5L9 1.5zM6 7h4v1H6zm0 2h4v1H6zm0 2h3v1H6z" fill="currentColor"/></svg>
文档管理
</a>
<a class="nav-item" href="compliance-analysis.html">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M8 1l7 3-1 6a7 7 0 01-6 5A7 7 0 011 10L0 4l8-3zm0 1.2L1.3 4.8l.8 5.1A6 6 0 008 14.8a6 6 0 005.9-4.9l.8-5.1L8 2.2zM7.5 5h1v4.5l-1 .5V5zm0 5.5h1v1h-1v-1z" fill="currentColor"/></svg>
合规分析
</a>
</div>
<div class="nav-group">
<span class="nav-group-label">对话</span>
<a class="nav-item" href="regulation-chat.html">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M2 2h12a1 1 0 011 1v8a1 1 0 01-1 1H5l-3 2.5V3a1 1 0 011-1zm0 1v9.5L4.5 11H14V3H2zm2 2h8v1H4zm0 2h6v1H4z" fill="currentColor"/></svg>
法规对话
</a>
</div>
</nav>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="avatar">TS</div>
<div class="sidebar-user-info">
<div class="sidebar-user-name">T-Systems User</div>
<div class="sidebar-user-role">Compliance Analyst</div>
</div>
</div>
<button class="sidebar-action od-theme-toggle" type="button" data-od-theme aria-label="Toggle theme">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 3a5 5 0 100 10A5 5 0 008 3zM2 8a6 6 0 1112 0A6 6 0 012 8z" fill="currentColor"/></svg>
主题
</button>
</div>
</aside>
<div class="content-area">
<header class="content-topbar">
<span class="topbar-title">文档解析详情</span>
</header>
<main class="page">
<section class="topline" data-od-id="detail-top">
<a class="back" href="document-management.html">← Back to document management</a>
<div class="meta-row">
<span class="chip">Battery safety</span>
<span class="chip mono">doc_id: GBT-31484-2015-r2</span>
<span class="status warn">Embedding in progress</span>
</div>
</section>
<section class="hero" data-od-id="detail-hero">
<div>
<div class="eyebrow">Document detail</div>
<h1>Trace parse artifacts from raw upload to vector index.</h1>
<p>This view is for operators diagnosing why one document is delayed or degraded. It surfaces parser settings, semantic structure, chunk generation, and Milvus insertion as separate observable stages.</p>
</div>
<div class="card" style="min-width:280px;">
<div class="helper">Current run</div>
<h2 style="font-size:24px; margin-top:8px;">Battery density addendum review</h2>
<div class="helper" style="margin-top:8px;">Uploaded 09:14 by Battery Safety Team · parser backend `aliyun`</div>
</div>
</section>
<section class="grid" data-od-id="detail-main">
<div class="stack">
<article class="card">
<div class="section-head">
<h2>Pipeline progression</h2>
<span class="helper">Live state</span>
</div>
<div class="timeline">
<div class="step done">
<strong>1. Object storage ingestion</strong>
<div class="helper">Stored in bucket `upload-files` with artifact prefix `artifacts`</div>
<div class="progress"><span style="width:100%"></span></div>
</div>
<div class="step done">
<strong>2. Aliyun parse layout extraction</strong>
<div class="helper">Parsed pages, recovered tables, and OCR confidence summarize here once the run completes.</div>
<div class="progress"><span style="width:100%"></span></div>
</div>
<div class="step done">
<strong>3. Semantic blocks</strong>
<div class="helper">Semantic block persistence is tracked here after parse artifact storage completes.</div>
<div class="progress"><span style="width:100%"></span></div>
</div>
<div class="step active">
<strong>4. Vector chunk build</strong>
<div class="helper">Using overlap chunking with header-prefixed embedding text</div>
<div class="progress"><span style="width:76%"></span></div>
</div>
<div class="step">
<strong>5. Embedding generation</strong>
<div class="helper">Target model `text-embedding-v3` · dimension 1024</div>
<div class="progress"><span style="width:38%"></span></div>
</div>
<div class="step">
<strong>6. Milvus insertion</strong>
<div class="helper">Waiting for chunk vectors before collection sync</div>
<div class="progress"><span style="width:8%"></span></div>
</div>
</div>
</article>
<article class="card">
<div class="section-head">
<h2>Run log</h2>
<span class="helper">Recent events</span>
</div>
<div class="log">
<div class="log-item">
<span class="mono helper">09:18:11</span>
<div>
<strong>Semantic block serialization completed</strong>
<div class="helper">Stored block tree and section hierarchy in Postgres parse artifact store.</div>
</div>
</div>
<div class="log-item">
<span class="mono helper">09:20:44</span>
<div>
<strong>Chunk builder emitted overlap windows</strong>
<div class="helper">Header context is prepended to vector chunks for downstream retrieval quality.</div>
</div>
</div>
<div class="log-item">
<span class="mono helper">09:22:08</span>
<div>
<strong>Embedding worker rate-limited temporarily</strong>
<div class="helper">Retry budget still healthy. No manual action required unless latency exceeds 15 minutes.</div>
</div>
</div>
</div>
</article>
</div>
<div class="stack">
<article class="card">
<div class="section-head">
<h2>Artifacts generated</h2>
<span class="helper">Output layers</span>
</div>
<div class="artifact-grid">
<div class="artifact">
<strong>Layout JSON</strong>
<span class="helper">Page, table, and text-span counts populate from the parser artifact output.</span>
</div>
<div class="artifact">
<strong>Semantic blocks</strong>
<span class="helper">Semantic nodes are mapped into chapter and clause hierarchy here.</span>
</div>
<div class="artifact">
<strong>Vector chunks</strong>
<span class="helper">Overlap windows and embedding text populate after chunk generation.</span>
</div>
</div>
</article>
<article class="card">
<div class="section-head">
<h2>Chunk profile</h2>
<span class="helper">Top segments</span>
</div>
<div class="table">
<div class="table-row">
<div>
<strong>4.2 Energy density threshold</strong>
<div class="helper">Critical requirement clause</div>
</div>
<span class="mono">chunk count pending</span>
<span class="mono">character count pending</span>
<span class="status ok">Linked</span>
</div>
<div class="table-row">
<div>
<strong>5.1 Thermal event test method</strong>
<div class="helper">Supplier evidence cross-reference</div>
</div>
<span class="mono">chunk count pending</span>
<span class="mono">character count pending</span>
<span class="status warn">Review</span>
</div>
<div class="table-row">
<div>
<strong>Appendix A formulas and tables</strong>
<div class="helper">Dense table extraction from scan</div>
</div>
<span class="mono">chunk count pending</span>
<span class="mono">character count pending</span>
<span class="status warn">Noisy</span>
</div>
</div>
</article>
<article class="card">
<div class="section-head">
<h2>Configuration snapshot</h2>
<span class="helper">Runtime values</span>
</div>
<div class="table">
<div class="table-row">
<div><strong>Parser backend</strong><div class="helper">Document extraction engine</div></div>
<span class="mono">aliyun</span>
<span class="mono">5 s poll</span>
<span class="mono">900 s timeout</span>
</div>
<div class="table-row">
<div><strong>Embedding target</strong><div class="helper">Vector generation</div></div>
<span class="mono">text-embedding-v3</span>
<span class="mono">1024 dim</span>
<span class="mono">top_k 10</span>
</div>
<div class="table-row">
<div><strong>Collection</strong><div class="helper">Milvus destination</div></div>
<span class="mono">regulations_dense_1024_v2</span>
<span class="mono">dense-only</span>
<span class="mono">ready</span>
</div>
</div>
</article>
</div>
</section>
</main>
<footer class="footer">
<span>T-Systems Regulation</span>
<div class="footer-status">
<span>Desktop Web</span>
<span class="footer-dot" aria-hidden="true"></span>
<span>Online</span>
</div>
</footer>
</div>
</div>
<script src="ui-preferences.js"></script>
</body>
</html>