From d8d0415bf47c9464c45fc05e53169f2c2abd8a9f Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Fri, 15 May 2026 06:56:39 +0000
Subject: [PATCH] =?UTF-8?q?style(web):=20=E6=9B=B4=E6=96=B0=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E4=B8=AD=E5=BF=83=E3=80=81=E5=AE=A1=E8=AE=A1=E3=80=81?=
 =?UTF-8?q?=E6=94=BF=E7=AD=96=E5=88=B6=E5=BA=A6=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=BC=BA=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=92=8C=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/views/approval-center-view.css     |  89 +++++
 web/src/assets/styles/views/audit-view.css    |  47 +++
 web/src/assets/styles/views/policies-view.css | 344 +++++++++++++++---
 3 files changed, 431 insertions(+), 49 deletions(-)

diff --git a/web/src/assets/styles/views/approval-center-view.css b/web/src/assets/styles/views/approval-center-view.css
index f4dd5a2..6e44f6e 100644
--- a/web/src/assets/styles/views/approval-center-view.css
+++ b/web/src/assets/styles/views/approval-center-view.css
@@ -55,6 +55,42 @@
 
 .filter-set { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
 
+.list-search {
+  position: relative;
+  width: 220px;
+}
+
+.list-search .mdi {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #64748b;
+  font-size: 15px;
+}
+
+.list-search input {
+  width: 100%;
+  height: 38px;
+  padding: 0 12px 0 36px;
+  border: 1px solid #d7e0ea;
+  border-radius: 8px;
+  background: #fff;
+  color: #0f172a;
+  font-size: 13px;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.list-search input::placeholder {
+  color: #8da0b4;
+}
+
+.list-search input:focus {
+  border-color: #10b981;
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
+  outline: none;
+}
+
 .filter-btn, .page-size {
   min-height: 38px;
   display: inline-flex;
@@ -86,6 +122,11 @@
   background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
   display: flex;
   flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.table-wrap.is-empty {
   align-items: center;
   justify-content: center;
 }
@@ -95,6 +136,54 @@
   align-self: flex-start;
 }
 
+.table-state {
+  width: 100%;
+  min-height: 260px;
+  display: grid;
+  place-items: center;
+  gap: 10px;
+  padding: 28px 20px;
+  text-align: center;
+  color: #64748b;
+  background: linear-gradient(180deg, #fcfffd 0%, #f5f9f7 100%);
+  align-self: center;
+}
+
+.table-state .mdi {
+  font-size: 28px;
+  color: #10b981;
+}
+
+.table-state strong {
+  color: #0f172a;
+  font-size: 15px;
+}
+
+.table-state p {
+  max-width: 420px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.table-state.error .mdi {
+  color: #ef4444;
+}
+
+.state-action {
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 14px;
+  border: 1px solid rgba(16, 185, 129, 0.28);
+  border-radius: 8px;
+  background: #fff;
+  color: #059669;
+  font-size: 13px;
+  font-weight: 760;
+}
+
 table { width: 100%; min-width: 1180px; border-collapse: collapse; table-layout: fixed; }
 
 th, td {
diff --git a/web/src/assets/styles/views/audit-view.css b/web/src/assets/styles/views/audit-view.css
index 8ec34a8..0948a59 100644
--- a/web/src/assets/styles/views/audit-view.css
+++ b/web/src/assets/styles/views/audit-view.css
@@ -319,6 +319,11 @@
   background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
   display: flex;
   flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.table-wrap.is-empty {
   align-items: center;
   justify-content: center;
 }
@@ -803,6 +808,11 @@ tbody tr.spotlight {
   grid-template-rows: auto minmax(0, 1fr);
 }
 
+.json-editor-card {
+  display: grid;
+  gap: 12px;
+}
+
 .markdown-card .field {
   min-height: 0;
   grid-template-rows: auto minmax(0, 1fr);
@@ -822,6 +832,43 @@ tbody tr.spotlight {
   color: #475569;
 }
 
+.json-template-meta {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.json-template-meta span {
+  min-height: 28px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #f8fafc;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.json-template-meta strong {
+  color: #0f172a;
+  font-weight: 850;
+}
+
+.json-editor {
+  min-height: 320px;
+  font-family: "Cascadia Mono", "Consolas", monospace;
+  font-size: 13px;
+  line-height: 1.65;
+  white-space: pre;
+}
+
+.json-editor.disabled {
+  background: #f8fafc;
+  color: #475569;
+}
+
 .subtle-banner,
 .editor-foot {
   display: flex;
diff --git a/web/src/assets/styles/views/policies-view.css b/web/src/assets/styles/views/policies-view.css
index 8de4ba4..d89dce7 100644
--- a/web/src/assets/styles/views/policies-view.css
+++ b/web/src/assets/styles/views/policies-view.css
@@ -234,11 +234,11 @@
   overflow: auto;
 }
 
-table {
-  width: 100%;
-  min-width: 690px;
-  border-collapse: collapse;
-}
+table {
+  width: 100%;
+  min-width: 690px;
+  border-collapse: collapse;
+}
 
 th,
 td {
@@ -251,12 +251,22 @@ td {
   vertical-align: middle;
 }
 
-th {
-  background: #f7fafc;
-  color: #64748b;
-  font-weight: 800;
-  white-space: nowrap;
-}
+th {
+  background: #f7fafc;
+  color: #64748b;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.knowledge-document-table th:not(:first-child),
+.knowledge-document-table td:not(:first-child) {
+  text-align: center;
+}
+
+.knowledge-document-table th:first-child,
+.knowledge-document-table td:first-child {
+  text-align: left;
+}
 
 .doc-row {
   cursor: pointer;
@@ -310,41 +320,69 @@ th {
   white-space: nowrap;
 }
 
-.state-tag.success {
-  background: #dcfce7;
-  color: #059669;
-}
+.state-tag.success {
+  background: #dcfce7;
+  color: #059669;
+}
+
+.state-tag.muted {
+  background: #e2e8f0;
+  color: #475569;
+}
 
-.state-tag.warning {
-  background: #ffedd5;
-  color: #f97316;
-}
+.state-tag.warning {
+  background: #ffedd5;
+  color: #f97316;
+}
+
+.state-tag.danger {
+  background: #fee2e2;
+  color: #dc2626;
+}
 
-.more-btn {
-  width: 32px;
-  height: 32px;
-  display: grid;
-  place-items: center;
+.more-btn {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
   border: 0;
   border-radius: 8px;
-  background: transparent;
-  color: #2563eb;
-}
-
-.more-btn.danger {
-  color: #dc2626;
-}
-
-.more-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.row-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
+  background: transparent;
+  color: #2563eb;
+}
+
+.more-btn:hover:not(:disabled):not(.is-disabled) {
+  background: #eff6ff;
+}
+
+.more-btn.danger {
+  color: #dc2626;
+}
+
+.more-btn.ingest {
+  color: #0f766e;
+}
+
+.more-btn.llm-wiki-view {
+  color: #c2410c;
+}
+
+.more-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.more-btn.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.row-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: center;
+}
 
 .empty-row {
   color: #64748b;
@@ -589,10 +627,194 @@ th {
     0 30px 90px rgba(15, 23, 42, 0.24);
 }
 
+.llm-wiki-overlay {
+  background:
+    radial-gradient(circle at top, rgba(15, 118, 110, 0.12), transparent 30%),
+    rgba(15, 23, 42, 0.58);
+}
+
+.llm-wiki-shell {
+  width: min(94vw, 1480px);
+  height: min(92vh, 1080px);
+}
+
+.llm-wiki-panel {
+  padding-bottom: 18px;
+}
+
+.llm-wiki-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+
+.llm-wiki-meta span,
+.llm-wiki-count {
+  min-height: 28px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.llm-wiki-count {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.llm-wiki-body {
+  min-height: 0;
+  margin-top: 18px;
+  display: grid;
+  overflow: hidden;
+}
+
+.llm-wiki-grid {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
+  gap: 18px;
+  overflow: hidden;
+}
+
+.llm-wiki-section {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 14px;
+  padding: 18px;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  overflow: hidden;
+}
+
+.llm-wiki-section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.llm-wiki-section-head h3 {
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 850;
+}
+
+.llm-wiki-section-head p {
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.llm-wiki-editor {
+  width: 100%;
+  min-height: 0;
+  height: 100%;
+  resize: none;
+  padding: 16px;
+  border: 1px solid #d7e0ea;
+  border-radius: 14px;
+  background: #fff;
+  color: #0f172a;
+  font-family: "Cascadia Mono", "Consolas", monospace;
+  font-size: 13px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.llm-wiki-editor:focus {
+  outline: none;
+  border-color: rgba(16, 185, 129, 0.42);
+  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
+}
+
+.llm-wiki-candidate-list {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.llm-wiki-candidate-card {
+  display: grid;
+  gap: 12px;
+  padding: 14px 15px;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
+}
+
+.llm-wiki-candidate-card header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.llm-wiki-candidate-card strong {
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.llm-wiki-candidate-card header span {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.llm-wiki-candidate-card p {
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.llm-wiki-chip-list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.llm-wiki-chip-list span {
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 9px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.llm-wiki-evidence {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding-left: 18px;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
 .preview-status {
   display: grid;
-  place-items: center;
-  min-height: 180px;
+  place-items: center;
+  min-height: 180px;
   padding: 24px;
   border: 1px dashed #cbd5e1;
   border-radius: 14px;
@@ -909,11 +1131,12 @@ th {
 @media (max-width: 760px) {
   .panel-title,
   .preview-head,
-  .viewer-toolbar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
+  .llm-wiki-section-head,
+  .viewer-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .summary-grid,
   .list-foot {
     grid-template-columns: 1fr;
@@ -951,4 +1174,27 @@ th {
   .preview-viewer {
     margin-top: 14px;
   }
+
+  .llm-wiki-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .llm-wiki-shell {
+    width: calc(100vw - 16px);
+    height: calc(100vh - 16px);
+  }
+
+  .llm-wiki-section {
+    padding: 14px;
+  }
+
+  .llm-wiki-editor {
+    min-height: 320px;
+  }
+}
+
+@media (max-width: 1080px) {
+  .llm-wiki-grid {
+    grid-template-columns: 1fr;
+  }
 }