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;