1xiny
1765 lines
50 KiB
HTML
1765 lines
50 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Issue Hub AI 中心调度平台界面设计图</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light;
|
|
--bg: #edf1f4;
|
|
--paper: #fbfcfc;
|
|
--paper-2: #f5f7f8;
|
|
--ink: #17212b;
|
|
--muted: #64717d;
|
|
--line: #d8e0e6;
|
|
--line-strong: #b9c6cf;
|
|
--teal: #0f8f83;
|
|
--teal-soft: #dff5f2;
|
|
--blue: #2f6df6;
|
|
--blue-soft: #e7eefc;
|
|
--amber: #b46a0a;
|
|
--amber-soft: #fff1d6;
|
|
--red: #c94545;
|
|
--red-soft: #ffe5e5;
|
|
--green: #247c48;
|
|
--green-soft: #e1f4e8;
|
|
--shadow: 0 24px 80px rgba(24, 36, 48, 0.12);
|
|
--radius: 8px;
|
|
font-family:
|
|
Inter, "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial,
|
|
sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.page {
|
|
width: min(1480px, calc(100vw - 36px));
|
|
margin: 0 auto;
|
|
padding: 32px 0 56px;
|
|
}
|
|
|
|
.board-head {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 24px;
|
|
align-items: end;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.board-head h1 {
|
|
margin: 0 0 8px;
|
|
font-size: clamp(30px, 4vw, 56px);
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.board-head p {
|
|
max-width: 760px;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.board-links {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.board-links a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 36px;
|
|
padding: 0 12px;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--paper);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.principles {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
border: 1px solid var(--line);
|
|
background: var(--paper);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.principle {
|
|
min-height: 94px;
|
|
padding: 16px;
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.principle:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.principle strong {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.principle span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.shot {
|
|
margin: 0 0 34px;
|
|
}
|
|
|
|
.shot-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.shot-title h2 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.shot-title span {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.app-shell {
|
|
overflow: hidden;
|
|
min-height: 760px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius);
|
|
background: var(--paper);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.dispatch-app {
|
|
display: grid;
|
|
grid-template-columns: 228px 1fr 356px;
|
|
min-height: 760px;
|
|
}
|
|
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
padding: 22px 18px;
|
|
border-right: 1px solid var(--line);
|
|
background: #f7f9fa;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 36px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 7px;
|
|
background: var(--ink);
|
|
color: white;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.nav {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 36px;
|
|
padding: 0 10px;
|
|
border-radius: 7px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: var(--ink);
|
|
background: white;
|
|
box-shadow: inset 0 0 0 1px var(--line);
|
|
}
|
|
|
|
.count {
|
|
min-width: 24px;
|
|
height: 20px;
|
|
padding: 0 7px;
|
|
border-radius: 999px;
|
|
background: #e7ecef;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
line-height: 20px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.sync-box {
|
|
margin-top: auto;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: white;
|
|
}
|
|
|
|
.sync-box strong,
|
|
.section-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sync-box p {
|
|
margin: 0 0 10px;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.meter {
|
|
height: 6px;
|
|
overflow: hidden;
|
|
border-radius: 999px;
|
|
background: #e7ecef;
|
|
}
|
|
|
|
.meter i {
|
|
display: block;
|
|
width: 72%;
|
|
height: 100%;
|
|
background: var(--teal);
|
|
}
|
|
|
|
.workspace {
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topbar {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 18px;
|
|
align-items: center;
|
|
min-height: 78px;
|
|
padding: 20px 24px 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.topbar h3 {
|
|
margin: 0 0 6px;
|
|
font-size: 22px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.topbar p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
button,
|
|
.button {
|
|
min-height: 34px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 7px;
|
|
background: white;
|
|
color: var(--ink);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.button.primary,
|
|
button.primary {
|
|
border-color: var(--teal);
|
|
background: var(--teal);
|
|
color: white;
|
|
}
|
|
|
|
.button.ghost,
|
|
button.ghost {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
.metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.metric {
|
|
min-height: 84px;
|
|
padding: 14px 18px;
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.metric:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.metric b {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 24px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.metric span {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.metric .trend {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: var(--teal);
|
|
}
|
|
|
|
.queue-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 280px;
|
|
min-height: 596px;
|
|
}
|
|
|
|
.queue-main {
|
|
min-width: 0;
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
min-height: 58px;
|
|
padding: 12px 18px;
|
|
border-bottom: 1px solid var(--line);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 28px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: white;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.chip.active {
|
|
border-color: var(--ink);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.issue-table {
|
|
display: grid;
|
|
}
|
|
|
|
.table-head,
|
|
.issue-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, 1.6fr) 150px 112px 112px 104px;
|
|
gap: 12px;
|
|
align-items: center;
|
|
padding: 0 18px;
|
|
}
|
|
|
|
.table-head {
|
|
min-height: 38px;
|
|
color: var(--muted);
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.issue-row {
|
|
min-height: 82px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: white;
|
|
}
|
|
|
|
.issue-row.selected {
|
|
background: #f6fbfa;
|
|
box-shadow: inset 3px 0 0 var(--teal);
|
|
}
|
|
|
|
.issue-title {
|
|
min-width: 0;
|
|
}
|
|
|
|
.issue-title strong {
|
|
display: block;
|
|
overflow: hidden;
|
|
margin-bottom: 7px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.issue-title small {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 24px;
|
|
padding: 0 8px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tag.teal {
|
|
background: var(--teal-soft);
|
|
color: var(--teal);
|
|
}
|
|
|
|
.tag.blue {
|
|
background: var(--blue-soft);
|
|
color: var(--blue);
|
|
}
|
|
|
|
.tag.amber {
|
|
background: var(--amber-soft);
|
|
color: var(--amber);
|
|
}
|
|
|
|
.tag.red {
|
|
background: var(--red-soft);
|
|
color: var(--red);
|
|
}
|
|
|
|
.tag.green {
|
|
background: var(--green-soft);
|
|
color: var(--green);
|
|
}
|
|
|
|
.confidence {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.confidence span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mini-meter {
|
|
height: 5px;
|
|
overflow: hidden;
|
|
border-radius: 999px;
|
|
background: #e7ecef;
|
|
}
|
|
|
|
.mini-meter i {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--blue);
|
|
}
|
|
|
|
.side-list {
|
|
padding: 18px;
|
|
background: #fafbfb;
|
|
}
|
|
|
|
.side-list h4,
|
|
.inspector h4 {
|
|
margin: 0 0 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.event {
|
|
display: grid;
|
|
grid-template-columns: 10px 1fr;
|
|
gap: 10px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-top: 6px;
|
|
border-radius: 50%;
|
|
background: var(--teal);
|
|
}
|
|
|
|
.event strong {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.event span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.inspector {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
min-width: 0;
|
|
padding: 22px;
|
|
background: #f7f9fa;
|
|
}
|
|
|
|
.ai-panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ai-head {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.ai-head b {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.ai-head span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.route {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.route-step {
|
|
display: grid;
|
|
grid-template-columns: 24px 1fr;
|
|
gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.route-step i {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--teal-soft);
|
|
color: var(--teal);
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.route-step strong {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.route-step span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.factor-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.factor {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.inspector-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.split-board {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 380px;
|
|
gap: 22px;
|
|
}
|
|
|
|
.client-app {
|
|
display: grid;
|
|
grid-template-columns: 212px 1fr;
|
|
min-height: 640px;
|
|
}
|
|
|
|
.client-main {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
min-width: 0;
|
|
}
|
|
|
|
.work-list {
|
|
display: grid;
|
|
grid-template-columns: 360px 1fr;
|
|
min-height: 542px;
|
|
}
|
|
|
|
.work-column {
|
|
border-right: 1px solid var(--line);
|
|
background: #fafbfb;
|
|
}
|
|
|
|
.compact-item {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: white;
|
|
}
|
|
|
|
.compact-item.active {
|
|
background: #f6fbfa;
|
|
box-shadow: inset 3px 0 0 var(--teal);
|
|
}
|
|
|
|
.compact-item strong {
|
|
display: block;
|
|
margin: 7px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.compact-item p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.detail-preview {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
min-width: 0;
|
|
padding: 18px;
|
|
}
|
|
|
|
.detail-preview h3 {
|
|
margin: 0 0 8px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.detail-preview .meta {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.summary-block {
|
|
padding: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #fafbfb;
|
|
}
|
|
|
|
.summary-block p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.task-steps {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.task-step {
|
|
display: grid;
|
|
grid-template-columns: 28px 1fr auto;
|
|
gap: 12px;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.task-step i {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--paper-2);
|
|
color: var(--muted);
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.task-step.done i {
|
|
background: var(--green-soft);
|
|
color: var(--green);
|
|
}
|
|
|
|
.task-step strong {
|
|
display: block;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.task-step span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.phone {
|
|
min-height: 640px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 24px;
|
|
padding: 14px;
|
|
background: #101820;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.phone-screen {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: 18px;
|
|
background: var(--paper);
|
|
}
|
|
|
|
.mobile-head {
|
|
padding: 18px 18px 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.mobile-head strong {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.mobile-head span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mobile-form {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.field {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.field label {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.input {
|
|
min-height: 42px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: white;
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.input.large {
|
|
min-height: 118px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.upload-zone {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 82px;
|
|
border: 1px dashed var(--line-strong);
|
|
border-radius: var(--radius);
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ai-hint {
|
|
padding: 12px;
|
|
border: 1px solid var(--blue-soft);
|
|
border-radius: var(--radius);
|
|
background: #f4f8ff;
|
|
}
|
|
|
|
.ai-hint strong {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: var(--blue);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ai-hint span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.detail-app {
|
|
display: grid;
|
|
grid-template-columns: 300px 1fr 330px;
|
|
min-height: 720px;
|
|
}
|
|
|
|
.issue-summary-pane {
|
|
padding: 22px;
|
|
border-right: 1px solid var(--line);
|
|
background: #f7f9fa;
|
|
}
|
|
|
|
.issue-summary-pane h3 {
|
|
margin: 14px 0 10px;
|
|
font-size: 24px;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.issue-summary-pane p {
|
|
margin: 0 0 18px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.kv {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.kv div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.kv span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.timeline-pane {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
min-width: 0;
|
|
}
|
|
|
|
.timeline-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: center;
|
|
min-height: 72px;
|
|
padding: 18px 22px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.timeline-head h3 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.timeline {
|
|
padding: 22px;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 92px 1fr;
|
|
gap: 18px;
|
|
padding: 0 0 24px;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 106px;
|
|
top: 8px;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: var(--line);
|
|
}
|
|
|
|
.timeline-item:last-child::before {
|
|
display: none;
|
|
}
|
|
|
|
.time {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.timeline-body {
|
|
position: relative;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.timeline-body::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -1px;
|
|
top: 4px;
|
|
width: 9px;
|
|
height: 9px;
|
|
border: 2px solid white;
|
|
border-radius: 50%;
|
|
background: var(--teal);
|
|
box-shadow: 0 0 0 1px var(--teal);
|
|
}
|
|
|
|
.timeline-body strong {
|
|
display: block;
|
|
margin-bottom: 7px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.timeline-body p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.control-pane {
|
|
padding: 22px;
|
|
border-left: 1px solid var(--line);
|
|
background: #fafbfb;
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.control-group h4 {
|
|
margin: 0 0 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.control-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.control-list button {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.dept-app {
|
|
display: grid;
|
|
grid-template-columns: 240px 1fr;
|
|
min-height: 660px;
|
|
}
|
|
|
|
.dept-main {
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
min-width: 0;
|
|
}
|
|
|
|
.load-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.load-cell {
|
|
min-height: 92px;
|
|
padding: 16px;
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.load-cell:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.load-cell b {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.load-cell span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.member-load {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1fr;
|
|
min-height: 474px;
|
|
}
|
|
|
|
.member-list {
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.member-row {
|
|
display: grid;
|
|
grid-template-columns: 34px 1fr auto;
|
|
gap: 12px;
|
|
align-items: center;
|
|
min-height: 64px;
|
|
padding: 0 18px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.avatar {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
background: var(--paper-2);
|
|
color: var(--ink);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.member-row strong {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.member-row span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.heatmap {
|
|
padding: 18px;
|
|
}
|
|
|
|
.heatmap-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.heat {
|
|
aspect-ratio: 1;
|
|
border-radius: 6px;
|
|
background: var(--paper-2);
|
|
}
|
|
|
|
.heat.low {
|
|
background: var(--green-soft);
|
|
}
|
|
|
|
.heat.mid {
|
|
background: var(--amber-soft);
|
|
}
|
|
|
|
.heat.high {
|
|
background: var(--red-soft);
|
|
}
|
|
|
|
.flow-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 1px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--line);
|
|
margin-bottom: 34px;
|
|
}
|
|
|
|
.flow-step {
|
|
min-height: 96px;
|
|
padding: 16px;
|
|
background: var(--paper);
|
|
}
|
|
|
|
.flow-step b {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.flow-step span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
@media (max-width: 1160px) {
|
|
.board-head,
|
|
.split-board {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.board-links {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.principles,
|
|
.metrics,
|
|
.flow-strip,
|
|
.load-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.dispatch-app,
|
|
.detail-app {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sidebar,
|
|
.inspector,
|
|
.issue-summary-pane,
|
|
.control-pane {
|
|
border-right: 0;
|
|
border-left: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.queue-grid,
|
|
.work-list,
|
|
.member-load {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.queue-main,
|
|
.work-column,
|
|
.member-list {
|
|
border-right: 0;
|
|
}
|
|
|
|
.table-head {
|
|
display: none;
|
|
}
|
|
|
|
.issue-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
min-height: auto;
|
|
padding: 14px 18px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.page {
|
|
width: min(100vw - 20px, 1480px);
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.principles,
|
|
.metrics,
|
|
.flow-strip,
|
|
.load-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.client-app,
|
|
.dept-app {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.topbar,
|
|
.timeline-head {
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
|
|
.actions {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.timeline-item {
|
|
grid-template-columns: 72px 1fr;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
left: 86px;
|
|
}
|
|
}
|
|
|
|
html.capture-mode .page {
|
|
padding: 18px 0;
|
|
}
|
|
|
|
html.capture-mode .board-head,
|
|
html.capture-mode .principles,
|
|
html.capture-mode .flow-strip,
|
|
html.capture-mode .shot:not(.capture-target) {
|
|
display: none;
|
|
}
|
|
|
|
html.capture-mode .shot.capture-target {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<header class="board-head">
|
|
<div>
|
|
<h1>Issue Hub AI 中心调度平台</h1>
|
|
<p>
|
|
从提交、AI 分析、中心派发、部门分派、个人处理到验收关闭的界面方案。主界面优先服务调度效率、状态透明和责任追踪。
|
|
</p>
|
|
</div>
|
|
<nav class="board-links" aria-label="设计产物链接">
|
|
<a href="./ai-dispatch-issue-platform-prd.md">PRD</a>
|
|
<a href="./ai-dispatch-flowcharts.md">流程图</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="principles" aria-label="设计原则">
|
|
<div class="principle">
|
|
<strong>工作台优先</strong>
|
|
<span>第一屏直接进入队列、风险、派单建议和处理动作。</span>
|
|
</div>
|
|
<div class="principle">
|
|
<strong>AI 可解释</strong>
|
|
<span>每个建议都显示理由、置信度和可修改入口。</span>
|
|
</div>
|
|
<div class="principle">
|
|
<strong>过程可追踪</strong>
|
|
<span>状态变化、评论、转派和提醒全部写入时间线。</span>
|
|
</div>
|
|
<div class="principle">
|
|
<strong>角色分层</strong>
|
|
<span>中心看全局，部门看负载，个人看待办。</span>
|
|
</div>
|
|
<div class="principle">
|
|
<strong>低干扰提醒</strong>
|
|
<span>风险醒目呈现，但不让常规问题淹没操作区。</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flow-strip" aria-label="MVP 主流程">
|
|
<div class="flow-step">
|
|
<b>1. 提交</b>
|
|
<span>标题、描述、附件、影响范围进入中心。</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<b>2. AI 分析</b>
|
|
<span>摘要、分类、严重程度、责任部门建议。</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<b>3. 中心派发</b>
|
|
<span>采纳 AI 或人工调整后派到个人或部门。</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<b>4. 部门分派</b>
|
|
<span>负责人按技能、负载和 SLA 指派处理人。</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<b>5. 处理协作</b>
|
|
<span>接单、评论、转派、请求协作、完成。</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<b>6. 验收复盘</b>
|
|
<span>提交人确认，AI 生成总结和知识沉淀建议。</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="shot" id="dispatch-console">
|
|
<div class="shot-title">
|
|
<h2>01 中心调度台</h2>
|
|
<span>调度员确认 AI 建议、处理待派发和高风险问题</span>
|
|
</div>
|
|
<div class="app-shell dispatch-app">
|
|
<aside class="sidebar">
|
|
<div class="brand"><span class="mark">IH</span> Issue Hub AI</div>
|
|
<div class="nav">
|
|
<div class="nav-item active"><span>中心调度</span><span class="count">18</span></div>
|
|
<div class="nav-item"><span>问题池</span><span class="count">76</span></div>
|
|
<div class="nav-item"><span>部门队列</span><span class="count">24</span></div>
|
|
<div class="nav-item"><span>提醒升级</span><span class="count">9</span></div>
|
|
<div class="nav-item"><span>知识复盘</span><span class="count">12</span></div>
|
|
<div class="nav-item"><span>规则配置</span><span class="count">6</span></div>
|
|
</div>
|
|
<div class="sync-box">
|
|
<strong>AI 调度模式</strong>
|
|
<p>建议确认模式，低风险问题可批量采纳。</p>
|
|
<div class="meter"><i></i></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="workspace">
|
|
<header class="topbar">
|
|
<div>
|
|
<h3>中心调度台</h3>
|
|
<p>今日新增 42 个问题，9 个即将超时，AI 推荐采纳率 78%。</p>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="ghost">筛选</button>
|
|
<button>批量派发</button>
|
|
<button class="primary">新建问题</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="metrics">
|
|
<div class="metric"><b>18</b><span>待派发</span><div class="trend">较昨日 -6</div></div>
|
|
<div class="metric"><b>9</b><span>SLA 风险</span><div class="trend" style="color: var(--amber)">4 个高优先级</div></div>
|
|
<div class="metric"><b>76</b><span>处理中</span><div class="trend">平均响应 23 分钟</div></div>
|
|
<div class="metric"><b>12</b><span>跨部门协作</span><div class="trend" style="color: var(--blue)">需中心关注</div></div>
|
|
<div class="metric"><b>78%</b><span>AI 建议采纳率</span><div class="trend">近 7 日稳定</div></div>
|
|
</div>
|
|
|
|
<div class="queue-grid">
|
|
<div class="queue-main">
|
|
<div class="filter-row">
|
|
<span class="chip active">全部待派发</span>
|
|
<span class="chip">高风险</span>
|
|
<span class="chip">信息不足</span>
|
|
<span class="chip">跨部门</span>
|
|
<span class="chip">AI 高置信</span>
|
|
</div>
|
|
<div class="issue-table">
|
|
<div class="table-head">
|
|
<span>问题</span><span>AI 建议</span><span>SLA</span><span>置信度</span><span>动作</span>
|
|
</div>
|
|
<div class="issue-row selected">
|
|
<div class="issue-title">
|
|
<strong>客户批量导入后订单状态未同步</strong>
|
|
<small>#IH-2026-0148 · 客服提交 · 12 分钟前</small>
|
|
</div>
|
|
<span class="tag teal">研发 / 订单组</span>
|
|
<span class="tag red">2 小时</span>
|
|
<div class="confidence"><span>92%</span><div class="mini-meter"><i style="width: 92%"></i></div></div>
|
|
<button class="primary">派发</button>
|
|
</div>
|
|
<div class="issue-row">
|
|
<div class="issue-title">
|
|
<strong>门店日报导出缺少库存损耗字段</strong>
|
|
<small>#IH-2026-0147 · 实施提交 · 31 分钟前</small>
|
|
</div>
|
|
<span class="tag blue">产品 / 报表</span>
|
|
<span class="tag amber">4 小时</span>
|
|
<div class="confidence"><span>81%</span><div class="mini-meter"><i style="width: 81%"></i></div></div>
|
|
<button>确认</button>
|
|
</div>
|
|
<div class="issue-row">
|
|
<div class="issue-title">
|
|
<strong>审批消息重复推送到同一用户</strong>
|
|
<small>#IH-2026-0146 · 运维提交 · 44 分钟前</small>
|
|
</div>
|
|
<span class="tag teal">平台 / 消息</span>
|
|
<span class="tag red">1 小时</span>
|
|
<div class="confidence"><span>88%</span><div class="mini-meter"><i style="width: 88%"></i></div></div>
|
|
<button>确认</button>
|
|
</div>
|
|
<div class="issue-row">
|
|
<div class="issue-title">
|
|
<strong>财务月结凭证生成失败，缺少异常明细</strong>
|
|
<small>#IH-2026-0145 · 财务提交 · 1 小时前</small>
|
|
</div>
|
|
<span class="tag amber">需人工分诊</span>
|
|
<span class="tag amber">8 小时</span>
|
|
<div class="confidence"><span>56%</span><div class="mini-meter"><i style="width: 56%; background: var(--amber)"></i></div></div>
|
|
<button>分诊</button>
|
|
</div>
|
|
<div class="issue-row">
|
|
<div class="issue-title">
|
|
<strong>新员工账号已建但无法访问移动端</strong>
|
|
<small>#IH-2026-0144 · 人事提交 · 2 小时前</small>
|
|
</div>
|
|
<span class="tag blue">运维 / 账号</span>
|
|
<span class="tag amber">6 小时</span>
|
|
<div class="confidence"><span>74%</span><div class="mini-meter"><i style="width: 74%"></i></div></div>
|
|
<button>确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="side-list">
|
|
<h4>提醒升级</h4>
|
|
<div class="event"><span class="dot" style="background: var(--red)"></span><div><strong>审批消息重复推送</strong><span>还有 18 分钟超时，已提醒平台负责人。</span></div></div>
|
|
<div class="event"><span class="dot" style="background: var(--amber)"></span><div><strong>财务月结凭证失败</strong><span>AI 置信度低，建议人工分诊。</span></div></div>
|
|
<div class="event"><span class="dot" style="background: var(--blue)"></span><div><strong>报表字段缺失</strong><span>相似问题 3 个，可合并查看历史方案。</span></div></div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="inspector">
|
|
<div>
|
|
<span class="section-label">AI 推荐</span>
|
|
<div class="ai-panel">
|
|
<div class="ai-head">
|
|
<b>派发到研发部 / 订单组 / 陈远</b>
|
|
<span>置信度 92%，预计首次响应 20 分钟。</span>
|
|
</div>
|
|
<div class="route">
|
|
<div class="route-step"><i>1</i><div><strong>分类判断</strong><span>订单状态同步异常，匹配订单服务与批量导入模块。</span></div></div>
|
|
<div class="route-step"><i>2</i><div><strong>历史匹配</strong><span>近 30 日有 2 个相似问题，均由订单组解决。</span></div></div>
|
|
<div class="route-step"><i>3</i><div><strong>负载判断</strong><span>陈远当前 3 个处理中，低于组内平均负载。</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="factor-list">
|
|
<div class="factor"><span>部门职责匹配</span><strong>96%</strong></div>
|
|
<div class="factor"><span>相似问题命中</span><strong>89%</strong></div>
|
|
<div class="factor"><span>人员负载适配</span><strong>84%</strong></div>
|
|
<div class="factor"><span>SLA 风险</span><strong style="color: var(--red)">高</strong></div>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
<div class="inspector-actions">
|
|
<button>退回补充</button>
|
|
<button class="primary">采纳派发</button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="shot" id="handler-client">
|
|
<div class="shot-title">
|
|
<h2>02 处理人客户端 + 移动提交</h2>
|
|
<span>个人客户端专注待办，移动端用于快速提交和补充</span>
|
|
</div>
|
|
<div class="split-board">
|
|
<div class="app-shell client-app">
|
|
<aside class="sidebar">
|
|
<div class="brand"><span class="mark">IH</span> 我的工作台</div>
|
|
<div class="nav">
|
|
<div class="nav-item active"><span>我的待办</span><span class="count">7</span></div>
|
|
<div class="nav-item"><span>我提交的</span><span class="count">14</span></div>
|
|
<div class="nav-item"><span>待我补充</span><span class="count">2</span></div>
|
|
<div class="nav-item"><span>已完成</span><span class="count">31</span></div>
|
|
</div>
|
|
<div class="sync-box">
|
|
<strong>今日节奏</strong>
|
|
<p>3 个问题临近 SLA，1 个协作请求未响应。</p>
|
|
<div class="meter"><i style="width: 58%"></i></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="client-main">
|
|
<header class="topbar">
|
|
<div>
|
|
<h3>我的待办</h3>
|
|
<p>按 SLA、优先级和依赖状态排序，默认显示需要动作的问题。</p>
|
|
</div>
|
|
<div class="actions">
|
|
<button>同步</button>
|
|
<button class="primary">提交问题</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="work-list">
|
|
<div class="work-column">
|
|
<div class="filter-row">
|
|
<span class="chip active">待动作</span>
|
|
<span class="chip">处理中</span>
|
|
<span class="chip">等待协作</span>
|
|
</div>
|
|
<div class="compact-item active">
|
|
<span class="tag red">高优先级</span>
|
|
<strong>客户批量导入后订单状态未同步</strong>
|
|
<p>#IH-2026-0148 · 首次响应剩余 18 分钟</p>
|
|
</div>
|
|
<div class="compact-item">
|
|
<span class="tag amber">等待协作</span>
|
|
<strong>审批消息重复推送到同一用户</strong>
|
|
<p>平台组请求协助排查消息幂等。</p>
|
|
</div>
|
|
<div class="compact-item">
|
|
<span class="tag blue">待补充</span>
|
|
<strong>报表导出缺少库存损耗字段</strong>
|
|
<p>产品需要确认字段口径。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-preview">
|
|
<div>
|
|
<h3>客户批量导入后订单状态未同步</h3>
|
|
<div class="meta">
|
|
<span class="tag red">SLA 2 小时</span>
|
|
<span class="tag teal">订单组</span>
|
|
<span class="tag blue">AI 命中相似问题 2 个</span>
|
|
</div>
|
|
<div class="summary-block">
|
|
<p>AI 摘要：客户通过批量导入创建订单后，前端列表显示已导入，但订单状态没有进入待审核。影响 3 家门店，可能与导入任务回调或状态同步队列有关。</p>
|
|
</div>
|
|
<div class="task-steps">
|
|
<div class="task-step done"><i>1</i><div><strong>中心派发</strong><span>研发部 / 订单组 / 陈远</span></div><span class="tag green">完成</span></div>
|
|
<div class="task-step"><i>2</i><div><strong>接单并确认影响范围</strong><span>需在 18 分钟内首次响应</span></div><span class="tag red">待动作</span></div>
|
|
<div class="task-step"><i>3</i><div><strong>排查导入回调与状态队列</strong><span>AI 推荐优先检查任务 ID 关联</span></div><span class="tag blue">建议</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="actions" style="justify-content: flex-start; align-self: end">
|
|
<button>转派</button>
|
|
<button>请求协作</button>
|
|
<button class="primary">接单处理</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<aside class="phone" aria-label="移动提交界面">
|
|
<div class="phone-screen">
|
|
<div class="mobile-head">
|
|
<strong>提交问题</strong>
|
|
<span>AI 会在提交后生成摘要和缺失信息。</span>
|
|
</div>
|
|
<div class="mobile-form">
|
|
<div class="field">
|
|
<label>标题</label>
|
|
<div class="input">门店日报导出缺少库存损耗字段</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>描述</label>
|
|
<div class="input large">今天导出的门店日报缺少库存损耗字段，财务无法核对日结数据。截图已上传。</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>影响范围</label>
|
|
<div class="input">华东 12 家门店 · 当日结算</div>
|
|
</div>
|
|
<div class="upload-zone">截图 2 张，日志 1 份</div>
|
|
<div class="ai-hint">
|
|
<strong>AI 预检查</strong>
|
|
<span>可能属于报表字段配置问题，建议补充报表模板版本。</span>
|
|
</div>
|
|
<button class="primary" style="width: 100%; min-height: 44px">提交到中心</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="shot" id="issue-detail">
|
|
<div class="shot-title">
|
|
<h2>03 问题详情页</h2>
|
|
<span>把问题上下文、处理时间线和下一步动作放在同一屏</span>
|
|
</div>
|
|
<div class="app-shell detail-app">
|
|
<aside class="issue-summary-pane">
|
|
<span class="tag red">高优先级 · SLA 2 小时</span>
|
|
<h3>客户批量导入后订单状态未同步</h3>
|
|
<p>影响 3 家门店的导入订单，列表显示已导入但状态未进入待审核。</p>
|
|
<div class="kv">
|
|
<div><span>编号</span><strong>#IH-2026-0148</strong></div>
|
|
<div><span>提交人</span><strong>客服 · 林悦</strong></div>
|
|
<div><span>当前负责人</span><strong>研发 · 陈远</strong></div>
|
|
<div><span>当前状态</span><strong>待接单</strong></div>
|
|
<div><span>首次响应</span><strong style="color: var(--red)">剩余 18 分钟</strong></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="timeline-pane">
|
|
<header class="timeline-head">
|
|
<h3>处理时间线</h3>
|
|
<div class="actions">
|
|
<button>添加评论</button>
|
|
<button class="primary">接单处理</button>
|
|
</div>
|
|
</header>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="time">09:42</div>
|
|
<div class="timeline-body">
|
|
<strong>提交人创建问题</strong>
|
|
<p>上传订单导入截图 2 张，补充影响门店 3 家。</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="time">09:43</div>
|
|
<div class="timeline-body">
|
|
<strong>AI 完成分析</strong>
|
|
<p>识别为订单状态同步异常，推荐研发部订单组，置信度 92%。</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="time">09:46</div>
|
|
<div class="timeline-body">
|
|
<strong>中心端采纳派发</strong>
|
|
<p>派发到研发部订单组陈远，SLA 设置为 2 小时。</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="time">10:02</div>
|
|
<div class="timeline-body">
|
|
<strong>系统提醒首次响应</strong>
|
|
<p>距离首次响应阈值还有 18 分钟，已推送到处理人客户端。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="control-pane">
|
|
<div class="control-group">
|
|
<h4>AI 处理建议</h4>
|
|
<div class="summary-block">
|
|
<p>优先检查批量导入任务回调状态、订单状态写入事务和同步队列消费延迟。</p>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<h4>下一步动作</h4>
|
|
<div class="control-list">
|
|
<button class="primary">接单处理</button>
|
|
<button>请求平台组协作</button>
|
|
<button>转派给订单负责人</button>
|
|
<button>退回提交人补充</button>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<h4>相似问题</h4>
|
|
<div class="event"><span class="dot"></span><div><strong>#IH-2026-0091</strong><span>导入后订单状态延迟 6 分钟同步。</span></div></div>
|
|
<div class="event"><span class="dot" style="background: var(--blue)"></span><div><strong>#IH-2026-0118</strong><span>批量任务回调失败导致状态未更新。</span></div></div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="shot" id="department-pool">
|
|
<div class="shot-title">
|
|
<h2>04 部门问题池</h2>
|
|
<span>部门负责人按人员负载、技能和 SLA 分派问题</span>
|
|
</div>
|
|
<div class="app-shell dept-app">
|
|
<aside class="sidebar">
|
|
<div class="brand"><span class="mark">RD</span> 研发部</div>
|
|
<div class="nav">
|
|
<div class="nav-item active"><span>部门问题池</span><span class="count">24</span></div>
|
|
<div class="nav-item"><span>未分派</span><span class="count">6</span></div>
|
|
<div class="nav-item"><span>处理中</span><span class="count">18</span></div>
|
|
<div class="nav-item"><span>超时风险</span><span class="count">3</span></div>
|
|
<div class="nav-item"><span>成员负载</span><span class="count">8</span></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="dept-main">
|
|
<header class="topbar">
|
|
<div>
|
|
<h3>研发部问题池</h3>
|
|
<p>按组别、人员负载、技能标签和 SLA 风险分派。</p>
|
|
</div>
|
|
<div class="actions">
|
|
<button>只看未分派</button>
|
|
<button class="primary">批量分派</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="load-grid">
|
|
<div class="load-cell"><b>24</b><span>部门问题</span></div>
|
|
<div class="load-cell"><b>6</b><span>未分派</span></div>
|
|
<div class="load-cell"><b>3</b><span>超时风险</span></div>
|
|
<div class="load-cell"><b>71%</b><span>AI 分派建议命中</span></div>
|
|
</div>
|
|
|
|
<div class="member-load">
|
|
<div class="member-list">
|
|
<div class="member-row">
|
|
<span class="avatar">陈</span>
|
|
<div><strong>陈远 · 订单组</strong><span>3 个处理中，适合订单同步类</span></div>
|
|
<span class="tag green">低负载</span>
|
|
</div>
|
|
<div class="member-row">
|
|
<span class="avatar">周</span>
|
|
<div><strong>周清 · 平台组</strong><span>6 个处理中，含 2 个高优先级</span></div>
|
|
<span class="tag amber">中负载</span>
|
|
</div>
|
|
<div class="member-row">
|
|
<span class="avatar">许</span>
|
|
<div><strong>许然 · 报表组</strong><span>8 个处理中，今日已超 1 个</span></div>
|
|
<span class="tag red">高负载</span>
|
|
</div>
|
|
<div class="member-row">
|
|
<span class="avatar">李</span>
|
|
<div><strong>李舟 · 运维组</strong><span>4 个处理中，账号类响应快</span></div>
|
|
<span class="tag green">可接单</span>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="heatmap">
|
|
<h4 style="margin: 0 0 14px">本周负载热度</h4>
|
|
<div class="heatmap-grid" aria-label="负载热度">
|
|
<span class="heat low"></span><span class="heat low"></span><span class="heat mid"></span><span class="heat mid"></span><span class="heat high"></span><span class="heat mid"></span><span class="heat low"></span>
|
|
<span class="heat low"></span><span class="heat mid"></span><span class="heat high"></span><span class="heat high"></span><span class="heat mid"></span><span class="heat low"></span><span class="heat low"></span>
|
|
<span class="heat mid"></span><span class="heat mid"></span><span class="heat low"></span><span class="heat mid"></span><span class="heat high"></span><span class="heat high"></span><span class="heat mid"></span>
|
|
<span class="heat low"></span><span class="heat low"></span><span class="heat mid"></span><span class="heat low"></span><span class="heat mid"></span><span class="heat high"></span><span class="heat mid"></span>
|
|
</div>
|
|
<div class="factor-list">
|
|
<div class="factor"><span>订单组可接单</span><strong>2 人</strong></div>
|
|
<div class="factor"><span>平台组协作请求</span><strong>4 个</strong></div>
|
|
<div class="factor"><span>建议升级</span><strong style="color: var(--red)">1 个</strong></div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<script>
|
|
(() => {
|
|
const shotId = new URLSearchParams(window.location.search).get("shot");
|
|
if (!shotId) return;
|
|
document.documentElement.classList.add("capture-mode");
|
|
const markTarget = () => {
|
|
const target = document.getElementById(shotId);
|
|
if (target) target.classList.add("capture-target");
|
|
};
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", markTarget);
|
|
} else {
|
|
markTarget();
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|