From e9735f16060bad3aa6724f9a51db9b16c6f390fb Mon Sep 17 00:00:00 2001 From: caoxiaozhu Date: Fri, 15 May 2026 09:35:58 +0000 Subject: [PATCH] =?UTF-8?q?style(web):=20=E6=9B=B4=E6=96=B0=E5=BA=94?= =?UTF-8?q?=E7=94=A8=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=94=BF=E7=AD=96=E5=88=B6?= =?UTF-8?q?=E5=BA=A6=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E6=97=A5=E5=BF=97=E8=AF=A6=E6=83=85=E5=92=8C=E6=97=A5?= =?UTF-8?q?=E5=BF=97=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/assets/styles/app.css | 2 + .../assets/styles/views/log-detail-view.css | 340 ++++++++ web/src/assets/styles/views/logs-view.css | 747 ++++++++++++++++++ web/src/assets/styles/views/policies-view.css | 63 ++ 4 files changed, 1152 insertions(+) create mode 100644 web/src/assets/styles/views/log-detail-view.css create mode 100644 web/src/assets/styles/views/logs-view.css diff --git a/web/src/assets/styles/app.css b/web/src/assets/styles/app.css index df814a0..710f6e5 100644 --- a/web/src/assets/styles/app.css +++ b/web/src/assets/styles/app.css @@ -98,6 +98,7 @@ .main.approval-main, .main.policies-main, .main.audit-main, +.main.logs-main, .main.employees-main, .main.settings-main { height: var(--desktop-stage-height, 100dvh); @@ -115,6 +116,7 @@ .workarea.approval-workarea, .workarea.policies-workarea, .workarea.audit-workarea, +.workarea.logs-workarea, .workarea.employees-workarea, .workarea.settings-workarea { min-height: 0; diff --git a/web/src/assets/styles/views/log-detail-view.css b/web/src/assets/styles/views/log-detail-view.css new file mode 100644 index 0000000..3d7bef3 --- /dev/null +++ b/web/src/assets/styles/views/log-detail-view.css @@ -0,0 +1,340 @@ +.log-detail-page { + height: 100%; + min-height: 0; + display: grid; + grid-template-rows: minmax(0, 1fr) auto; + gap: 10px; + overflow: hidden; +} + +.detail-scroll { + min-height: 0; + display: grid; + align-content: start; + gap: 14px; + overflow: auto; + padding-bottom: 6px; +} + +.detail-actions { + position: relative; + display: inline-flex; + align-items: center; + justify-content: flex-start; + gap: 12px; + margin-top: 10px; + padding: 10px 0 0; + border-top: 1px solid #e5eaf0; + background: transparent; +} + +.detail-actions button { + height: 36px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + border-radius: 8px; + font-size: 13px; + font-weight: 760; +} + +.back-action { + min-width: 104px; + border: 1px solid #d7e0ea; + background: #fff; + color: #475569; +} + +.back-action:hover { + border-color: #94a3b8; + background: #f8fafc; +} + +.detail-state { + min-height: 240px; + display: grid; + place-items: center; + gap: 10px; + padding: 28px 20px; + text-align: center; +} + +.detail-state i { + color: #10b981; + font-size: 28px; +} + +.detail-state strong { + color: #0f172a; + font-size: 16px; +} + +.detail-state p { + color: #64748b; +} + +.detail-state.error i { + color: #ef4444; +} + +.detail-state button { + min-height: 36px; + padding: 0 14px; + border: 1px solid #d7e0ea; + border-radius: 8px; + background: #fff; + color: #334155; + font-weight: 750; +} + +.detail-hero { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 18px; + padding: 18px; +} + +.hero-copy { + min-width: 0; +} + +.hero-tags { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 10px; +} + +.hero-copy h2 { + margin: 0; + color: #0f172a; + font-size: 22px; +} + +.hero-copy p { + margin: 8px 0 0; + color: #64748b; + line-height: 1.6; +} + +.refresh-btn { + min-height: 38px; + display: inline-flex; + align-items: center; + gap: 7px; + padding: 0 14px; + border: 1px solid #d7e0ea; + border-radius: 8px; + background: #fff; + color: #334155; + font-size: 13px; + font-weight: 750; +} + +.detail-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; +} + +.detail-card { + display: grid; + gap: 14px; + align-content: start; + padding: 18px; +} + +.detail-card.wide { + grid-column: 1 / -1; +} + +.card-head h3 { + margin: 0; + color: #0f172a; + font-size: 16px; +} + +.card-head p { + margin: 6px 0 0; + color: #64748b; + font-size: 13px; +} + +.info-grid, +.feedback-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +.info-grid div, +.feedback-grid div { + display: grid; + gap: 6px; + padding: 12px 14px; + border-radius: 8px; + background: #f8fafc; +} + +.info-grid span, +.feedback-grid span { + color: #64748b; + font-size: 12px; + font-weight: 700; +} + +.info-grid strong, +.feedback-grid strong { + color: #0f172a; + font-size: 13px; + line-height: 1.55; + word-break: break-word; +} + +.trace-steps { + display: grid; + gap: 10px; +} + +.trace-step { + width: 100%; + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: center; + gap: 12px; + padding: 11px 12px; + border: 1px solid #e5edf5; + border-radius: 8px; + background: #fff; + text-align: left; +} + +.trace-step.active { + border-color: rgba(16, 185, 129, 0.32); + box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08); +} + +.step-index { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 999px; + background: #ecfeff; + color: #0f766e; + font-size: 12px; + font-weight: 800; +} + +.step-copy { + display: grid; + gap: 4px; +} + +.step-copy strong { + color: #0f172a; + font-size: 13px; +} + +.step-copy span { + color: #64748b; + font-size: 12px; +} + +.payload-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +.payload-grid h4 { + margin: 0 0 10px; + color: #0f172a; + font-size: 13px; +} + +.code-block { + margin: 0; + max-height: 280px; + overflow: auto; + padding: 14px; + border-radius: 8px; + background: #0f172a; + color: #dbeafe; + font-size: 12px; + line-height: 1.65; + white-space: pre-wrap; + word-break: break-word; +} + +.code-block.large { + max-height: 360px; +} + +.status-pill, +.level-pill { + min-width: 56px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 4px 9px; + border-radius: 999px; + font-size: 12px; + font-weight: 800; +} + +.status-pill.success { + background: rgba(22, 163, 74, 0.12); + color: #166534; +} + +.status-pill.warning, +.level-pill.warning { + background: rgba(245, 158, 11, 0.14); + color: #b45309; +} + +.status-pill.danger, +.level-pill.danger { + background: rgba(239, 68, 68, 0.14); + color: #b91c1c; +} + +.status-pill.muted, +.level-pill.muted { + background: rgba(148, 163, 184, 0.14); + color: #475569; +} + +.level-pill.info { + background: rgba(37, 99, 235, 0.12); + color: #1d4ed8; +} + +.inline-empty { + padding: 16px; + border-radius: 8px; + background: #f8fafc; + color: #64748b; + text-align: center; +} + +@media (max-width: 980px) { + .detail-hero { + flex-direction: column; + } + + .detail-grid, + .info-grid, + .feedback-grid, + .payload-grid { + grid-template-columns: 1fr; + } + + .detail-card.wide { + grid-column: auto; + } +} diff --git a/web/src/assets/styles/views/logs-view.css b/web/src/assets/styles/views/logs-view.css new file mode 100644 index 0000000..3853eeb --- /dev/null +++ b/web/src/assets/styles/views/logs-view.css @@ -0,0 +1,747 @@ +.logs-view { + display: grid; + grid-template-rows: minmax(0, 1fr); + height: 100%; + min-height: 0; + background: transparent; +} + +.panel { + background: rgba(255, 255, 255, 0.98); + border: 1px solid #dfe7ef; + border-radius: 10px; + box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); +} + +.logs-empty, +.logs-console { + padding: 16px 18px; +} + +.logs-empty h2, +.panel-heading h3, +.event-summary h4, +.section-head h4, +.inspector-empty h4 { + margin: 0; + color: #0f172a; +} + +.logs-empty p, +.panel-heading p, +.event-summary p, +.section-head p, +.inspector-empty p { + margin: 8px 0 0; + color: #64748b; +} + +.logs-console { + display: grid; + grid-template-rows: auto auto auto minmax(0, 1fr); + gap: 14px; + min-height: 0; + overflow: hidden; +} + +.logs-console.without-toolbar { + grid-template-rows: auto auto minmax(0, 1fr); +} + +.console-tabs { + display: flex; + align-items: center; + gap: 24px; + padding-bottom: 10px; + border-bottom: 1px solid #e7edf4; +} + +.console-tabs button { + position: relative; + padding: 0 0 10px; + border: none; + background: transparent; + color: #64748b; + font-size: 14px; + font-weight: 700; + cursor: pointer; + transition: color 0.2s ease; +} + +.console-tabs button:hover, +.console-tabs button.active { + color: #0f766e; +} + +.console-tabs button.active::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: -11px; + height: 2px; + border-radius: 999px; + background: #10b981; +} + +.console-toolbar { + display: grid; + grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(138px, 0.7fr)) auto; + gap: 10px; + align-items: end; +} + +.filter-field { + display: grid; + gap: 5px; +} + +.filter-field span { + color: #64748b; + font-size: 12px; + font-weight: 700; +} + +.filter-field select, +.field-input { + min-height: 38px; + border: 1px solid #d8e1eb; + border-radius: 8px; + background: #fff; +} + +.filter-field select { + padding: 0 12px; + color: #0f172a; + font-size: 13px; +} + +.field-input { + display: flex; + align-items: center; + gap: 8px; + padding: 0 12px; +} + +.field-input .pi { + color: #94a3b8; + font-size: 13px; +} + +.field-input input { + width: 100%; + border: none; + background: transparent; + color: #0f172a; + font-size: 13px; + outline: none; +} + +.toolbar-btn { + min-height: 38px; + padding: 0 14px; + border-radius: 8px; + border: 1px solid #d8e1eb; + font-size: 13px; + font-weight: 700; + cursor: pointer; +} + +.toolbar-btn.primary { + background: linear-gradient(135deg, #0f9f8d, #10b981); + border-color: transparent; + color: #fff; +} + +.toolbar-btn.ghost { + background: #f8fafc; + color: #0f172a; +} + +.toolbar-btn:disabled { + cursor: not-allowed; + opacity: 0.7; +} + +.hint { + display: inline-flex; + align-items: center; + gap: 7px; + color: #64748b; + font-size: 13px; +} + +.console-layout { + display: grid; + grid-template-rows: minmax(0, 1fr) auto; + gap: 12px; + min-height: 0; +} + +.list-panel, +.analytics-card { + display: grid; + gap: 12px; + min-height: 0; + padding: 14px; + border-radius: 10px; + border: 1px solid #e5edf5; + background: #fff; +} + +.list-panel { + grid-template-rows: auto minmax(0, 1fr) auto; +} + +.panel-heading { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; +} + +.panel-refresh { + flex: 0 0 auto; +} + +.panel-heading h3 { + font-size: 15px; +} + +.panel-heading p { + font-size: 12px; +} + +.table-shell { + min-height: 0; + overflow: auto; + border: 1px solid #e5edf5; + border-radius: 8px; + background: #fff; +} + +.log-table { + width: 100%; + min-width: 980px; + border-collapse: separate; + border-spacing: 0; +} + +.log-table thead th { + position: sticky; + top: 0; + z-index: 1; + padding: 10px 12px; + border-bottom: 1px solid #e5edf5; + background: #f8fbfd; + color: #475569; + font-size: 12px; + font-weight: 800; + text-align: left; + white-space: nowrap; +} + +.log-table tbody tr { + cursor: pointer; + transition: background 0.2s ease; +} + +.log-table tbody tr:hover { + background: rgba(16, 185, 129, 0.04); +} + +.log-table tbody tr.active { + background: rgba(16, 185, 129, 0.08); + box-shadow: inset 3px 0 0 #10b981; +} + +.log-table tbody td { + padding: 10px 12px; + border-bottom: 1px solid #eef3f8; + color: #0f172a; + font-size: 13px; + vertical-align: top; +} + +.summary-cell { + min-width: 220px; +} + +.summary-cell strong, +.file-cell strong { + display: block; + color: #0f172a; + font-size: 13px; + font-weight: 700; +} + +.summary-cell span { + display: block; + margin-top: 4px; + color: #64748b; + line-height: 1.5; +} + +.trace-cell { + max-width: 180px; + color: #2563eb; + word-break: break-all; +} + +.system-table .summary-cell { + min-width: 260px; +} + +.system-table .trace-cell { + min-width: 148px; +} + +.table-foot { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: 16px; + color: #64748b; + font-size: 13px; +} + +.pager { + display: inline-flex; + justify-content: center; + gap: 6px; + padding: 4px; + border: 1px solid #e2e8f0; + border-radius: 12px; + background: #f8fafc; +} + +.pager button { + width: 32px; + height: 32px; + border: 0; + border-radius: 9px; + background: transparent; + color: #334155; + font-size: 14px; + font-weight: 800; +} + +.page-ellipsis { + width: 24px; + height: 32px; + display: inline-grid; + place-items: center; + color: #94a3b8; + font-size: 13px; + font-weight: 800; +} + +.pager button:hover:not(.active):not(:disabled) { + background: #fff; + color: #059669; + box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08); +} + +.pager button.active { + background: #059669; + color: #fff; + box-shadow: 0 8px 16px rgba(5, 150, 105, 0.2); +} + +.page-nav:disabled { + cursor: not-allowed; + opacity: 0.45; +} + +.page-size-wrap { + position: relative; + justify-self: end; +} + +.page-size { + min-width: 112px; + min-height: 38px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 9px; + padding: 0 14px; + border: 1px solid #d7e0ea; + border-radius: 10px; + background: #fff; + color: #334155; + font-size: 14px; + font-weight: 750; + box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); +} + +.page-size-dropdown { + position: absolute; + right: 0; + bottom: calc(100% + 6px); + z-index: 40; + display: grid; + overflow: hidden; + border: 1px solid #d7e0ea; + border-radius: 10px; + background: #fff; + box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); +} + +.page-size-dropdown button { + height: 36px; + padding: 0 20px; + border: 0; + border-radius: 0; + background: transparent; + color: #334155; + font-size: 13px; + font-weight: 750; + white-space: nowrap; +} + +.page-size-dropdown button:hover { + background: #f0fdf4; + color: #059669; +} + +.page-size-dropdown button.active { + background: #059669; + color: #fff; +} + +.analytics-row { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr); + gap: 12px; + align-items: start; +} + +.analytics-card { + align-content: start; + gap: 8px; + padding: 10px 12px; +} + +.analytics-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 10px; +} + +.analytics-head h3 { + margin: 0; + color: #0f172a; + font-size: 15px; +} + +.analytics-head p { + margin: 4px 0 0; + color: #64748b; + font-size: 12px; +} + +.analytics-head > span { + display: inline-flex; + min-height: 24px; + align-items: center; + padding: 0 9px; + border-radius: 999px; + background: #ecfdf5; + color: #059669; + font-size: 12px; + font-weight: 700; +} + +.trend-card { + gap: 8px; +} + +.trend-card :deep(.log-trend-chart) { + height: 118px; +} + +.trend-card :deep(.chart-legend) { + margin-bottom: 6px; +} + +.distribution-card { + gap: 8px; +} + +.distribution-card :deep(.donut-chart) { + min-height: 118px; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.distribution-card :deep(.donut-body) { + width: 108px; + height: 96px; + flex: 0 0 108px; + margin: 0; +} + +.distribution-card :deep(.donut-legend) { + flex: 1; + grid-template-columns: 1fr; + gap: 5px; +} + +.trend-plot { + height: 102px; + padding: 8px 2px 0; + border-top: 1px solid #f1f5f9; +} + +.trend-plot svg { + width: 100%; + height: 100%; + overflow: visible; +} + +.trend-area { + fill: url(#logsTrendFill); +} + +.trend-line { + fill: none; + stroke-width: 2.4; + stroke-linecap: round; + stroke-linejoin: round; +} + +.trend-line.total { + stroke: #10b981; +} + +.trend-line.failed { + stroke: #ef4444; +} + +.trend-axis { + display: grid; + grid-template-columns: repeat(8, minmax(0, 1fr)); + color: #94a3b8; + font-size: 11px; +} + +.trend-axis span { + text-align: center; +} + +.distribution-body { + display: grid; + grid-template-columns: 104px minmax(0, 1fr); + align-items: center; + gap: 16px; +} + +.distribution-donut { + position: relative; + width: 104px; + height: 104px; + display: grid; + place-content: center; + border-radius: 999px; +} + +.distribution-donut::before { + content: ''; + position: absolute; + inset: 18px; + border-radius: inherit; + background: #fff; +} + +.distribution-donut strong, +.distribution-donut span { + position: relative; + z-index: 1; + display: block; + text-align: center; +} + +.distribution-donut strong { + color: #0f172a; + font-size: 22px; + line-height: 1; +} + +.distribution-donut span { + margin-top: 3px; + color: #64748b; + font-size: 11px; +} + +.distribution-list { + display: grid; + gap: 10px; +} + +.distribution-list div { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: center; + gap: 8px; +} + +.distribution-list i { + width: 8px; + height: 8px; + border-radius: 999px; +} + +.distribution-list span { + color: #475569; + font-size: 12px; +} + +.distribution-list strong { + color: #0f172a; + font-size: 13px; +} + +.status-pill, +.level-pill { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 56px; + padding: 4px 9px; + border-radius: 999px; + font-size: 12px; + font-weight: 800; + white-space: nowrap; +} + +.status-pill.success { + background: rgba(22, 163, 74, 0.12); + color: #166534; +} + +.status-pill.warning { + background: rgba(245, 158, 11, 0.14); + color: #b45309; +} + +.status-pill.danger { + background: rgba(239, 68, 68, 0.14); + color: #b91c1c; +} + +.status-pill.muted { + background: rgba(148, 163, 184, 0.14); + color: #475569; +} + +.status-pill.info, +.level-pill.info { + background: rgba(37, 99, 235, 0.12); + color: #1d4ed8; +} + +.level-pill.warning { + background: rgba(245, 158, 11, 0.14); + color: #b45309; +} + +.level-pill.danger { + background: rgba(239, 68, 68, 0.14); + color: #b91c1c; +} + +.level-pill.muted { + background: rgba(148, 163, 184, 0.14); + color: #475569; +} + +.detail-alert { + margin-top: 14px; + padding: 12px 14px; + border-radius: 14px; + font-size: 13px; + line-height: 1.6; +} + +.detail-alert.danger { + background: rgba(254, 226, 226, 0.9); + border: 1px solid rgba(248, 113, 113, 0.26); + color: #b91c1c; +} + +.inline-empty, +.inspector-empty { + padding: 16px; + border-radius: 8px; + background: #f8fafc; + color: #64748b; +} + +.inline-empty { + text-align: center; +} + +.inspector-empty { + display: grid; + align-content: center; + justify-items: center; + min-height: 100%; + text-align: center; +} + +@media (max-width: 1380px) { + .analytics-row { + grid-template-columns: 1fr; + } +} + +@media (max-width: 980px) { + .logs-view { + padding: 18px 16px 24px; + } + + .logs-empty, + .logs-console { + padding: 18px; + } + + .console-toolbar { + grid-template-columns: 1fr; + } + + .table-foot { + grid-template-columns: 1fr; + justify-items: stretch; + } + + .pager, + .page-size, + .page-size-wrap { + justify-self: stretch; + } +} + +@media (max-width: 720px) { + .console-tabs { + gap: 14px; + overflow-x: auto; + } + + .log-table thead th, + .log-table tbody td { + padding: 12px 10px; + } + + .summary-cell { + min-width: 220px; + } + + .trace-cell { + min-width: 140px; + } + +} diff --git a/web/src/assets/styles/views/policies-view.css b/web/src/assets/styles/views/policies-view.css index d89dce7..f33f4f7 100644 --- a/web/src/assets/styles/views/policies-view.css +++ b/web/src/assets/styles/views/policies-view.css @@ -668,6 +668,25 @@ th { color: #047857; } +.llm-wiki-stat-grid { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.llm-wiki-stat-grid span { + min-height: 26px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + background: #f8fafc; + color: #475569; + font-size: 11px; + font-weight: 750; +} + .llm-wiki-body { min-height: 0; margin-top: 18px; @@ -695,6 +714,50 @@ th { overflow: hidden; } +.llm-wiki-alert { + display: grid; + gap: 6px; + padding: 12px 14px; + border: 1px solid #fecaca; + border-radius: 12px; + background: #fef2f2; +} + +.llm-wiki-alert strong { + color: #991b1b; + font-size: 13px; + font-weight: 850; +} + +.llm-wiki-alert p { + color: #7f1d1d; + font-size: 12px; + line-height: 1.6; +} + +.llm-wiki-alert.warning { + border-color: #fed7aa; + background: #fff7ed; +} + +.llm-wiki-alert.warning strong, +.llm-wiki-alert.warning p { + color: #9a3412; +} + +.llm-wiki-alert.success, +.llm-wiki-alert.info { + border-color: #bfdbfe; + background: #eff6ff; +} + +.llm-wiki-alert.success strong, +.llm-wiki-alert.success p, +.llm-wiki-alert.info strong, +.llm-wiki-alert.info p { + color: #1d4ed8; +} + .llm-wiki-section-head { display: flex; align-items: flex-start;