diff --git a/web/src/assets/css/base.css b/web/src/assets/css/base.css
index 29bbe5e5..cb83dd0a 100644
--- a/web/src/assets/css/base.css
+++ b/web/src/assets/css/base.css
@@ -33,6 +33,7 @@
--gray-400: #bfbfbf;
--gray-300: #d9d9d9; /* 修正了原300/200重复 */
--gray-200: #e6e6e6; /* 稍微加深一点,便于分层 */
+ --gray-150: #f0f0f0;
--gray-100: #f2f2f2;
--gray-50: #f7f7f7;
--gray-25: #fafafa;
diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
index 98f6cff8..b7d00dcf 100644
--- a/web/src/components/AgentMessageComponent.vue
+++ b/web/src/components/AgentMessageComponent.vue
@@ -241,11 +241,6 @@ const toggleToolCall = (toolCallId) => {
overflow: hidden;
transition: all 0.2s ease;
- &:hover {
- border-color: var(--main-500);
- // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
- }
-
:deep(.ant-collapse) {
background-color: transparent;
border: none;
@@ -259,13 +254,8 @@ const toggleToolCall = (toolCallId) => {
font-size: 14px;
font-weight: 500;
color: var(--gray-700);
- // border-bottom: 1px solid var(--gray-200);
transition: all 0.2s ease;
- &:hover {
- background-color: var(--gray-150);
- }
-
.ant-collapse-expand-icon {
color: var(--gray-400);
}
@@ -277,7 +267,7 @@ const toggleToolCall = (toolCallId) => {
.ant-collapse-content-box {
padding: 16px;
- background-color: var(--gray-50);
+ background-color: var(--gray-25);
}
}
}
@@ -329,20 +319,13 @@ const toggleToolCall = (toolCallId) => {
overflow: hidden;
transition: all 0.2s ease;
- &:hover {
- background-color: var(--gray-50);
- outline: 1px solid var(--gray-200);
- outline-color: var(--main-500);
- // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
- }
-
.tool-header {
padding: 8px 12px;
// background-color: var(--gray-100);
font-size: 14px;
font-weight: 500;
color: var(--gray-800);
- border-bottom: 1px solid var(--gray-200);
+ border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: center;
gap: 8px;
@@ -352,10 +335,6 @@ const toggleToolCall = (toolCallId) => {
transition: color 0.2s ease;
align-items: center;
- &:hover {
- background-color: var(--gray-150);
- }
-
.anticon {
color: var(--main-color);
font-size: 16px;
@@ -398,10 +377,12 @@ const toggleToolCall = (toolCallId) => {
transition: all 0.3s ease;
.tool-params {
- padding: 16px;
- background-color: var(--gray-50);
+ padding: 10px 16px;
+ background-color: var(--gray-25);
+ border-bottom: 1px solid var(--gray-150);
.tool-params-header {
+ // unused
background-color: var(--gray-100);
font-size: 13px;
color: var(--gray-800);
@@ -412,9 +393,8 @@ const toggleToolCall = (toolCallId) => {
.tool-params-content {
margin: 0;
font-size: 13px;
- // background-color: var(--gray-100);
overflow-x: auto;
- color: var(--gray-800);
+ color: var(--gray-700);
line-height: 1.5;
pre {
diff --git a/web/src/components/ToolCallingResult/CalculatorResult.vue b/web/src/components/ToolCallingResult/CalculatorResult.vue
index a87e3fda..a3a38207 100644
--- a/web/src/components/ToolCallingResult/CalculatorResult.vue
+++ b/web/src/components/ToolCallingResult/CalculatorResult.vue
@@ -13,10 +13,7 @@
\ No newline at end of file
diff --git a/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue b/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
index 687c61d5..b8e8ea24 100644
--- a/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
+++ b/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
@@ -184,11 +184,11 @@ const getScoreColor = (score) => {
.knowledge-base-result {
background: var(--gray-0);
border-radius: 8px;
- border: 1px solid var(--gray-200);
+ // border: 1px solid var(--gray-200);
.kb-header {
padding: 12px 16px;
- border-bottom: 1px solid var(--gray-200);
+ // border-bottom: 1px solid var(--gray-200);
background: var(--gray-25);
h4 {
@@ -226,7 +226,7 @@ const getScoreColor = (score) => {
overflow: hidden;
.file-header {
- padding: 12px 14px;
+ padding: 8px 14px;
display: flex;
align-items: center;
justify-content: space-between;
@@ -239,8 +239,8 @@ const getScoreColor = (score) => {
}
&.expanded {
- background: var(--gray-50);
- border-bottom: 1px solid var(--gray-150);
+ background: var(--gray-25);
+ border-bottom: 1px solid var(--gray-100);
}
.file-info {
@@ -258,7 +258,7 @@ const getScoreColor = (score) => {
.file-name {
font-size: 13px;
font-weight: 500;
- color: var(--gray-800);
+ color: var(--gray-700);
flex: 1;
min-width: 0;
white-space: nowrap;
@@ -268,12 +268,9 @@ const getScoreColor = (score) => {
.chunk-count {
font-size: 11px;
- color: var(--gray-400);
- background: var(--gray-50);
- padding: 2px 6px;
- border-radius: 12px;
- border: 1px solid var(--gray-150);
+ color: var(--gray-500);
white-space: nowrap;
+ margin-right: 4px;
}
}
diff --git a/web/src/components/ToolCallingResult/KnowledgeGraphResult.vue b/web/src/components/ToolCallingResult/KnowledgeGraphResult.vue
index 512fc050..486b4c9f 100644
--- a/web/src/components/ToolCallingResult/KnowledgeGraphResult.vue
+++ b/web/src/components/ToolCallingResult/KnowledgeGraphResult.vue
@@ -243,12 +243,12 @@ defineExpose({
.knowledge-graph-result {
background: var(--gray-0);
border-radius: 8px;
- border: 1px solid var(--gray-200);
+ // border: 1px solid var(--gray-200);
.kg-header {
padding: 12px 16px;
- border-bottom: 1px solid var(--gray-200);
- background: var(--gray-50);
+ // border-bottom: 1px solid var(--gray-200);
+ background: var(--gray-25);
h4 {
margin: 0 0 4px 0;
diff --git a/web/src/components/ToolCallingResult/ToolResultRenderer.vue b/web/src/components/ToolCallingResult/ToolResultRenderer.vue
index 50733e18..9e05466f 100644
--- a/web/src/components/ToolCallingResult/ToolResultRenderer.vue
+++ b/web/src/components/ToolCallingResult/ToolResultRenderer.vue
@@ -177,12 +177,11 @@ defineExpose({
.default-result {
background: var(--gray-0);
border-radius: 8px;
- border: 1px solid var(--gray-200);
.default-header {
padding: 12px 16px;
- border-bottom: 1px solid var(--gray-200);
- background: var(--gray-50);
+ border-bottom: 1px solid var(--gray-100);
+ background: var(--gray-25);
h4 {
margin: 0;
@@ -211,7 +210,7 @@ defineExpose({
background: var(--gray-50);
padding: 10px;
border-radius: 4px;
- border-left: 2px solid var(--main-color);
+ // border-left: 2px solid var(--main-color);
}
}
}
diff --git a/web/src/components/ToolCallingResult/WebSearchResult.vue b/web/src/components/ToolCallingResult/WebSearchResult.vue
index e67b8c96..c6beda70 100644
--- a/web/src/components/ToolCallingResult/WebSearchResult.vue
+++ b/web/src/components/ToolCallingResult/WebSearchResult.vue
@@ -67,12 +67,10 @@ const formatDate = (dateString) => {
.web-search-result {
background: var(--gray-0);
border-radius: 8px;
- border: 1px solid var(--gray-200);
.search-header {
padding: 12px 16px;
- border-bottom: 1px solid var(--gray-200);
- background: var(--gray-50);
+ background: var(--gray-25);
h4 {
margin: 0 0 6px 0;
@@ -111,16 +109,10 @@ const formatDate = (dateString) => {
border: 1px solid var(--gray-200);
transition: all 0.2s ease;
- &:hover {
- border-color: var(--main-200);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
- }
-
.result-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
- margin-bottom: 8px;
.result-title {
margin: 0;
@@ -143,7 +135,7 @@ const formatDate = (dateString) => {
.result-score {
font-size: 11px;
color: var(--gray-600);
- background: var(--gray-100);
+ background: var(--gray-50);
padding: 2px 6px;
border-radius: 10px;
margin-left: 8px;