/* ============================================================ * 后台 MD3 全局微调:与前台(public/css/style.css)一致的氛围细节 * 前台 token 变量未注入后台页面,这里按明暗各写一份。 * ============================================================ */ /* 内容区入场动效(对应前台 contentFadeIn) */ main { animation: md3ContentFadeIn 0.28s ease; } @keyframes md3ContentFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* 明暗切换过渡 */ body { transition: background-color 0.3s ease, color 0.3s ease; } /* 设置区块锚点(搜索跳转定位):预留固定 AppBar 高度,避免被遮挡 */ [id^="sec-"] { scroll-margin-top: 88px; } /* 滚动条(对应前台细滚动条) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cac4d0; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #79747e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #49454f; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #938f99; } /* 工单工作区:占满 AdminLayout 内容区,桌面保持列表/详情主次比例。 */ .ticket-workspace { width: 100%; max-width: none; min-width: 0; min-height: calc(100vh - 112px); } .ticket-workspace .ticket-stats { width: 100%; } .ticket-work-area { display: grid; grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr); gap: 16px; width: 100%; min-width: 0; height: max(520px, calc(100vh - 280px)); align-items: stretch; } .ticket-list-pane, .ticket-detail-pane { min-width: 0; width: 100%; } .ticket-list-pane > .MuiPaper-root, .ticket-detail-pane > .MuiPaper-root { width: 100%; min-width: 0; box-sizing: border-box; } .ticket-list-pane > .MuiPaper-root { min-height: 0; } .ticket-detail-pane > .MuiPaper-root { min-height: 0; overflow: auto; } .ticket-list-card { display: flex; flex-direction: column; } .ticket-list-card > .MuiDivider-root, .ticket-list-card > .MuiStack-root:last-child { flex: 0 0 auto; } .ticket-list-scroll { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: auto; align-items: stretch; } .ticket-list-scroll > li { flex: 0 0 auto; width: 100%; box-sizing: border-box; } .ticket-list-scroll > li, .ticket-list-scroll > li > .MuiButton-root { min-width: 0; max-width: 100%; } .ticket-list-scroll > li > .MuiButton-root { display: flex; box-sizing: border-box; overflow: hidden; min-height: 48px; } .ticket-list-row { display: grid; grid-template-columns: max-content minmax(120px, 1.4fr) minmax(120px, 1fr) max-content max-content; align-items: center; gap: 8px; width: 100%; min-width: 0; overflow: hidden; } @media (min-width: 700px) { .ticket-list-row { min-width: 500px; } } .ticket-list-row > .MuiTypography-root, .ticket-list-row > .MuiChip-root { min-width: 0; } .ticket-list-row > .MuiTypography-root { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ticket-list-row > .MuiChip-root { flex: 0 0 auto; } .ticket-list-scroll > li > .MuiButton-root > .MuiBox-root { min-width: 0; } .ticket-list-scroll .MuiTypography-root { min-width: 0; overflow-wrap: anywhere; } .ticket-list-scroll .MuiChip-root { flex: 0 0 auto; max-width: 100%; } .ticket-list-number { min-width: 0; overflow-wrap: anywhere; } .ticket-detail-card { overflow: auto; } .ticket-filter-grid { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(130px, 1fr)) minmax(96px, 0.85fr); gap: 10px; align-items: center; min-width: 0; } .ticket-filter-grid > * { min-width: 0; } .ticket-filter-grid .MuiInputBase-root, .ticket-filter-grid .MuiButton-root { width: 100%; min-width: 0; } .ticket-select-value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ticket-save-feedback { overflow-wrap: anywhere; } .ticket-save-saving { color: var(--mui-palette-text-secondary, inherit); } .ticket-save-success { color: #2e7d32; } .ticket-save-error { color: #d32f2f; } [data-theme="dark"] .ticket-save-success { color: #81c784; } [data-theme="dark"] .ticket-save-error { color: #ef9a9a; } @media (max-width: 1199px) and (min-width: 700px) { .ticket-filter-grid { grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(118px, 1fr)); } .ticket-filter-grid .ticket-filter-search { grid-column: 1 / -1; } .ticket-filter-grid > .MuiButton-root { grid-column: 1 / -1; } } @media (max-width: 1199px) and (min-width: 700px) { .ticket-work-area { grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1fr); gap: 14px; } } @media (max-width: 699px) { .ticket-workspace { min-height: 0; } .ticket-work-area { grid-template-columns: minmax(0, 1fr); height: auto; gap: 16px; } .ticket-list-pane > .MuiPaper-root, .ticket-detail-pane > .MuiPaper-root { min-height: 0; } .ticket-list-card { max-height: 480px; } .ticket-list-scroll { flex: 0 1 auto; max-height: 350px; } .ticket-list-row { grid-template-columns: max-content minmax(140px, 1.2fr) minmax(120px, 1fr) max-content max-content; min-width: 560px; } .ticket-list-scroll { overflow-x: auto; } .ticket-detail-pane > .MuiPaper-root { min-height: 480px; } .ticket-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ticket-filter-grid .ticket-filter-search, .ticket-filter-grid > .MuiButton-root { grid-column: 1 / -1; } } @media (max-width: 459px) { .ticket-filter-grid { grid-template-columns: minmax(0, 1fr); } } /* 减弱动效偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }