style(ui): 统一工具调用结果组件的视觉样式
This commit is contained in:
Wenjie Zhang
parent
b8ba85654f
commit
04b0f92c2e
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -13,10 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { NumberOutlined, CopyOutlined } from '@ant-design/icons-vue'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { NumberOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
@ -25,15 +22,6 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const { copy } = useClipboard()
|
||||
|
||||
// 计算属性
|
||||
const isInteger = computed(() => Number.isInteger(props.data))
|
||||
|
||||
const showScientificNotation = computed(() => {
|
||||
const absValue = Math.abs(props.data)
|
||||
return absValue >= 1e6 || (absValue > 0 && absValue < 1e-3)
|
||||
})
|
||||
|
||||
// 方法
|
||||
const formatNumber = (num) => {
|
||||
@ -53,56 +41,16 @@ const formatNumber = (num) => {
|
||||
}).format(num)
|
||||
}
|
||||
|
||||
const getNumberType = () => {
|
||||
if (!isFinite(props.data)) {
|
||||
if (isNaN(props.data)) return 'NaN'
|
||||
return '无穷大'
|
||||
}
|
||||
|
||||
if (isInteger.value) {
|
||||
if (props.data === 0) return '零'
|
||||
if (props.data > 0) return '正整数'
|
||||
return '负整数'
|
||||
}
|
||||
|
||||
if (props.data > 0) return '正数'
|
||||
if (props.data < 0) return '负数'
|
||||
return '数字'
|
||||
}
|
||||
|
||||
const getNumberTypeColor = () => {
|
||||
if (!isFinite(props.data)) return 'red'
|
||||
if (props.data === 0) return 'default'
|
||||
if (props.data > 0) return 'green'
|
||||
return 'orange'
|
||||
}
|
||||
|
||||
const getDecimalPlaces = () => {
|
||||
if (isInteger.value) return 0
|
||||
const decimalPart = String(props.data).split('.')[1]
|
||||
return decimalPart ? decimalPart.length : 0
|
||||
}
|
||||
|
||||
const copyResult = async () => {
|
||||
try {
|
||||
await copy(String(props.data))
|
||||
message.success('计算结果已复制到剪贴板')
|
||||
} catch (error) {
|
||||
message.error('复制失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.calculator-result {
|
||||
background: var(--gray-0);
|
||||
background: var(--gray-25);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--gray-200);
|
||||
|
||||
.calc-header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
background: var(--gray-50);
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
@ -119,11 +67,7 @@ const copyResult = async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
background: var(--main-10);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--main-200);
|
||||
|
||||
.result-container {
|
||||
display: flex;
|
||||
@ -138,7 +82,7 @@ const copyResult = async () => {
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 20px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--main-color);
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
@ -151,42 +95,5 @@ const copyResult = async () => {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.scientific-notation {
|
||||
margin: 0 8px 8px 8px;
|
||||
padding: 8px 10px;
|
||||
background: var(--gray-50);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.notation-label {
|
||||
font-size: 12px;
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
.notation-value {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 13px;
|
||||
color: var(--main-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.number-info {
|
||||
padding: 0 8px 8px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
|
||||
.number-detail {
|
||||
color: var(--gray-600);
|
||||
background: var(--gray-100);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user