250 lines
9.4 KiB
CSS
250 lines
9.4 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--ink: #142126;
|
|
--muted: #687a80;
|
|
--line: #dbe6e5;
|
|
--soft: #f3f8f7;
|
|
--green: #00a98f;
|
|
--green-dark: #087565;
|
|
--blue: #1675d1;
|
|
--danger: #b63f4b;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
/* 扩展窗口按内容自动定尺寸：根节点必须有独立宽度，不能用 vw 反向依赖窗口。
|
|
只由根节点滚动，始终预留滚动条位置，历史展开和悬停时不挤压内容。 */
|
|
html {
|
|
width: 460px;
|
|
min-width: 460px;
|
|
max-width: 460px;
|
|
max-height: 600px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin: 0;
|
|
background: #f6faf9;
|
|
color: var(--ink);
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
button { font: inherit; }
|
|
.brand-row > .text-action { flex: 0 0 auto; white-space: nowrap; }
|
|
|
|
.app-header {
|
|
padding: 18px 18px 15px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: #fff;
|
|
}
|
|
|
|
.brand-row,
|
|
.account-row,
|
|
.status-head,
|
|
.detail-title,
|
|
.metric-row,
|
|
.section-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
|
.brand img { width: 34px; height: 34px; border-radius: 8px; }
|
|
.brand h1 { margin: 0; font-size: 17px; line-height: 1.2; letter-spacing: 0; }
|
|
.brand span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
|
|
.app-header p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
|
|
|
|
main { padding: 14px 16px 18px; }
|
|
|
|
.text-action,
|
|
.compact-button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--green-dark);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.compact-button {
|
|
min-width: 52px;
|
|
height: 30px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
}
|
|
.compact-button.primary { border-color: var(--green); background: var(--green); color: #fff; }
|
|
|
|
.account-row { margin-bottom: 12px; }
|
|
.account-copy { display: flex; align-items: center; gap: 9px; min-width: 0; }
|
|
.account-copy i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #a9b6b8; }
|
|
.account-copy i.online { background: var(--green); box-shadow: 0 0 0 4px rgb(0 169 143 / 12%); }
|
|
.account-copy strong { display: block; font-size: 12px; }
|
|
.account-copy span { display: block; max-width: 230px; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.status-card,
|
|
.detail-panel,
|
|
.mode-panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.status-card { padding: 15px; }
|
|
.phase { display: flex; align-items: center; gap: 8px; }
|
|
.phase strong { font-size: 14px; }
|
|
.phase-indicator { width: 9px; height: 9px; border-radius: 50%; background: #9aa9ac; }
|
|
.status-head > b { color: var(--green-dark); font-size: 13px; }
|
|
.status-message { min-height: 38px; margin-top: 10px; color: #53676d; font-size: 12px; line-height: 1.55; }
|
|
.progress-track { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 6px; background: #e9f0ef; }
|
|
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--blue)); transition: width .25s ease; }
|
|
.task-meta { margin-top: 10px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.wait-hint { margin-top: 10px; padding: 9px 10px; border-radius: 7px; background: #eef7ff; color: #43616e; font-size: 11px; line-height: 1.45; }
|
|
|
|
.status-card[data-state="collecting"] .phase-indicator,
|
|
.status-card[data-state="analyzing"] .phase-indicator {
|
|
background: var(--blue);
|
|
box-shadow: 0 0 0 4px rgb(22 117 209 / 12%);
|
|
animation: pulse 1.4s ease-in-out infinite;
|
|
}
|
|
.status-card[data-state="completed"] .phase-indicator { background: var(--green); box-shadow: 0 0 0 4px rgb(0 169 143 / 12%); }
|
|
.status-card[data-state="failed"] .phase-indicator { background: var(--danger); box-shadow: 0 0 0 4px rgb(182 63 75 / 12%); }
|
|
|
|
@keyframes pulse {
|
|
50% { opacity: .35; transform: scale(.8); }
|
|
}
|
|
|
|
.service-line { display: flex; justify-content: flex-end; min-height: 25px; padding: 7px 2px 4px; }
|
|
.service-line span { color: var(--muted); font-size: 10px; }
|
|
.service-line span.ok { color: var(--green-dark); }
|
|
.service-line span.warn { color: #a56a19; }
|
|
|
|
.action-section { display: grid; gap: 8px; }
|
|
.main-button,
|
|
.secondary-button {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
.main-button { background: linear-gradient(105deg, var(--green), var(--blue)); color: #fff; }
|
|
.main-button:hover { filter: brightness(.97); }
|
|
.main-button:disabled,
|
|
.secondary-button:disabled { cursor: not-allowed; opacity: .55; }
|
|
.main-button.danger { background: var(--danger); }
|
|
.report-button { margin-top: 12px; background: var(--ink); }
|
|
.secondary-button { margin-top: 12px; border: 1px solid #a8c8c4; background: #fff; color: #245d58; }
|
|
/* 网格列必须允许收缩，否则长商品标题的最小内容宽度会撑出扩展弹窗。 */
|
|
.history-panel { margin-top: 12px; min-width: 0; }
|
|
.history-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; min-width: 0; }
|
|
.history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); }
|
|
.history-item > div { min-width: 0; }
|
|
.history-item strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
|
|
.history-item span { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; line-height: 1.4; }
|
|
.history-item[data-status="3"] span { color: var(--green-dark); }
|
|
.history-item[data-status="4"] span { color: var(--danger); }
|
|
.history-item button { min-width: 42px; min-height: 32px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--green-dark); cursor: pointer; font-size: 11px; font-weight: 700; }
|
|
.history-item button:hover { border-color: var(--green); }
|
|
.history-item button:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
|
|
.history-list .detail-note { overflow-wrap: anywhere; line-height: 1.5; }
|
|
.detail-panel { margin-top: 12px; padding: 13px; }
|
|
.detail-title strong,
|
|
.section-heading strong { font-size: 13px; }
|
|
.detail-title span,
|
|
.section-heading span { color: var(--muted); font-size: 11px; }
|
|
.metric-row { margin-top: 10px; font-size: 11px; }
|
|
.metric-row span { color: var(--muted); }
|
|
.metric-row b { font-size: 13px; }
|
|
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
|
|
.metric-grid div { padding: 9px; border-radius: 7px; background: var(--soft); }
|
|
.metric-grid span { display: block; color: var(--muted); font-size: 10px; }
|
|
.metric-grid b { display: block; margin-top: 3px; font-size: 14px; }
|
|
.detail-note { margin-top: 9px; color: var(--muted); font-size: 10px; }
|
|
.param-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
|
|
.param-tag { padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); color: #4c6267; font-size: 10px; }
|
|
.live-preview { max-height: 68px; margin-top: 9px; overflow: auto; border-top: 1px solid var(--line); padding-top: 8px; color: #53686d; font-size: 10px; line-height: 1.55; }
|
|
|
|
.mode-panel { margin-top: 12px; padding: 14px; }
|
|
.section-heading span { display: block; margin-top: 2px; }
|
|
.mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
|
|
.mode { min-height: 58px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
|
|
.mode strong { display: block; font-size: 12px; }
|
|
.mode small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
|
|
.mode.active { border-color: var(--ink); background: var(--ink); color: #fff; }
|
|
.mode.active small { color: #c6d1d3; }
|
|
.option-note { margin-top: 8px; color: var(--muted); font-size: 10px; text-align: center; }
|
|
|
|
/* 采集流程四步可视化指示条 */
|
|
.steps-tracker {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 14px;
|
|
padding: 10px 12px;
|
|
background: var(--soft);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
.tracker-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
.tracker-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #b5c3c6;
|
|
transition: all 0.25s ease;
|
|
}
|
|
.tracker-label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
.tracker-label small {
|
|
display: inline-block;
|
|
font-size: 9px;
|
|
background: rgba(0, 169, 143, 0.15);
|
|
color: var(--green-dark);
|
|
padding: 1px 4px;
|
|
border-radius: 4px;
|
|
font-weight: 700;
|
|
margin-left: 2px;
|
|
}
|
|
.tracker-line {
|
|
flex: 1;
|
|
height: 2px;
|
|
background: var(--line);
|
|
margin: 0 4px 14px 4px;
|
|
}
|
|
.tracker-item.active .tracker-dot {
|
|
background: var(--blue);
|
|
box-shadow: 0 0 0 4px rgb(22 117 209 / 18%);
|
|
transform: scale(1.15);
|
|
}
|
|
.tracker-item.active .tracker-label {
|
|
color: var(--blue);
|
|
font-weight: 700;
|
|
}
|
|
.tracker-item.done .tracker-dot {
|
|
background: var(--green);
|
|
box-shadow: 0 0 0 3px rgb(0 169 143 / 15%);
|
|
}
|
|
.tracker-item.done .tracker-label {
|
|
color: var(--green-dark);
|
|
font-weight: 600;
|
|
}
|