HEL-162: 按方案A重做首页一体卡片主从区域
合并公司往来合计/明细为一张共享头卡片；左侧改列表行选中态，右侧加汇总条与克制空态；取消固定大高度，模块内滚动。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
施工员
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
b42b6481f5
commit
5b3ebad757
+229
-14
@@ -216,23 +216,176 @@ p { margin: 0; }
|
||||
/* 管理端首页主从：左栏约 480px（定稿 HEL-153），右侧明细更宽 */
|
||||
.grid-480-1 { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: stretch; }
|
||||
|
||||
/* 方案 A：一体卡片 · 分栏主从（HEL-162） */
|
||||
.dash-master {
|
||||
margin-top: 14px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dash-master-head {
|
||||
padding: 12px 16px 10px;
|
||||
margin-bottom: 0;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.dash-master-head .card-title .sub {
|
||||
display: inline;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.dash-master-head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
.dash-master-head-actions .input {
|
||||
width: 132px;
|
||||
min-height: 28px;
|
||||
padding: 4px 8px;
|
||||
flex: none;
|
||||
}
|
||||
.dash-master-split {
|
||||
gap: 0;
|
||||
height: 492px;
|
||||
/* 少数据自适应；整卡（含共享头）目标约 340px；多数据模块内滚动 */
|
||||
max-height: 300px;
|
||||
}
|
||||
.dash-master-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dash-master-pane--list {
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.dash-master-head {
|
||||
padding: 10px 14px 8px;
|
||||
margin-bottom: 0;
|
||||
gap: 8px;
|
||||
.dash-company-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.dash-company-loading,
|
||||
.dash-company-empty {
|
||||
padding: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.dash-company-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 14px 8px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease;
|
||||
}
|
||||
.dash-company-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.dash-company-item:hover {
|
||||
background: var(--fg-soft);
|
||||
}
|
||||
.dash-company-item.is-selected {
|
||||
background: var(--accent-soft);
|
||||
box-shadow: inset 3px 0 0 var(--accent);
|
||||
padding-left: 13px;
|
||||
}
|
||||
.dash-company-item.is-selected:hover {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
.dash-company-main {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.dash-company-name {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 13.5px;
|
||||
font-weight: 550;
|
||||
color: var(--fg);
|
||||
line-height: 1.35;
|
||||
}
|
||||
.dash-company-meta {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.dash-company-net {
|
||||
flex: none;
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
min-width: 4.5em;
|
||||
}
|
||||
.dash-detail-toolbar {
|
||||
padding: 10px 14px 0;
|
||||
flex: none;
|
||||
}
|
||||
.dash-detail-heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
.dash-detail-name {
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
color: var(--fg);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.dash-detail-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
margin: 10px 14px 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
flex: none;
|
||||
}
|
||||
.dash-summary-item {
|
||||
padding: 8px 10px;
|
||||
border-right: 1px solid var(--border);
|
||||
min-width: 0;
|
||||
}
|
||||
.dash-summary-item:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.dash-summary-label {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.dash-summary-value {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.dash-detail-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.dash-master-scroll {
|
||||
border: 0;
|
||||
@@ -241,6 +394,32 @@ p { margin: 0; }
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.dash-detail-empty {
|
||||
flex: 1;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 20px 24px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.dash-detail-empty .e-title {
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.dash-detail-empty .e-desc {
|
||||
max-width: 360px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.dash-master-scroll[hidden],
|
||||
.dash-detail-empty[hidden],
|
||||
.dash-detail-summary[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.ds-table.ds-table--compact {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -248,18 +427,16 @@ p { margin: 0; }
|
||||
.ds-table.ds-table--compact td {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
.ds-table.ds-table--compact th {
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ds-table tbody tr.is-selected {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
.ds-table tbody tr.is-selected:hover {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
.dash-company-name {
|
||||
white-space: nowrap;
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.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; }
|
||||
@@ -271,15 +448,53 @@ p { margin: 0; }
|
||||
@media (max-width: 1100px) {
|
||||
.grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-3, .grid-2-1, .grid-1-2, .grid-3-2, .grid-480-1 { grid-template-columns: minmax(0, 1fr); }
|
||||
.dash-master-split { height: auto; max-height: none; }
|
||||
.dash-master-pane--list { border-right: 0; border-bottom: 1px solid var(--border); }
|
||||
.dash-master-pane { max-height: 420px; }
|
||||
.dash-master-split {
|
||||
max-height: none;
|
||||
}
|
||||
.dash-master-pane--list {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
max-height: 280px;
|
||||
}
|
||||
.dash-master-pane--detail {
|
||||
max-height: 420px;
|
||||
}
|
||||
.dash-detail-summary {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.dash-summary-item:nth-child(3) {
|
||||
border-right: 0;
|
||||
}
|
||||
.dash-summary-item:nth-child(n+4) {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
@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; }
|
||||
.dash-master-head-actions {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dash-master-head-actions .input {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
.dash-detail-summary {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.dash-summary-item:nth-child(2n) {
|
||||
border-right: 0;
|
||||
}
|
||||
.dash-summary-item:nth-child(3) {
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.dash-summary-item:nth-child(n+3) {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 数据表 ────────────────────────────────────────────────────── */
|
||||
|
||||
Reference in New Issue
Block a user