734 lines
21 KiB
Vue
734 lines
21 KiB
Vue
<template>
|
||
<div class="minimal-blocks-container">
|
||
<!-- 按真实顺序显示分组 -->
|
||
<template v-for="group in blockGroups" :key="group.id">
|
||
<!-- 摘要组（thinking/tool） -->
|
||
<div v-if="group.type === 'summary' && group.actions" class="summary-group">
|
||
<!-- 摘要行（只有文字，可点击展开） -->
|
||
<div
|
||
class="summary-line-text"
|
||
:class="{ running: isSummaryRunning(group.actions, group.id) }"
|
||
@click="toggleExpand(group.id)"
|
||
>
|
||
<div class="summary-content-wrapper">
|
||
<span class="summary-preview">
|
||
<template v-if="isSummaryRunning(group.actions, group.id)">
|
||
<span
|
||
v-for="(char, idx) in getAnimatedSummaryChars(getSummaryPreview(group.actions))"
|
||
:key="`${group.id}-${idx}`"
|
||
class="summary-char"
|
||
:style="{ animationDelay: `${(idx + 1) * 0.12}s` }"
|
||
>
|
||
{{ char === ' ' ? '\u00A0' : char }}
|
||
</span>
|
||
</template>
|
||
<template v-else>
|
||
{{ getSummaryPreview(group.actions) }}
|
||
</template>
|
||
</span>
|
||
</div>
|
||
<!-- 加载动画或完成图标 -->
|
||
<div class="summary-status-icon">
|
||
<component v-if="isSummaryRunning(group.actions, group.id)" :is="getSummaryLoader(group.id)" />
|
||
<svg v-else class="check-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<polyline points="7.5 12 10.5 15 16.5 9" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤容器（展开时显示所有步骤） -->
|
||
<div class="steps-container" :class="{ show: expandedGroups.has(group.id) }">
|
||
<div class="steps-wrapper">
|
||
<div
|
||
v-for="(step, idx) in getSummarySteps(group.actions)"
|
||
:key="step.id"
|
||
class="step-item"
|
||
>
|
||
<div class="step-timeline">
|
||
<span
|
||
class="step-icon icon icon-sm"
|
||
:style="getStepIconStyle(step)"
|
||
aria-hidden="true"
|
||
></span>
|
||
<div class="step-line"></div>
|
||
</div>
|
||
<div class="step-content">
|
||
<div v-if="step.type === 'thinking'" class="step-body">
|
||
<div
|
||
class="thinking-content"
|
||
:ref="el => registerThinking(step.id, el)"
|
||
@scroll="handleScroll(step.id, $event)"
|
||
v-html="renderContent(step.content)"
|
||
></div>
|
||
</div>
|
||
<div v-else-if="step.type === 'tool'" class="step-body">
|
||
<div class="step-header">{{ getToolName(step.action) }}</div>
|
||
<div class="tool-intent" v-if="getToolIntent(step.action)">{{ getToolIntent(step.action) }}</div>
|
||
<div class="tool-result" v-if="step.action.tool?.result">
|
||
<div v-html="renderToolResult(step.action)"></div>
|
||
</div>
|
||
<div v-else class="tool-result">
|
||
<div class="result-item">执行中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文本组 -->
|
||
<div v-else-if="group.type === 'text'" class="text-output" :class="{ 'streaming-text': group.streaming }">
|
||
<div class="text-content" :class="{ 'streaming-text': group.streaming }">
|
||
<div v-if="group.streaming" v-html="renderMarkdown(group.content || '', true)"></div>
|
||
<div v-else v-html="renderMarkdown(group.content || '', false)"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, nextTick, Component } from 'vue';
|
||
import { usePersonalizationStore } from '@/stores/personalization';
|
||
import { renderEnhancedToolResult } from './actions/toolRenderers';
|
||
import { getRandomLoader } from './loaders/index';
|
||
|
||
interface Action {
|
||
id?: string;
|
||
type: 'thinking' | 'tool' | 'text' | 'system';
|
||
content: string;
|
||
streaming?: boolean;
|
||
blockId?: string;
|
||
tool?: {
|
||
name?: string;
|
||
intent?: string;
|
||
arguments?: any;
|
||
result?: any;
|
||
};
|
||
}
|
||
|
||
interface Step {
|
||
id: string;
|
||
type: 'thinking' | 'tool';
|
||
content: string;
|
||
streaming: boolean;
|
||
action: Action;
|
||
}
|
||
|
||
interface BlockGroup {
|
||
type: 'summary' | 'text';
|
||
id: string;
|
||
actions?: Action[];
|
||
content?: string;
|
||
streaming?: boolean;
|
||
}
|
||
|
||
const props = defineProps<{
|
||
actions: Action[];
|
||
conversationRunning?: boolean;
|
||
isLatestMessage?: boolean;
|
||
iconStyle?: (name: string) => any;
|
||
getToolIcon?: (tool: any) => string;
|
||
getToolStatusText?: (tool: any) => string;
|
||
getToolDescription?: (tool: any) => string;
|
||
formatSearchTopic?: (filters: Record<string, any>) => string;
|
||
formatSearchTime?: (filters: Record<string, any>) => string;
|
||
formatSearchDomains?: (filters: Record<string, any>) => string;
|
||
renderMarkdown?: (content: string, isStreaming: boolean) => string;
|
||
registerThinkingRef?: (key: string, el: Element | null) => void;
|
||
handleThinkingScroll?: (blockId: string, event: Event) => void;
|
||
}>();
|
||
|
||
const personalizationStore = usePersonalizationStore();
|
||
const expandedGroups = ref(new Set<string>());
|
||
const thinkingRefs = new Map<string, HTMLElement>();
|
||
const summaryLoaders = new Map<string, Component>();
|
||
const SUMMARY_PREVIEW_MAX_CHARS = 25;
|
||
|
||
const truncateSummaryPreview = (raw: string) => {
|
||
const text = typeof raw === 'string' ? raw : '';
|
||
if (text.length > SUMMARY_PREVIEW_MAX_CHARS) {
|
||
return `${text.slice(0, SUMMARY_PREVIEW_MAX_CHARS)}...`;
|
||
}
|
||
return text;
|
||
};
|
||
|
||
const getAnimatedSummaryChars = (text: string) => Array.from(text || '');
|
||
|
||
// 获取摘要组的加载动画组件（每次action类型切换时随机一次）
|
||
const getSummaryLoader = (groupId: string) => {
|
||
const group = blockGroups.value.find(g => g.id === groupId);
|
||
if (!group || !group.actions) return getRandomLoader();
|
||
|
||
// 找到当前正在streaming的action，或最后一个action
|
||
const streamingAction = group.actions.find(a => a.streaming);
|
||
const currentAction = streamingAction || group.actions[group.actions.length - 1];
|
||
|
||
if (!currentAction) return getRandomLoader();
|
||
|
||
// 找到当前action之前最近的一个不同类型的action
|
||
// 用于判断是否发生了类型切换（thinking <-> tool）
|
||
const currentIndex = group.actions.indexOf(currentAction);
|
||
let lastDifferentTypeIndex = -1;
|
||
|
||
for (let i = currentIndex - 1; i >= 0; i--) {
|
||
if (group.actions[i].type !== currentAction.type) {
|
||
lastDifferentTypeIndex = i;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 使用"类型切换点"作为key
|
||
// 如果是第一个action，或者类型发生了切换，就会生成新的key
|
||
// 如果是相同类型的连续action（如多个工具并行），使用相同的key
|
||
const typeSegmentKey = lastDifferentTypeIndex >= 0
|
||
? `${group.actions[lastDifferentTypeIndex].id}-${currentAction.type}`
|
||
: `start-${currentAction.type}`;
|
||
|
||
const cacheKey = `${groupId}-${typeSegmentKey}`;
|
||
|
||
if (!summaryLoaders.has(cacheKey)) {
|
||
summaryLoaders.set(cacheKey, getRandomLoader());
|
||
}
|
||
return summaryLoaders.get(cacheKey);
|
||
};
|
||
|
||
// 将 actions 分组：连续的 thinking/tool 为一组，text 单独为一组
|
||
const blockGroups = computed(() => {
|
||
const groups: BlockGroup[] = [];
|
||
let currentGroup: Action[] = [];
|
||
let groupIndex = 0;
|
||
|
||
props.actions.forEach((action, idx) => {
|
||
if (action.type === 'thinking' || action.type === 'tool') {
|
||
currentGroup.push(action);
|
||
} else if (action.type === 'text') {
|
||
// 先保存当前的 thinking/tool 组
|
||
if (currentGroup.length > 0) {
|
||
// 使用第一个 action 的 id 作为 group id，保证稳定性
|
||
const firstActionId = currentGroup[0].id || currentGroup[0].blockId || `summary-${groupIndex}`;
|
||
groups.push({
|
||
type: 'summary',
|
||
id: `summary-${firstActionId}`,
|
||
actions: currentGroup
|
||
});
|
||
groupIndex++;
|
||
currentGroup = [];
|
||
}
|
||
// 添加 text 组
|
||
groups.push({
|
||
type: 'text',
|
||
id: `text-${idx}`,
|
||
content: action.content,
|
||
streaming: action.streaming
|
||
});
|
||
}
|
||
});
|
||
|
||
// 处理最后剩余的 thinking/tool 组
|
||
if (currentGroup.length > 0) {
|
||
// 使用第一个 action 的 id 作为 group id，保证稳定性
|
||
const firstActionId = currentGroup[0].id || currentGroup[0].blockId || `summary-${groupIndex}`;
|
||
groups.push({
|
||
type: 'summary',
|
||
id: `summary-${firstActionId}`,
|
||
actions: currentGroup
|
||
});
|
||
}
|
||
|
||
return groups;
|
||
});
|
||
|
||
// 获取摘要组的预览文本（始终显示最新的思考/工具）
|
||
const getSummaryPreview = (actions: Action[]) => {
|
||
// 优先返回正在 streaming 的最后一个
|
||
const streamingActions = actions.filter(a => a.streaming);
|
||
|
||
let currentStep;
|
||
if (streamingActions.length > 0) {
|
||
// 如果有 streaming 的，返回最后一个 streaming 的
|
||
currentStep = streamingActions[streamingActions.length - 1];
|
||
} else {
|
||
// 如果没有 streaming 的（全部完成了），优先返回最后一个工具
|
||
const toolActions = actions.filter(a => a.type === 'tool');
|
||
if (toolActions.length > 0) {
|
||
currentStep = toolActions[toolActions.length - 1];
|
||
} else {
|
||
// 如果没有工具，返回最后一个思考
|
||
currentStep = actions[actions.length - 1];
|
||
}
|
||
}
|
||
|
||
if (!currentStep) return '';
|
||
|
||
if (currentStep.type === 'thinking') {
|
||
// 思考内容：最多显示到第一个换行，且不超过25字符（不含...）
|
||
const content = currentStep.content || '';
|
||
const firstLineEnd = content.indexOf('\n');
|
||
const textToShow = firstLineEnd > 0 ? content.substring(0, firstLineEnd) : content;
|
||
return truncateSummaryPreview(textToShow);
|
||
} else if (currentStep.type === 'tool') {
|
||
// 工具：优先显示 intent_rendered 或 intent_full
|
||
const tool = currentStep.tool;
|
||
if (!tool) return '';
|
||
|
||
const intentEnabled = personalizationStore.form.tool_intent_enabled;
|
||
const intentText = tool.intent_rendered || tool.intent_full || '';
|
||
|
||
if (intentEnabled && intentText) {
|
||
// 开启intent模式且有intent时，只显示intent
|
||
const firstLineEnd = intentText.indexOf('\n');
|
||
const textToShow = firstLineEnd > 0 ? intentText.substring(0, firstLineEnd) : intentText;
|
||
return truncateSummaryPreview(textToShow);
|
||
}
|
||
|
||
// 没有intent或未开启intent模式时显示状态
|
||
if (tool.status === 'preparing') {
|
||
return `准备调用 ${tool.name || '工具'}...`;
|
||
}
|
||
if (tool.status === 'running') {
|
||
return `正在调用 ${tool.name || '工具'}...`;
|
||
}
|
||
if (tool.status === 'completed') {
|
||
return '工具执行完成';
|
||
}
|
||
return currentStep.streaming ? '正在执行工具...' : '工具执行完成';
|
||
}
|
||
return '';
|
||
};
|
||
|
||
// 判断摘要组是否正在运行（显示加载动画还是对勾）
|
||
const isSummaryRunning = (actions: Action[], groupId: string) => {
|
||
if (!props.conversationRunning || !props.isLatestMessage) {
|
||
return false;
|
||
}
|
||
|
||
// 找到当前 group 在 blockGroups 中的索引
|
||
const currentIndex = blockGroups.value.findIndex(g => g.id === groupId);
|
||
if (currentIndex === -1) return false;
|
||
|
||
// 检查后面是否有文本输出
|
||
const hasTextAfter = blockGroups.value.slice(currentIndex + 1).some(g => g.type === 'text');
|
||
|
||
// 只有当后面有文本输出时，才显示对勾（说明这个摘要组已经完成并开始输出了）
|
||
// 否则一直显示加载动画（即使工具执行完了，也要等下一个步骤或文本输出）
|
||
return !hasTextAfter;
|
||
};
|
||
|
||
// 获取摘要组的所有步骤（用于展开显示）
|
||
const getSummarySteps = (actions: Action[]) => {
|
||
return actions.map((action, idx) => ({
|
||
id: action.id || action.blockId || `step-${idx}`,
|
||
type: action.type as 'thinking' | 'tool',
|
||
content: action.content || '',
|
||
streaming: action.streaming || false,
|
||
action
|
||
}));
|
||
};
|
||
|
||
const toggleExpand = (groupId: string) => {
|
||
if (expandedGroups.value.has(groupId)) {
|
||
expandedGroups.value.delete(groupId);
|
||
|
||
// 折叠后，取消注册该组中的思考内容 ref
|
||
nextTick(() => {
|
||
const group = blockGroups.value.find(g => g.id === groupId);
|
||
if (group && group.actions) {
|
||
group.actions.forEach(action => {
|
||
if (action.type === 'thinking') {
|
||
const blockId = action.id || action.blockId;
|
||
if (blockId && typeof props.registerThinkingRef === 'function') {
|
||
props.registerThinkingRef(blockId, null);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
expandedGroups.value.add(groupId);
|
||
|
||
// 展开后，注册该组中的思考内容 ref
|
||
nextTick(() => {
|
||
const group = blockGroups.value.find(g => g.id === groupId);
|
||
if (group && group.actions) {
|
||
group.actions.forEach(action => {
|
||
if (action.type === 'thinking') {
|
||
const blockId = action.id || action.blockId;
|
||
if (blockId) {
|
||
const el = thinkingRefs.get(blockId);
|
||
if (el && typeof props.registerThinkingRef === 'function') {
|
||
props.registerThinkingRef(blockId, el);
|
||
// 如果正在 streaming，滚动到底部
|
||
if (action.streaming) {
|
||
el.scrollTop = el.scrollHeight;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
const getStepIconStyle = (step: Step) => {
|
||
if (step.type === 'thinking') {
|
||
return props.iconStyle ? props.iconStyle('brain') : {};
|
||
} else if (step.type === 'tool' && step.action.tool) {
|
||
const iconKey = props.getToolIcon ? props.getToolIcon(step.action.tool) : 'terminal';
|
||
return props.iconStyle ? props.iconStyle(iconKey) : {};
|
||
}
|
||
return props.iconStyle ? props.iconStyle('terminal') : {};
|
||
};
|
||
|
||
const getToolName = (action: Action) => {
|
||
const tool = action.tool;
|
||
if (!tool) return '执行工具';
|
||
|
||
const intentEnabled = personalizationStore.form.tool_intent_enabled;
|
||
const intentText = tool.intent_rendered || tool.intent_full || '';
|
||
|
||
if (intentEnabled && intentText) {
|
||
// 开启intent模式且有intent时，只显示intent
|
||
return intentText;
|
||
}
|
||
|
||
// 没有intent或未开启intent模式时显示状态
|
||
if (tool.status === 'preparing') {
|
||
return `准备调用 ${tool.name || '工具'}...`;
|
||
}
|
||
if (tool.status === 'running') {
|
||
return `正在调用 ${tool.name || '工具'}...`;
|
||
}
|
||
if (tool.status === 'completed') {
|
||
return '工具执行完成';
|
||
}
|
||
return tool.name || '执行工具';
|
||
};
|
||
|
||
const getToolIntent = (action: Action) => {
|
||
return action.tool?.intent || '';
|
||
};
|
||
|
||
const renderToolResult = (action: Action) => {
|
||
if (personalizationStore.form.enhanced_tool_display) {
|
||
const rendered = renderEnhancedToolResult(
|
||
action,
|
||
props.formatSearchTopic || (() => ''),
|
||
props.formatSearchTime || (() => ''),
|
||
props.formatSearchDomains || (() => '')
|
||
);
|
||
if (rendered) return rendered;
|
||
}
|
||
|
||
const result = action.tool?.result;
|
||
if (!result) return '<div class="result-item">执行中...</div>';
|
||
|
||
if (typeof result === 'string') {
|
||
return `<div class="result-item"><pre>${escapeHtml(result)}</pre></div>`;
|
||
}
|
||
|
||
return `<div class="result-item"><pre>${escapeHtml(JSON.stringify(result, null, 2))}</pre></div>`;
|
||
};
|
||
|
||
const renderContent = (content: string) => {
|
||
if (!content) return '';
|
||
return escapeHtml(content).replace(/\n/g, '<br>');
|
||
};
|
||
|
||
const renderMarkdown = (content: string, isStreaming: boolean) => {
|
||
if (props.renderMarkdown) {
|
||
return props.renderMarkdown(content, isStreaming);
|
||
}
|
||
// 降级：如果没有提供renderMarkdown，使用简单的HTML转义
|
||
return renderContent(content);
|
||
};
|
||
|
||
const escapeHtml = (text: string) => {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
};
|
||
|
||
const registerThinking = (key: string, el: Element | null) => {
|
||
// 本地保存一份，用于展开/折叠时管理
|
||
if (el instanceof HTMLElement) {
|
||
thinkingRefs.set(key, el);
|
||
} else {
|
||
thinkingRefs.delete(key);
|
||
}
|
||
|
||
// 检查当前思考内容所在的摘要是否展开
|
||
const group = blockGroups.value.find(g =>
|
||
g.type === 'summary' && g.actions && g.actions.some(a => (a.id === key || a.blockId === key))
|
||
);
|
||
|
||
// 只有展开的摘要中的思考内容才注册到父组件
|
||
if (group && expandedGroups.value.has(group.id)) {
|
||
if (typeof props.registerThinkingRef === 'function') {
|
||
props.registerThinkingRef(key, el);
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleScroll = (blockId: string, event: Event) => {
|
||
if (typeof props.handleThinkingScroll === 'function') {
|
||
props.handleThinkingScroll(blockId, event);
|
||
}
|
||
};
|
||
|
||
watch(() => props.actions, () => {
|
||
// 简化：不需要动态更新高度
|
||
}, { deep: true });
|
||
</script>
|
||
|
||
<style scoped>
|
||
.minimal-blocks-container {
|
||
margin: 16px 0;
|
||
}
|
||
|
||
/* 摘要组 */
|
||
.summary-group {
|
||
margin: 16px 0;
|
||
}
|
||
|
||
/* 摘要行（只有文字） */
|
||
.summary-line-text {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
align-items: start;
|
||
column-gap: 8px;
|
||
padding: 0 20px 0 15px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.summary-line-text:hover {
|
||
background-color: var(--claude-panel);
|
||
}
|
||
|
||
.summary-content-wrapper {
|
||
min-width: 0;
|
||
font-size: 15px;
|
||
color: var(--claude-text-secondary);
|
||
line-height: 1.7;
|
||
padding: 0;
|
||
}
|
||
|
||
.summary-preview {
|
||
display: block;
|
||
white-space: normal;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
color: inherit;
|
||
}
|
||
|
||
.summary-status-icon {
|
||
flex-shrink: 0;
|
||
margin-left: 0;
|
||
align-self: start;
|
||
margin-top: calc((1.7em - 18px) / 2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.check-icon {
|
||
color: var(--claude-text-tertiary);
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
/* 运行中文本：按字符依次闪烁 */
|
||
.summary-line-text.running .summary-char {
|
||
display: inline-block;
|
||
color: var(--claude-text-secondary);
|
||
animation: summaryPass 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes summaryPass {
|
||
0%,
|
||
100% {
|
||
color: var(--claude-text-secondary);
|
||
}
|
||
50% {
|
||
color: var(--claude-accent);
|
||
}
|
||
}
|
||
|
||
/* 步骤容器 */
|
||
.steps-container {
|
||
display: grid;
|
||
grid-template-rows: 0fr;
|
||
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
margin-top: 8px;
|
||
padding: 0 20px 0 15px;
|
||
}
|
||
|
||
.steps-wrapper {
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
.steps-container.show {
|
||
grid-template-rows: 1fr;
|
||
}
|
||
|
||
/* 步骤项 */
|
||
.step-item {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.step-item:not(:last-child) {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.step-timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
padding-top: 2px;
|
||
align-self: stretch; /* 填充整个 step-item 的高度 */
|
||
}
|
||
|
||
.step-icon {
|
||
flex-shrink: 0;
|
||
color: var(--claude-text-tertiary); /* 和竖线、字体一样的灰色 */
|
||
}
|
||
|
||
.step-line {
|
||
width: 2px;
|
||
flex: 1; /* 自动填充剩余空间 */
|
||
background: var(--claude-border);
|
||
margin-top: 4px;
|
||
margin-bottom: -14px; /* 延伸到下一个 step-item，保持上下距离 SVG 相等 */
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 最后一个步骤隐藏竖线 */
|
||
.step-item:last-child .step-line {
|
||
display: none;
|
||
}
|
||
|
||
.step-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding-top: 2px;
|
||
}
|
||
|
||
.step-header {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--claude-text-tertiary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.step-body {
|
||
font-size: 14px;
|
||
color: var(--claude-text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* 思考内容 */
|
||
.thinking-content {
|
||
color: var(--claude-text-secondary);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
max-height: calc(1.7em * 6); /* 6行 */
|
||
overflow-y: auto;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: block;
|
||
/* 让第一行文字中心和 SVG 中心对齐：向上移动半个行高减去半个字高 */
|
||
margin-top: calc((1em - 1.7em) / 2);
|
||
}
|
||
|
||
/* 工具内容 */
|
||
.step-header {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--claude-text-tertiary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin: 0 0 8px 0;
|
||
padding: 0;
|
||
line-height: 1;
|
||
}
|
||
.tool-intent {
|
||
font-weight: 500;
|
||
color: var(--claude-text);
|
||
margin-bottom: 12px;
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
/* 让第一行文字紧贴顶部 */
|
||
margin-top: calc((1.7em - 1em) / -2);
|
||
}
|
||
|
||
.tool-result {
|
||
background: var(--claude-panel);
|
||
border: 1px solid var(--claude-border);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
font-size: 13px;
|
||
max-height: 200px; /* 约为原来卡片的三分之一 */
|
||
overflow-y: auto;
|
||
/* 隐藏滚动条 */
|
||
scrollbar-width: none; /* Firefox */
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
}
|
||
|
||
.tool-result::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari, Opera */
|
||
}
|
||
|
||
.tool-result * {
|
||
/* 隐藏所有子元素的滚动条 */
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
|
||
.tool-result *::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.tool-result pre {
|
||
margin: 0;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||
font-size: 12px;
|
||
color: var(--claude-text-secondary);
|
||
}
|
||
|
||
.result-item {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--claude-border);
|
||
}
|
||
|
||
.result-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* 文本输出 */
|
||
.text-output {
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.text-content {
|
||
font-size: 15px;
|
||
line-height: 1.7;
|
||
color: var(--claude-text);
|
||
word-wrap: break-word;
|
||
}
|
||
</style>
|