Stev_Wang
a5933a286e
按用户选定实现操作日志列表 / 详情（方案 A）与运行日志（方案 C）；多条件筛选、真实游标分页、字段级 diff / 完整原始 JSON、560 导出抽屉（轮询 / 历史 / 签名下载）、只读与权限控制；侧栏「审计日志」更名「操作日志」、「客户字段」更名「字段管理」并新增「运行日志」；1024 关键列适配。
1227 lines
24 KiB
CSS
1227 lines
24 KiB
CSS
/* A5 审计与日志 · 操作日志列表 / 详情 / 导出（用户选定方案 A：经典管理台） */
|
|
|
|
/* ---------- 页面骨架 ---------- */
|
|
|
|
.lx-audit-page {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: var(--lx-space-4);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lx-audit-page__header {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--lx-space-4);
|
|
}
|
|
|
|
.lx-audit-page__header h1 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 28px;
|
|
color: var(--lx-color-text-primary);
|
|
}
|
|
|
|
.lx-audit-page__header p {
|
|
margin-top: 2px;
|
|
font-size: var(--lx-font-size-xs);
|
|
color: var(--lx-color-text-secondary);
|
|
}
|
|
|
|
.lx-audit-page__actions {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: var(--lx-space-2);
|
|
}
|
|
|
|
.lx-audit-readonly {
|
|
display: inline-flex;
|
|
height: 28px;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 0 10px;
|
|
border-radius: var(--lx-radius-pill);
|
|
background: var(--lx-color-bg-hover);
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-audit-link {
|
|
color: var(--lx-color-brand);
|
|
cursor: pointer;
|
|
font-size: var(--lx-font-size-sm);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-audit-link:hover {
|
|
color: var(--lx-color-brand-hover);
|
|
}
|
|
|
|
.lx-audit-muted {
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-audit-mono {
|
|
white-space: nowrap;
|
|
font-family: var(--lx-font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------- 提示条 ---------- */
|
|
|
|
.lx-audit-note {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 38px;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--lx-color-brand-soft);
|
|
border-radius: var(--lx-radius-md);
|
|
background: var(--lx-color-brand-soft);
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-note > svg {
|
|
flex: none;
|
|
color: var(--lx-color-brand);
|
|
}
|
|
|
|
.lx-audit-note > span {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.lx-audit-note b {
|
|
color: var(--lx-color-text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------- 筛选卡 ---------- */
|
|
|
|
.lx-audit-filters {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-lg);
|
|
background: var(--lx-color-bg-panel);
|
|
box-shadow: var(--lx-shadow-panel);
|
|
}
|
|
|
|
.lx-audit-filters__row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 12px;
|
|
}
|
|
|
|
.lx-audit-field {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.lx-audit-field > span {
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-field--keyword {
|
|
flex: 1 1 240px;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.lx-audit-field:not(.lx-audit-field--keyword) {
|
|
flex: 0 0 150px;
|
|
}
|
|
|
|
.lx-audit-filters__actions {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.lx-audit-filters__sub {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-top: 10px;
|
|
border-top: 1px dashed var(--lx-color-border);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-filters__label {
|
|
color: var(--lx-color-text-secondary);
|
|
}
|
|
|
|
.lx-audit-filters__sep {
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--lx-color-border);
|
|
}
|
|
|
|
.lx-audit-filters__date {
|
|
width: 240px;
|
|
}
|
|
|
|
.lx-audit-filters__result {
|
|
width: 132px;
|
|
}
|
|
|
|
.lx-audit-filters__hint {
|
|
margin-left: auto;
|
|
overflow: hidden;
|
|
color: var(--lx-color-text-tertiary);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---------- 表格卡 ---------- */
|
|
|
|
.lx-audit-table-card {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-lg);
|
|
background: var(--lx-color-bg-panel);
|
|
box-shadow: var(--lx-shadow-panel);
|
|
}
|
|
|
|
.lx-audit-table-card__head {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 48px;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid var(--lx-color-border);
|
|
}
|
|
|
|
.lx-audit-table-card__head b {
|
|
font-size: var(--lx-font-size-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lx-audit-table-card__count {
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.lx-audit-table-card__tools {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.lx-audit-table-wrap {
|
|
min-height: 0;
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.lx-audit-table .semi-table {
|
|
min-width: 1080px;
|
|
}
|
|
|
|
.lx-audit-table .semi-table-thead > .semi-table-row > .semi-table-row-head {
|
|
height: 40px;
|
|
background: var(--lx-color-bg-subtle);
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lx-audit-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
|
height: 54px;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--lx-color-border);
|
|
font-size: var(--lx-font-size-sm);
|
|
}
|
|
|
|
.lx-audit-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lx-audit-row:hover > .semi-table-row-cell {
|
|
background: var(--lx-color-bg-subtle);
|
|
}
|
|
|
|
.lx-audit-time,
|
|
.lx-audit-actor,
|
|
.lx-audit-action,
|
|
.lx-audit-target,
|
|
.lx-audit-result {
|
|
display: flex;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lx-audit-time b,
|
|
.lx-audit-actor b,
|
|
.lx-audit-action b,
|
|
.lx-audit-target b {
|
|
overflow: hidden;
|
|
color: var(--lx-color-text-primary);
|
|
font-weight: 500;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-audit-time b {
|
|
font-family: var(--lx-font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.lx-audit-time em,
|
|
.lx-audit-actor em,
|
|
.lx-audit-action em,
|
|
.lx-audit-target em {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
font-style: normal;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-audit-action em {
|
|
font-family: var(--lx-font-mono);
|
|
}
|
|
|
|
.lx-audit-result em {
|
|
overflow: hidden;
|
|
color: var(--lx-color-danger);
|
|
font-size: var(--lx-font-size-xs);
|
|
font-style: normal;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-audit-trace {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.lx-audit-trace code {
|
|
font-family: var(--lx-font-mono);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-pager {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
min-height: 48px;
|
|
padding: 0 16px;
|
|
border-top: 1px solid var(--lx-color-border);
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-pager__error {
|
|
color: var(--lx-color-danger);
|
|
font-style: normal;
|
|
}
|
|
|
|
/* ---------- 状态标签 ---------- */
|
|
|
|
.lx-audit-tag {
|
|
display: inline-flex;
|
|
height: 22px;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0 8px;
|
|
border-radius: var(--lx-radius-sm);
|
|
font-size: var(--lx-font-size-xs);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-audit-tag--success,
|
|
.lx-audit-tag--succeeded {
|
|
color: var(--lx-color-success);
|
|
background: color-mix(in srgb, var(--lx-color-success) 12%, var(--lx-color-bg-panel));
|
|
}
|
|
|
|
.lx-audit-tag--failure,
|
|
.lx-audit-tag--failed {
|
|
color: var(--lx-color-danger);
|
|
background: color-mix(in srgb, var(--lx-color-danger) 12%, var(--lx-color-bg-panel));
|
|
}
|
|
|
|
.lx-audit-tag--added {
|
|
color: var(--lx-color-success);
|
|
background: color-mix(in srgb, var(--lx-color-success) 12%, var(--lx-color-bg-panel));
|
|
}
|
|
|
|
.lx-audit-tag--removed {
|
|
color: var(--lx-color-danger);
|
|
background: color-mix(in srgb, var(--lx-color-danger) 12%, var(--lx-color-bg-panel));
|
|
}
|
|
|
|
.lx-audit-tag--changed {
|
|
color: var(--lx-color-brand);
|
|
background: var(--lx-color-brand-soft);
|
|
}
|
|
|
|
.lx-audit-tag--queued {
|
|
color: var(--lx-color-text-secondary);
|
|
background: var(--lx-color-bg-hover);
|
|
}
|
|
|
|
.lx-audit-tag--running {
|
|
color: var(--lx-color-brand);
|
|
background: var(--lx-color-brand-soft);
|
|
}
|
|
|
|
.lx-audit-tag--category {
|
|
color: var(--lx-color-warning);
|
|
background: color-mix(in srgb, var(--lx-color-warning) 14%, var(--lx-color-bg-panel));
|
|
}
|
|
|
|
.lx-audit-state {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-lg);
|
|
background: var(--lx-color-bg-panel);
|
|
}
|
|
|
|
/* ---------- 详情页 ---------- */
|
|
|
|
.lx-audit-detail {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.lx-audit-detail__header {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.lx-audit-detail__title {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
|
|
.lx-audit-hero {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
padding: 16px 20px;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-lg);
|
|
background: var(--lx-color-bg-panel);
|
|
box-shadow: var(--lx-shadow-panel);
|
|
}
|
|
|
|
.lx-audit-hero__title {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.lx-audit-hero__title > b {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lx-audit-hero__title > code {
|
|
padding: 2px 6px;
|
|
border-radius: var(--lx-radius-sm);
|
|
background: var(--lx-color-bg-subtle);
|
|
color: var(--lx-color-text-secondary);
|
|
font-family: var(--lx-font-mono);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-hero__time {
|
|
margin-left: auto;
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.lx-audit-hero__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 16px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--lx-color-border);
|
|
}
|
|
|
|
.lx-audit-hero__grid > div,
|
|
.lx-audit-hero__meta > div {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.lx-audit-hero__grid span,
|
|
.lx-audit-hero__meta span {
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-hero__grid b,
|
|
.lx-audit-hero__meta b {
|
|
overflow: hidden;
|
|
font-weight: 500;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-audit-hero__grid em {
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
font-style: normal;
|
|
}
|
|
|
|
.lx-audit-hero__meta {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
|
|
gap: 16px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--lx-color-border);
|
|
}
|
|
|
|
.lx-audit-hero__meta > div {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
}
|
|
|
|
.lx-audit-hero__meta > div span {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.lx-audit-detail__body {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex: 1;
|
|
align-items: flex-start;
|
|
gap: var(--lx-space-4);
|
|
}
|
|
|
|
.lx-audit-detail__main {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1 1 66%;
|
|
flex-direction: column;
|
|
gap: var(--lx-space-4);
|
|
}
|
|
|
|
.lx-audit-detail__aside {
|
|
display: flex;
|
|
width: 360px;
|
|
flex: 0 0 360px;
|
|
flex-direction: column;
|
|
gap: var(--lx-space-4);
|
|
}
|
|
|
|
.lx-audit-detail-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-lg);
|
|
background: var(--lx-color-bg-panel);
|
|
box-shadow: var(--lx-shadow-panel);
|
|
}
|
|
|
|
.lx-audit-detail-card__head {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 44px;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid var(--lx-color-border);
|
|
}
|
|
|
|
.lx-audit-detail-card__head b {
|
|
font-size: var(--lx-font-size-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lx-audit-detail-card__count {
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-detail-note {
|
|
padding: 14px 16px;
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.lx-audit-detail-note .lx-audit-link {
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.lx-audit-kv {
|
|
display: grid;
|
|
grid-template-columns: 84px minmax(0, 1fr);
|
|
gap: 8px 10px;
|
|
padding: 14px 16px;
|
|
margin: 0;
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-kv dt {
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-audit-kv dd {
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.lx-audit-related {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.lx-audit-related__link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 8px 16px;
|
|
transition: background var(--lx-motion-fast) var(--lx-ease-out);
|
|
}
|
|
|
|
.lx-audit-related__link:hover {
|
|
background: var(--lx-color-bg-subtle);
|
|
}
|
|
|
|
.lx-audit-related__link b {
|
|
overflow: hidden;
|
|
font-size: var(--lx-font-size-xs);
|
|
font-weight: 500;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-audit-related__link span {
|
|
flex: none;
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: 11px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------- 变更对比 ---------- */
|
|
|
|
.lx-audit-seg {
|
|
display: flex;
|
|
gap: 2px;
|
|
margin-left: auto;
|
|
padding: 2px;
|
|
border-radius: var(--lx-radius-md);
|
|
background: var(--lx-color-bg-hover);
|
|
}
|
|
|
|
.lx-audit-seg__item {
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
border-radius: var(--lx-radius-sm);
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
transition: all var(--lx-motion-fast) var(--lx-ease-out);
|
|
}
|
|
|
|
.lx-audit-seg__item.is-active {
|
|
background: var(--lx-color-bg-panel);
|
|
color: var(--lx-color-text-primary);
|
|
box-shadow: var(--lx-shadow-panel);
|
|
}
|
|
|
|
.lx-audit-fail-box {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
margin: 12px 16px 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid color-mix(in srgb, var(--lx-color-danger) 30%, transparent);
|
|
border-radius: var(--lx-radius-md);
|
|
background: color-mix(in srgb, var(--lx-color-danger) 8%, var(--lx-color-bg-panel));
|
|
color: var(--lx-color-danger);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-diff__wrap {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.lx-audit-diff-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-md);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-diff-table th {
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
border-bottom: 1px solid var(--lx-color-border);
|
|
background: var(--lx-color-bg-subtle);
|
|
color: var(--lx-color-text-tertiary);
|
|
font-weight: 500;
|
|
text-align: left;
|
|
}
|
|
|
|
.lx-audit-diff-table td {
|
|
min-width: 0;
|
|
padding: 9px 12px;
|
|
border-bottom: 1px solid var(--lx-color-border);
|
|
vertical-align: top;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.lx-audit-diff-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.lx-audit-diff-table td:first-child {
|
|
width: 160px;
|
|
}
|
|
|
|
.lx-audit-diff-table td:first-child b {
|
|
display: block;
|
|
margin: 4px 0 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lx-audit-diff-table td:first-child code {
|
|
color: var(--lx-color-text-tertiary);
|
|
font-family: var(--lx-font-mono);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.lx-audit-diff-table tr.is-added td:nth-child(3) {
|
|
background: color-mix(in srgb, var(--lx-color-success) 9%, var(--lx-color-bg-panel));
|
|
}
|
|
|
|
.lx-audit-diff-table tr.is-removed td:nth-child(2) {
|
|
background: color-mix(in srgb, var(--lx-color-danger) 8%, var(--lx-color-bg-panel));
|
|
}
|
|
|
|
.lx-audit-diff-table tr.is-changed td:nth-child(2),
|
|
.lx-audit-diff-table tr.is-changed td:nth-child(3) {
|
|
background: var(--lx-color-brand-soft);
|
|
}
|
|
|
|
.lx-audit-diff__after--rejected {
|
|
color: var(--lx-color-text-tertiary);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.lx-audit-diff__rejected {
|
|
margin-left: 6px;
|
|
color: var(--lx-color-danger);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.lx-audit-raw {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.lx-audit-raw__head {
|
|
margin-bottom: 8px;
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-raw__code {
|
|
max-height: 420px;
|
|
padding: 12px 14px;
|
|
margin: 0;
|
|
overflow: auto;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-md);
|
|
background: var(--lx-color-bg-subtle);
|
|
color: var(--lx-color-text-primary);
|
|
font-family: var(--lx-font-mono);
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
white-space: pre;
|
|
}
|
|
|
|
.lx-audit-reason {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--lx-color-border);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-reason span {
|
|
flex: 0 0 auto;
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-audit-reason p {
|
|
margin: 0;
|
|
color: var(--lx-color-text-secondary);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ---------- 导出抽屉 ---------- */
|
|
|
|
.lx-audit-export {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.lx-audit-export__sub {
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-tabs {
|
|
display: flex;
|
|
gap: 20px;
|
|
border-bottom: 1px solid var(--lx-color-border);
|
|
}
|
|
|
|
.lx-audit-tab {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 38px;
|
|
padding: 0 2px;
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-sm);
|
|
}
|
|
|
|
.lx-audit-tab.is-active {
|
|
color: var(--lx-color-brand);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lx-audit-tab.is-active::after {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -1px;
|
|
left: 0;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
background: var(--lx-color-brand);
|
|
content: '';
|
|
}
|
|
|
|
.lx-audit-tab__count {
|
|
display: inline-flex;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 5px;
|
|
border-radius: var(--lx-radius-pill);
|
|
background: var(--lx-color-bg-hover);
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.lx-audit-export__panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.lx-audit-export__label {
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lx-audit-scope {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-md);
|
|
background: var(--lx-color-bg-subtle);
|
|
}
|
|
|
|
.lx-audit-scope__row {
|
|
display: flex;
|
|
gap: 12px;
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-scope__row span {
|
|
flex: 0 0 64px;
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-audit-scope__row b {
|
|
min-width: 0;
|
|
font-weight: 500;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.lx-audit-facts {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px 16px;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-md);
|
|
}
|
|
|
|
.lx-audit-fact {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-fact span {
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-audit-fact b {
|
|
min-width: 0;
|
|
font-weight: 500;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.lx-audit-fact code {
|
|
font-family: var(--lx-font-mono);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.lx-audit-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.lx-audit-chip {
|
|
display: inline-flex;
|
|
height: 24px;
|
|
align-items: center;
|
|
padding: 0 9px;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-pill);
|
|
background: var(--lx-color-bg-panel);
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-export-flow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.lx-audit-export-flow__step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-export-flow__step i {
|
|
display: inline-flex;
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: var(--lx-color-brand-soft);
|
|
color: var(--lx-color-brand);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.lx-audit-export-note {
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-md);
|
|
background: var(--lx-color-bg-subtle);
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.lx-audit-export-error {
|
|
padding: 10px 12px;
|
|
border: 1px solid color-mix(in srgb, var(--lx-color-danger) 30%, transparent);
|
|
border-radius: var(--lx-radius-md);
|
|
background: color-mix(in srgb, var(--lx-color-danger) 8%, var(--lx-color-bg-panel));
|
|
color: var(--lx-color-danger);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-export-progress,
|
|
.lx-audit-export-result {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.lx-audit-export-progress__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.lx-audit-export-progress__head b {
|
|
font-size: var(--lx-font-size-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lx-audit-export-progress__pct {
|
|
margin-left: auto;
|
|
color: var(--lx-color-brand);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.lx-audit-export-progress__meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-export-success {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 12px 14px;
|
|
border: 1px solid color-mix(in srgb, var(--lx-color-success) 30%, transparent);
|
|
border-radius: var(--lx-radius-md);
|
|
background: color-mix(in srgb, var(--lx-color-success) 8%, var(--lx-color-bg-panel));
|
|
}
|
|
|
|
.lx-audit-export-success b {
|
|
color: var(--lx-color-success);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lx-audit-export-success span {
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-export-fail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 12px 14px;
|
|
border: 1px solid color-mix(in srgb, var(--lx-color-danger) 30%, transparent);
|
|
border-radius: var(--lx-radius-md);
|
|
background: color-mix(in srgb, var(--lx-color-danger) 8%, var(--lx-color-bg-panel));
|
|
}
|
|
|
|
.lx-audit-export-fail b {
|
|
color: var(--lx-color-danger);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lx-audit-export-fail span {
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-export-warn {
|
|
padding: 10px 12px;
|
|
border-radius: var(--lx-radius-md);
|
|
background: color-mix(in srgb, var(--lx-color-warning) 12%, var(--lx-color-bg-panel));
|
|
color: var(--lx-color-warning);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-export-retry {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.lx-audit-export-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.lx-audit-history__toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: var(--lx-font-size-xs);
|
|
}
|
|
|
|
.lx-audit-history-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-md);
|
|
}
|
|
|
|
.lx-audit-history-item__main {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
.lx-audit-history-item__main b {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lx-audit-history-item__main code {
|
|
color: var(--lx-color-text-secondary);
|
|
font-family: var(--lx-font-mono);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.lx-audit-history-item__main span,
|
|
.lx-audit-history-item__main em {
|
|
color: var(--lx-color-text-tertiary);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.lx-audit-history-item__side {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
}
|
|
|
|
.lx-audit-history-item__fail {
|
|
max-width: 150px;
|
|
overflow: hidden;
|
|
color: var(--lx-color-danger);
|
|
font-size: 11px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-audit-help {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-sm);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ---------- 1024 适配 ---------- */
|
|
|
|
@media (width <= 1200px) {
|
|
.lx-audit-page__actions {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.lx-audit-filters__row {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lx-audit-field--keyword {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.lx-audit-field:not(.lx-audit-field--keyword) {
|
|
flex: 1 1 160px;
|
|
}
|
|
|
|
.lx-audit-filters__actions {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.lx-audit-filters__sub {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lx-audit-filters__hint {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.lx-audit-detail__body {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.lx-audit-detail__aside {
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.lx-audit-hero__grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.lx-audit-hero__meta {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (width <= 1100px) {
|
|
/* 1024 宽：隐藏 IP / trace_id，保留 时间 / 操作人 / 操作 / 对象 / 客户 / 结果 / 查看 */
|
|
.lx-audit-col-ip,
|
|
.lx-audit-col-trace {
|
|
display: none !important;
|
|
}
|
|
|
|
.lx-audit-table .semi-table {
|
|
min-width: 780px;
|
|
}
|
|
}
|