feat(console): refine filters and default resource pages to ten rows

This commit is contained in:
2026-09-29 23:00:53 +08:00
parent 96d5a3032a
commit df76dcb9c0
11 changed files with 251 additions and 14 deletions

View File

@@ -76,6 +76,66 @@ summary:hover { color:var(--accent); }
@media(max-width:1200px){.app-shell{grid-template-columns:185px minmax(0,1fr)}.main-content{padding:0 22px 20px}.sidebar{padding:23px 11px}.topbar-actions{gap:9px}.last-updated{display:none}.scope-heading{display:none}.overview-grid{grid-template-columns:minmax(0,1.35fr) minmax(250px,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}.access-grid{grid-template-columns:220px minmax(0,1fr)}.archive-grid{grid-template-columns:290px minmax(0,1fr)}.id-lookup input{width:165px}.page-heading{align-items:start}.page-heading h1{font-size:24px}}
@media(max-width:920px){.app-shell{grid-template-columns:160px minmax(0,1fr)}.brand{padding:0 5px}.brand strong{font-size:20px}.brand small{font-size:10px}.nav-item{font-size:12px;padding:10px}.nav-icon{font-size:17px}.main-content{padding:0 18px 20px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-grid,.archive-grid{grid-template-columns:1fr}.access-grid{grid-template-columns:1fr}.access-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading{flex-direction:column;align-items:stretch;gap:14px}.page-heading>.secondary-button{align-self:start}.id-lookup input{width:240px}.snapshot-note{flex-wrap:wrap}.snapshot-note>span:last-child{margin-left:0}.scope-note{flex-basis:100%;justify-content:flex-end}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.login-brand{padding:40px}.login-intro h1{font-size:42px}.login-brand .brand small{display:none}}
@media(max-width:640px){.app-shell{display:block}.sidebar{position:relative;height:auto;display:block;padding:15px 16px 0;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0}.brand small{display:inline-block;margin-left:10px;letter-spacing:1px}.brand-mark{width:30px;height:30px}.workspace-label,.nav-group-label,.sidebar-bottom{display:none}.nav-list{flex-direction:row;overflow-x:auto;gap:3px;margin-top:14px;padding-bottom:10px}.nav-item{flex-shrink:0;padding:9px 11px;font-size:12px;gap:6px}.nav-icon{font-size:14px;width:16px}.main-content{padding:0 14px 16px}.topbar{height:58px;margin-bottom:16px;gap:10px}.crumbs{font-size:11px;gap:8px}.live-chip{display:none}.topbar-actions{gap:8px}.auto-refresh{font-size:10px}.application-scope{padding:12px;gap:10px;margin-bottom:20px}.scope-field{display:block;min-width:120px}.scope-field select{margin-top:5px}.scope-note{display:none}.page-heading h1,.archive-heading h1,.access-heading h1{font-size:23px}.page-heading p,.archive-heading p,.access-heading p{font-size:11px}.page-heading,.access-heading,.archive-heading{margin-bottom:18px}.access-heading,.archive-heading{align-items:start}.metric-grid{gap:10px}.metric-card{padding:16px}.metric-card strong{font-size:27px;margin:10px 0 5px}.metric-card small{font-size:9px}.metric-top{font-size:11px}.snapshot-note{font-size:9px;line-height:1.8}.panel{padding:17px}.data-panel{padding:0}.panel-heading{margin-bottom:16px}h2{font-size:15px}.stat-grid{gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.list-filters{padding:15px;gap:10px}.filter-key{max-width:none;min-width:170px!important}.filter-more{flex-basis:100%}.list-summary{padding:12px 15px}.list-summary .muted{display:none}.list-pagination{padding:12px 15px;flex-wrap:wrap;justify-content:center}.list-pagination>label{font-size:10px}.list-pagination>div{gap:8px}.list-pagination button{font-size:10px;padding:6px 9px}.list-pagination .text-button{padding:3px 0}.list-pagination>div>span{font-size:10px}.id-lookup input{width:100%}.table-wrap table{min-width:660px}.recent-panel table{min-width:540px}td{padding:13px 11px}.access-list{grid-template-columns:1fr}.access-config-grid{grid-template-columns:1fr}.access-meta>div{flex-direction:column;gap:5px}.access-credential{padding:14px}.access-credential-header{flex-wrap:wrap;gap:6px}.access-dialog{padding:20px;max-height:calc(100dvh - 24px);width:calc(100vw - 24px)}.access-form-actions{gap:10px}.access-form-actions button{font-size:11px}.retention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.retention-meta{flex-direction:column;gap:7px}.archive-stats{gap:9px}.archive-stats article{padding:13px}.archive-stats strong{font-size:24px}.archive-stats small{font-size:9px}.task-drawer{padding:22px 17px}.drawer-header h2{font-size:19px}.detail-grid{padding:15px;gap:14px}.page-footer{flex-direction:column;gap:7px;font-size:9px}.service-detail-grid{grid-template-columns:1fr}.login-page{display:flex;flex-direction:column;min-height:100dvh}.login-brand{padding:24px;background:#edf5f2}.login-brand .brand small{display:inline-block}.login-intro{margin:28px 0 12px}.login-intro .page-eyebrow,.login-flow,.login-brand>small{display:none}.login-intro h1{font-size:28px;letter-spacing:-.5px;margin:0 0 9px}.login-intro h1 br{display:none}.login-intro p{font-size:11px}.login-intro p br{display:none}.login-panel{padding:35px 26px 70px;flex:1}.login-card{width:100%;max-width:380px}.login-card h2{font-size:22px}.login-copy{margin-bottom:24px}.login-footer{bottom:22px}}
/* 筛选工作区:限制大屏拉伸,范围与查询使用一致的控件。 */
.main-content { max-width:1580px; margin:0 auto; }
.application-scope { gap:16px 22px; padding:16px 20px; margin-bottom:28px; }
.scope-heading { padding-right:6px; }
.scope-field { display:block; flex:0 1 300px; min-width:180px; }
.scope-field>span { display:block; margin-bottom:7px; font-size:11px; }
.scope-queue { flex-basis:300px; }
.scope-note { margin-left:auto; }
.scope-field select { height:40px; }
.select-trigger { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-width:0; height:40px; padding:0 12px; border:1px solid #d6dee7; border-radius:7px; background:#fff; color:var(--text); text-align:left; font-size:12px; font-weight:400; }
.select-trigger:hover:not(:disabled) { border-color:#9abbb4; background:#fcfefd; }
.select-trigger[aria-expanded=true] { border-color:var(--accent); box-shadow:0 0 0 3px #087f7512; }
.select-caption { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-chevron { border-right:1.5px solid #7d8f9d; border-bottom:1.5px solid #7d8f9d; width:6px; height:6px; transform:rotate(45deg); margin:0 2px 3px; flex-shrink:0; }
.select-trigger[aria-expanded=true] .select-chevron { transform:rotate(225deg); margin-top:6px; }
.select-popover { position:fixed; z-index:45; padding:5px; background:#fff; border:1px solid #dde7e4; border-radius:10px; box-shadow:0 10px 32px #183b2f1c,0 2px 6px #183b2f09; }
.select-search { padding:6px 6px 10px; }
.select-search input { margin:0; height:36px; background:var(--soft); font-size:12px; padding:8px 10px; }
.select-options { overflow-y:auto; overscroll-behavior:contain; }
.select-option { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:6px; cursor:pointer; color:var(--text); font-size:12px; }
.select-option[aria-selected=true] { color:var(--accent); background:#edf7f3; }
.select-option.is-active { background:#f0f5f3; }
.select-option.is-active[aria-selected=true] { background:#e5f2ed; }
.select-option[aria-disabled=true] { opacity:.45; cursor:not-allowed; }
.select-option-copy { min-width:0; }
.select-option b { display:block; font-weight:500; overflow-wrap:anywhere; }
.select-option small { display:block; font-size:10px; margin-top:3px; color:#83948e; }
.select-check { color:var(--accent); font-size:13px; flex-shrink:0; }
.select-empty { padding:22px 12px; font-size:12px; text-align:center; color:var(--muted); }
.select-options:focus { outline:none; }
input:focus-visible,textarea:focus-visible { outline:none; }
.task-processor>span { display:block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-filters { display:grid; grid-template-columns:155px minmax(200px,1fr) auto auto; gap:16px; padding:22px; align-items:end; }
.list-filters>label { font-size:12px; min-width:0; }
.list-filters>label>.select-trigger { margin-top:7px; }
.list-filters input,.list-filters select { height:40px; }
.filter-key { max-width:none; }
.filter-actions { display:flex; gap:9px; grid-column:4; grid-row:1; }
.filter-actions button { height:40px; padding:0 17px; }
.filter-more { display:flex; gap:12px; align-items:center; align-self:end; justify-content:center; height:40px; border:1px solid #d6dee7; background:#fff; color:var(--muted); border-radius:7px; padding:0 13px; grid-column:3; grid-row:1; font-size:12px; font-weight:400; list-style:none; }
.filter-more::-webkit-details-marker { display:none; }
.filter-more:hover { background:var(--soft); border-color:#9abbb4; }
.filter-more[aria-expanded=true] { background:var(--accent-soft); border-color:#b8d9ce; color:var(--accent); }
.filter-more[aria-expanded=true] span { transform:rotate(180deg); }
.filter-dates { grid-column:1/-1; border-top:1px solid var(--line); padding-top:17px; margin:0; gap:16px; }
.filter-dates label { flex:0 1 230px; }
.filter-dates small { font-size:11px; }
.list-pagination { padding:15px 22px; background:#fcfdfd; }
.list-pagination>label { white-space:nowrap; }
.list-pagination .select-trigger { width:72px; height:34px; font-size:12px; }
.list-pagination>div>span { padding:5px 8px; font-size:12px; color:var(--text); }
/* 品牌内容在左半屏内居中,与右侧表单形成平衡的两列。 */
.login-brand { padding:54px clamp(32px,5vw,80px); }
.login-brand>* { width:min(100%,400px); margin-left:auto; margin-right:auto; }
.login-intro { margin-top:70px; margin-bottom:70px; }
.login-intro h1 { font-size:clamp(40px,3.4vw,54px); }
.login-card { width:360px; }
@media(max-width:1200px){.scope-field{flex:1;min-width:160px}.scope-note{margin-left:0}}
@media(max-width:920px){.application-scope{gap:12px}.scope-note{flex-basis:100%;margin-top:-4px}.list-filters{grid-template-columns:145px minmax(160px,1fr)}.filter-more{grid-column:1;grid-row:2}.filter-actions{grid-column:2;grid-row:2}.login-brand{padding:40px}.login-intro h1{font-size:40px}}
@media(max-width:640px){.application-scope{padding:14px;gap:12px}.scope-field{flex:1 1 100%;min-width:0}.scope-note{display:none}.scope-field>span{margin-bottom:5px}.list-filters{padding:16px;grid-template-columns:1fr 1fr;gap:14px}.list-filters>label{grid-column:1/-1;min-width:0!important}.filter-more{grid-column:1;grid-row:3}.filter-actions{grid-column:2;grid-row:3;gap:7px}.filter-actions button{flex:1;padding:0 11px}.filter-dates{grid-row:4;gap:14px}.filter-dates label{flex:1 1 100%;min-width:0}.filter-dates small{padding:0}.list-pagination{padding:14px 10px;gap:12px}.list-pagination>div{gap:6px}.list-pagination .select-trigger{width:65px;height:32px}.login-brand{padding:28px}.login-brand>*{width:100%;max-width:380px}.login-intro{margin:30px auto 8px}.login-intro h1{font-size:28px}.login-card{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:640px){.data-panel .table-wrap::before{content:"左右滑动查看完整表格 →";display:block;padding:0 15px 10px;color:var(--muted);font-size:10px}.retention-panel{max-width:none}}