feat(agent): 优化前端文件预览体验
This commit is contained in:
Wenjie Zhang
parent
b488e48d8e
commit
01a052de8a
@ -1,82 +1,43 @@
|
||||
<template>
|
||||
<section v-if="normalizedArtifacts.length" class="artifacts-card" :class="{ expanded }">
|
||||
<button type="button" class="artifacts-toggle" @click="expanded = !expanded">
|
||||
<div class="artifacts-summary">
|
||||
<FolderOutput class="artifacts-icon" :size="16" />
|
||||
<span class="artifacts-title">交付物</span>
|
||||
<span class="artifacts-count">{{ artifactsCountLabel }}</span>
|
||||
</div>
|
||||
<div class="artifacts-action">
|
||||
<span class="artifacts-action-text">{{ expanded ? '收起' : '展开' }}</span>
|
||||
<ChevronDown class="artifacts-arrow" :size="16" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="artifacts-panel" :class="{ expanded }">
|
||||
<div class="artifacts-panel-inner">
|
||||
<div class="output-list">
|
||||
<div v-for="file in normalizedArtifacts" :key="file.path" class="output-item">
|
||||
<div class="item-main" @click="openPreview(file)">
|
||||
<component
|
||||
:is="getFileIcon(file.path)"
|
||||
class="item-icon"
|
||||
:style="{ color: getFileIconColor(file.path) }"
|
||||
/>
|
||||
<div class="item-meta">
|
||||
<div class="item-name">{{ file.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<button class="item-action-btn" title="下载" @click.stop="downloadFile(file)">
|
||||
<Download :size="15" />
|
||||
</button>
|
||||
<button
|
||||
class="item-action-btn"
|
||||
:title="isSaving(file.path) ? '保存中' : '保存到工作区'"
|
||||
:disabled="isSaving(file.path)"
|
||||
@click.stop="saveToWorkspace(file)"
|
||||
>
|
||||
<LoaderCircle v-if="isSaving(file.path)" :size="15" class="item-action-spin" />
|
||||
<Save v-else :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<section v-if="normalizedArtifacts.length" class="artifacts-list">
|
||||
<div v-for="file in normalizedArtifacts" :key="file.path" class="artifact-card">
|
||||
<button type="button" class="item-main" :title="`打开 ${file.name}`" @click="openPreview(file)">
|
||||
<component
|
||||
:is="getFileIcon(file.path)"
|
||||
class="item-icon"
|
||||
:style="{ color: getFileIconColor(file.path) }"
|
||||
/>
|
||||
<div class="item-meta">
|
||||
<div class="item-name">{{ file.name }}</div>
|
||||
<div class="item-desc">{{ getFileMetaLabel(file.path) }}</div>
|
||||
</div>
|
||||
<span class="item-open-label">打开</span>
|
||||
</button>
|
||||
<div class="item-actions">
|
||||
<button class="item-action-btn" title="下载" @click.stop="downloadFile(file)">
|
||||
<Download :size="15" />
|
||||
</button>
|
||||
<button
|
||||
class="item-action-btn"
|
||||
:title="isSaving(file.path) ? '保存中' : '保存到工作区'"
|
||||
:disabled="isSaving(file.path)"
|
||||
@click.stop="saveToWorkspace(file)"
|
||||
>
|
||||
<LoaderCircle v-if="isSaving(file.path)" :size="15" class="item-action-spin" />
|
||||
<Save v-else :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
width="800px"
|
||||
:style="{ maxWidth: '90vw', top: '5vh' }"
|
||||
:bodyStyle="{ maxHeight: '90vh', overflow: 'auto' }"
|
||||
:footer="null"
|
||||
:closable="false"
|
||||
wrapClassName="agent-file-preview-modal"
|
||||
@cancel="closePreview"
|
||||
>
|
||||
<AgentFilePreview
|
||||
:file="currentFile"
|
||||
:filePath="currentFilePath"
|
||||
:showClose="true"
|
||||
:showDownload="true"
|
||||
:showFullscreen="true"
|
||||
@download="downloadFile"
|
||||
@close="closePreview"
|
||||
/>
|
||||
</a-modal>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onUnmounted, ref, watch } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ChevronDown, Download, FolderOutput, LoaderCircle, Save } from 'lucide-vue-next'
|
||||
import { Download, LoaderCircle, Save } from 'lucide-vue-next'
|
||||
import { threadApi } from '@/apis/agent_api'
|
||||
import AgentFilePreview from '@/components/AgentFilePreview.vue'
|
||||
import { getFileIcon, getFileIconColor } from '@/utils/file_utils'
|
||||
import { getPreviewTypeByPath } from '@/utils/file_preview'
|
||||
import { downloadViewerFile, getViewerFileContent } from '@/apis/viewer_filesystem'
|
||||
import { downloadViewerFile } from '@/apis/viewer_filesystem'
|
||||
|
||||
const props = defineProps({
|
||||
artifacts: {
|
||||
@ -96,7 +57,7 @@ const props = defineProps({
|
||||
default: null
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['saved'])
|
||||
const emit = defineEmits(['saved', 'open-preview'])
|
||||
|
||||
const normalizedArtifacts = computed(() =>
|
||||
(props.artifacts || [])
|
||||
@ -105,19 +66,10 @@ const normalizedArtifacts = computed(() =>
|
||||
const normalizedPath = path.trim()
|
||||
return {
|
||||
path: normalizedPath,
|
||||
name: normalizedPath.split('/').pop() || normalizedPath,
|
||||
canPreview: ['text', 'markdown', 'pdf', 'image'].includes(
|
||||
getPreviewTypeByPath(normalizedPath)
|
||||
)
|
||||
name: normalizedPath.split('/').pop() || normalizedPath
|
||||
}
|
||||
})
|
||||
)
|
||||
const artifactsCountLabel = computed(() => `${normalizedArtifacts.value.length} 个文件`)
|
||||
const expanded = ref(false)
|
||||
|
||||
const modalVisible = ref(false)
|
||||
const currentFile = ref(null)
|
||||
const currentFilePath = ref('')
|
||||
const savingState = ref({})
|
||||
|
||||
const parseDownloadFilename = (contentDisposition) => {
|
||||
@ -136,97 +88,43 @@ const parseDownloadFilename = (contentDisposition) => {
|
||||
return asciiMatch?.[1] || ''
|
||||
}
|
||||
|
||||
const revokeCurrentPreviewUrl = () => {
|
||||
const previewUrl = currentFile.value?.previewUrl
|
||||
if (previewUrl) {
|
||||
window.URL.revokeObjectURL(previewUrl)
|
||||
}
|
||||
const getFileMetaLabel = (path) => {
|
||||
const filename = String(path || '').split('/').pop() || ''
|
||||
if (!filename.includes('.')) return '交付文件'
|
||||
|
||||
const extension = filename.split('.').pop()
|
||||
return extension ? `交付文件 · ${extension.toUpperCase()}` : '交付文件'
|
||||
}
|
||||
|
||||
const closePreview = () => {
|
||||
revokeCurrentPreviewUrl()
|
||||
modalVisible.value = false
|
||||
currentFile.value = null
|
||||
currentFilePath.value = ''
|
||||
}
|
||||
|
||||
const openPreview = async (file) => {
|
||||
if (!props.threadId || !file?.path) return
|
||||
|
||||
revokeCurrentPreviewUrl()
|
||||
currentFilePath.value = file.path
|
||||
currentFile.value = {
|
||||
...file,
|
||||
content: 'Loading...',
|
||||
supported: true,
|
||||
previewType: 'text',
|
||||
message: '',
|
||||
previewUrl: ''
|
||||
}
|
||||
modalVisible.value = true
|
||||
|
||||
try {
|
||||
const res = await getViewerFileContent(
|
||||
props.threadId,
|
||||
file.path,
|
||||
props.agentId,
|
||||
props.agentConfigId
|
||||
)
|
||||
const previewType = res?.preview_type || 'text'
|
||||
let previewUrl = ''
|
||||
|
||||
if ((previewType === 'image' || previewType === 'pdf') && res?.supported) {
|
||||
const response = await downloadViewerFile(
|
||||
props.threadId,
|
||||
file.path,
|
||||
props.agentId,
|
||||
props.agentConfigId
|
||||
)
|
||||
const blob = await response.blob()
|
||||
previewUrl = window.URL.createObjectURL(blob)
|
||||
}
|
||||
|
||||
currentFile.value = {
|
||||
...file,
|
||||
content: res?.content ?? '',
|
||||
supported: res?.supported !== false,
|
||||
previewType,
|
||||
message: res?.message || '',
|
||||
previewUrl
|
||||
}
|
||||
} catch (error) {
|
||||
currentFile.value = {
|
||||
...file,
|
||||
content: `Error loading file: ${error?.message || 'unknown error'}`,
|
||||
supported: false,
|
||||
previewType: 'unsupported',
|
||||
message: error?.message || '文件预览失败',
|
||||
previewUrl: ''
|
||||
}
|
||||
}
|
||||
const openPreview = (file) => {
|
||||
emit('open-preview', file)
|
||||
}
|
||||
|
||||
const downloadFile = async (file) => {
|
||||
if (!props.threadId || !file?.path) return
|
||||
|
||||
const response = await downloadViewerFile(
|
||||
props.threadId,
|
||||
file.path,
|
||||
props.agentId,
|
||||
props.agentConfigId
|
||||
)
|
||||
const blob = await response.blob()
|
||||
const contentDisposition =
|
||||
response.headers.get('Content-Disposition') || response.headers.get('content-disposition')
|
||||
const filename = parseDownloadFilename(contentDisposition) || file.name
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = filename
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
window.URL.revokeObjectURL(url)
|
||||
try {
|
||||
const response = await downloadViewerFile(
|
||||
props.threadId,
|
||||
file.path,
|
||||
props.agentId,
|
||||
props.agentConfigId
|
||||
)
|
||||
const blob = await response.blob()
|
||||
const contentDisposition =
|
||||
response.headers.get('Content-Disposition') || response.headers.get('content-disposition')
|
||||
const filename = parseDownloadFilename(contentDisposition) || file.name
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = filename
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
window.URL.revokeObjectURL(url)
|
||||
} catch (error) {
|
||||
message.error(error?.message || '下载文件失败')
|
||||
}
|
||||
}
|
||||
|
||||
const isSaving = (path) => !!savingState.value[path]
|
||||
@ -252,170 +150,33 @@ const saveToWorkspace = async (file) => {
|
||||
setSaving(file.path, false)
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
revokeCurrentPreviewUrl()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => [props.threadId, normalizedArtifacts.value.map((file) => file.path).join('|')],
|
||||
() => {
|
||||
expanded.value = false
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.artifacts-card {
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
border-radius: 12px 12px 0 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gray-100);
|
||||
background: linear-gradient(180deg, var(--gray-25) 0%, var(--gray-0) 100%);
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&.expanded {
|
||||
.artifacts-toggle {
|
||||
border-bottom-color: var(--gray-150);
|
||||
}
|
||||
}
|
||||
.artifacts-list {
|
||||
width: 100%;
|
||||
margin: 8px 0 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.artifacts-toggle {
|
||||
.artifact-card {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
background: linear-gradient(180deg, var(--gray-25) 0%, var(--gray-50) 100%);
|
||||
color: var(--gray-900);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.artifacts-summary,
|
||||
.artifacts-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.artifacts-summary {
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.artifacts-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--gray-600);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.artifacts-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.artifacts-count {
|
||||
font-size: 12px;
|
||||
color: var(--gray-500);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.artifacts-action {
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.artifacts-action-text {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
.artifacts-arrow {
|
||||
flex-shrink: 0;
|
||||
color: var(--gray-600);
|
||||
transition: transform 0.24s ease;
|
||||
}
|
||||
|
||||
.artifacts-card.expanded .artifacts-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.artifacts-panel {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.28s ease;
|
||||
background: transparent;
|
||||
|
||||
&.expanded {
|
||||
max-height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.artifacts-panel-inner {
|
||||
padding: 4px 6px 6px;
|
||||
max-height: 232px;
|
||||
overflow-y: auto;
|
||||
background: var(--gray-0);
|
||||
}
|
||||
|
||||
.output-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.output-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid var(--gray-150);
|
||||
transition: background 0.18s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, var(--gray-25) 0%, var(--gray-0) 100%);
|
||||
transition:
|
||||
background 0.18s ease,
|
||||
border-color 0.18s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--gray-25);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.artifacts-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.artifacts-toggle {
|
||||
padding: 11px 12px;
|
||||
}
|
||||
|
||||
.artifacts-panel-inner {
|
||||
padding: 8px;
|
||||
max-height: 224px;
|
||||
}
|
||||
|
||||
.artifacts-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.artifacts-count,
|
||||
.artifacts-action-text {
|
||||
font-size: 12px;
|
||||
border-color: var(--main-200);
|
||||
background: var(--gray-0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -424,33 +185,55 @@ watch(
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
padding: 10px 8px 10px 12px;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
opacity: 0.82;
|
||||
font-size: 18px;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--gray-500);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.item-open-label {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--main-700);
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.item-action-btn {
|
||||
@ -472,7 +255,7 @@ watch(
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.item-action-btn:hover {
|
||||
.item-action-btn:hover:not(:disabled) {
|
||||
color: var(--main-700);
|
||||
background: var(--gray-100);
|
||||
}
|
||||
@ -492,14 +275,20 @@ watch(
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.output-item {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
.artifacts-list {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
.artifact-card {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.item-main {
|
||||
padding: 9px 6px 9px 12px;
|
||||
}
|
||||
|
||||
.item-open-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-content-container">
|
||||
<div class="chat-content-container" :class="{ 'has-agent-panel': isAgentPanelOpen }">
|
||||
<!-- Main Chat Area -->
|
||||
<div class="chat-main" ref="chatMainRef">
|
||||
<div class="chat-box">
|
||||
@ -48,6 +48,15 @@
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<AgentArtifactsCard
|
||||
v-if="shouldShowArtifacts(row.conv)"
|
||||
:artifacts="currentArtifacts"
|
||||
:thread-id="currentChatId"
|
||||
:agent-id="currentThread?.agent_id || currentAgentId"
|
||||
:agent-config-id="selectedAgentConfigId"
|
||||
@saved="handleArtifactSaved"
|
||||
@open-preview="openPanelPreview"
|
||||
/>
|
||||
<!-- 显示对话最后一个消息使用的模型 -->
|
||||
<RefsComponent
|
||||
v-if="shouldShowRefs(row.conv)"
|
||||
@ -73,6 +82,7 @@
|
||||
<span class="generating-text">正在生成回复...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="bottom" :class="{ 'start-screen': !conversations.length }">
|
||||
<!-- 人工审批弹窗 - 放在输入框上方 -->
|
||||
@ -139,14 +149,6 @@
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<AgentArtifactsCard
|
||||
:artifacts="currentArtifacts"
|
||||
:thread-id="currentChatId"
|
||||
:agent-id="currentThread?.agent_id || currentAgentId"
|
||||
:agent-config-id="selectedAgentConfigId"
|
||||
@saved="handleArtifactSaved"
|
||||
/>
|
||||
|
||||
<AgentInputArea
|
||||
v-model="userInput"
|
||||
:is-loading="isProcessing"
|
||||
@ -209,9 +211,17 @@
|
||||
:agent-id="currentThread?.agent_id || currentAgentId"
|
||||
:agent-config-id="selectedAgentConfigId"
|
||||
:panel-ratio="panelRatio"
|
||||
:preview-tabs="agentPanelPreviewTabs"
|
||||
:active-preview-path="agentPanelActivePreviewPath"
|
||||
:view-mode="agentPanelViewMode"
|
||||
@refresh="handleAgentStateRefresh"
|
||||
@resize="handlePanelResize"
|
||||
@resizing="handleResizingChange"
|
||||
@open-preview="openPanelPreview"
|
||||
@activate-preview="activatePanelPreview"
|
||||
@close-preview-tab="closePanelPreviewTab"
|
||||
@close-preview-path="closePanelPreviewPath"
|
||||
@view-mode-change="setAgentPanelViewMode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -352,14 +362,128 @@ const localUIState = reactive({
|
||||
// Agent Panel State
|
||||
const isAgentPanelOpen = ref(false)
|
||||
const isResizing = ref(false)
|
||||
const panelRatio = ref(0.3) // 面板宽度比例 (0-1)
|
||||
const defaultPanelRatio = 0.3
|
||||
const previewPanelRatio = 0.65
|
||||
const minPanelRatio = 0.25
|
||||
const maxPanelRatio = 0.75
|
||||
const minChatMainWidth = 350
|
||||
const panelRatio = ref(defaultPanelRatio) // 面板宽度比例 (0-1)
|
||||
const agentPanelPreviewTabs = ref([])
|
||||
const agentPanelActivePreviewPath = ref('')
|
||||
const agentPanelViewMode = ref('tree')
|
||||
const panelWrapperRef = ref(null) // 直接操作 DOM
|
||||
const minPanelRatio = 0.2 // 最小比例 20%
|
||||
const maxPanelRatio = 0.8 // 最大比例 80%
|
||||
let resizeStartX = 0
|
||||
let resizeStartWidth = 0
|
||||
let panelContainerWidth = 0
|
||||
|
||||
const getPanelContainerWidth = () => {
|
||||
const container = document.querySelector('.chat-content-container')
|
||||
return container ? container.clientWidth : window.innerWidth
|
||||
}
|
||||
|
||||
const getMaxPanelRatio = (containerWidth = getPanelContainerWidth()) => {
|
||||
if (!containerWidth) return maxPanelRatio
|
||||
return Math.max(minPanelRatio, Math.min(maxPanelRatio, (containerWidth - minChatMainWidth) / containerWidth))
|
||||
}
|
||||
|
||||
const clampPanelRatio = (ratio, containerWidth = getPanelContainerWidth()) => {
|
||||
return Math.max(minPanelRatio, Math.min(ratio, getMaxPanelRatio(containerWidth)))
|
||||
}
|
||||
|
||||
const getPanelFileName = (file) => {
|
||||
if (file?.name) return file.name
|
||||
if (file?.path) return String(file.path).split('/').pop() || String(file.path)
|
||||
return '未知文件'
|
||||
}
|
||||
|
||||
const normalizePanelPath = (path) => String(path || '').replace(/\/+$/, '')
|
||||
|
||||
const isSameOrChildPanelPath = (path, targetPath) => {
|
||||
const normalizedPath = normalizePanelPath(path)
|
||||
const normalizedTargetPath = normalizePanelPath(targetPath)
|
||||
if (!normalizedPath || !normalizedTargetPath) return false
|
||||
return (
|
||||
normalizedPath === normalizedTargetPath || normalizedPath.startsWith(`${normalizedTargetPath}/`)
|
||||
)
|
||||
}
|
||||
|
||||
const resetAgentPanelState = () => {
|
||||
isAgentPanelOpen.value = false
|
||||
panelRatio.value = defaultPanelRatio
|
||||
agentPanelPreviewTabs.value = []
|
||||
agentPanelActivePreviewPath.value = ''
|
||||
agentPanelViewMode.value = 'tree'
|
||||
}
|
||||
|
||||
const setAgentPanelViewMode = (mode) => {
|
||||
agentPanelViewMode.value = mode === 'preview' && agentPanelActivePreviewPath.value ? 'preview' : 'tree'
|
||||
|
||||
if (agentPanelActivePreviewPath.value) {
|
||||
panelRatio.value = clampPanelRatio(previewPanelRatio)
|
||||
}
|
||||
}
|
||||
|
||||
const activatePanelPreview = (path) => {
|
||||
if (!path) return
|
||||
agentPanelActivePreviewPath.value = path
|
||||
agentPanelViewMode.value = 'preview'
|
||||
panelRatio.value = clampPanelRatio(previewPanelRatio)
|
||||
}
|
||||
|
||||
const openPanelPreview = (file, keepTreeOpen = false) => {
|
||||
if (!file?.path) return
|
||||
|
||||
const tab = {
|
||||
...file,
|
||||
path: String(file.path),
|
||||
name: getPanelFileName(file)
|
||||
}
|
||||
const existingIndex = agentPanelPreviewTabs.value.findIndex((item) => item.path === tab.path)
|
||||
|
||||
if (existingIndex >= 0) {
|
||||
agentPanelPreviewTabs.value = agentPanelPreviewTabs.value.map((item, index) =>
|
||||
index === existingIndex ? { ...item, ...tab } : item
|
||||
)
|
||||
} else {
|
||||
agentPanelPreviewTabs.value = [...agentPanelPreviewTabs.value, tab]
|
||||
}
|
||||
|
||||
isAgentPanelOpen.value = true
|
||||
panelRatio.value = clampPanelRatio(previewPanelRatio)
|
||||
agentPanelActivePreviewPath.value = tab.path
|
||||
agentPanelViewMode.value = keepTreeOpen ? 'tree' : 'preview'
|
||||
}
|
||||
|
||||
const closePanelPreviewTab = (path) => {
|
||||
if (!path) return
|
||||
|
||||
const closingIndex = agentPanelPreviewTabs.value.findIndex((item) => item.path === path)
|
||||
const nextTabs = agentPanelPreviewTabs.value.filter((item) => item.path !== path)
|
||||
agentPanelPreviewTabs.value = nextTabs
|
||||
|
||||
if (agentPanelActivePreviewPath.value !== path) return
|
||||
|
||||
const nextActiveTab = nextTabs[Math.min(closingIndex, nextTabs.length - 1)]
|
||||
agentPanelActivePreviewPath.value = nextActiveTab?.path || ''
|
||||
agentPanelViewMode.value = nextActiveTab ? 'preview' : 'tree'
|
||||
}
|
||||
|
||||
const closePanelPreviewPath = (targetPath) => {
|
||||
if (!targetPath) return
|
||||
|
||||
const nextTabs = agentPanelPreviewTabs.value.filter(
|
||||
(item) => !isSameOrChildPanelPath(item.path, targetPath)
|
||||
)
|
||||
const shouldCloseActive = isSameOrChildPanelPath(agentPanelActivePreviewPath.value, targetPath)
|
||||
agentPanelPreviewTabs.value = nextTabs
|
||||
|
||||
if (!shouldCloseActive) return
|
||||
|
||||
const nextActiveTab = nextTabs[0]
|
||||
agentPanelActivePreviewPath.value = nextActiveTab?.path || ''
|
||||
agentPanelViewMode.value = nextActiveTab ? 'preview' : 'tree'
|
||||
}
|
||||
|
||||
// ==================== COMPUTED PROPERTIES ====================
|
||||
const currentAgentId = computed(() => {
|
||||
if (props.singleMode) {
|
||||
@ -457,6 +581,14 @@ const shouldShowRefs = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const shouldShowArtifacts = computed(() => {
|
||||
return (conv) => {
|
||||
if (!currentArtifacts.value.length || conv.status === 'streaming') return false
|
||||
const latestConv = conversations.value[conversations.value.length - 1]
|
||||
return latestConv === conv
|
||||
}
|
||||
})
|
||||
|
||||
// 当前线程状态的computed属性
|
||||
const currentThreadState = computed(() => {
|
||||
return getThreadState(currentChatId.value)
|
||||
@ -1169,7 +1301,7 @@ const selectChat = async (chatId) => {
|
||||
}
|
||||
|
||||
if (previousThreadId !== chatId) {
|
||||
isAgentPanelOpen.value = false
|
||||
resetAgentPanelState()
|
||||
}
|
||||
|
||||
try {
|
||||
@ -1222,7 +1354,7 @@ const selectThreadFromRoute = async (threadId) => {
|
||||
stopThreadStream(previousThreadId)
|
||||
stopRunStreamSubscription(previousThreadId)
|
||||
}
|
||||
isAgentPanelOpen.value = false
|
||||
resetAgentPanelState()
|
||||
setCurrentThreadId(null)
|
||||
return true
|
||||
}
|
||||
@ -1536,6 +1668,10 @@ const toggleAgentPanel = async () => {
|
||||
isAgentPanelOpen.value = nextOpen
|
||||
|
||||
if (nextOpen) {
|
||||
agentPanelViewMode.value = agentPanelActivePreviewPath.value ? 'preview' : 'tree'
|
||||
panelRatio.value = agentPanelActivePreviewPath.value
|
||||
? clampPanelRatio(previewPanelRatio)
|
||||
: clampPanelRatio(defaultPanelRatio)
|
||||
await handleAgentStateRefresh()
|
||||
}
|
||||
}
|
||||
@ -1546,16 +1682,20 @@ const handlePanelResize = (clientX) => {
|
||||
if (!panelWrapperRef.value) return
|
||||
|
||||
if (!panelContainerWidth) {
|
||||
const container = document.querySelector('.chat-content-container')
|
||||
panelContainerWidth = container ? container.clientWidth : window.innerWidth
|
||||
panelContainerWidth = getPanelContainerWidth()
|
||||
}
|
||||
|
||||
const deltaX = clientX - resizeStartX
|
||||
const newWidth = resizeStartWidth - deltaX
|
||||
const newRatio = newWidth / panelContainerWidth
|
||||
const rawWidth = resizeStartWidth - deltaX
|
||||
const minWidth = minPanelRatio * panelContainerWidth
|
||||
const maxWidth = getMaxPanelRatio(panelContainerWidth) * panelContainerWidth
|
||||
const nextWidth = Math.max(minWidth, Math.min(rawWidth, maxWidth))
|
||||
|
||||
if (newRatio >= minPanelRatio && newRatio <= maxPanelRatio) {
|
||||
panelWrapperRef.value.style.setProperty('flex', `0 0 ${newWidth}px`, 'important')
|
||||
panelWrapperRef.value.style.setProperty('flex', `0 0 ${nextWidth}px`, 'important')
|
||||
|
||||
if (nextWidth !== rawWidth) {
|
||||
resizeStartX = clientX
|
||||
resizeStartWidth = nextWidth
|
||||
}
|
||||
}
|
||||
|
||||
@ -1567,15 +1707,14 @@ const handleResizingChange = (isResizingState, clientX = 0) => {
|
||||
resizeStartX = clientX
|
||||
resizeStartWidth = panelWrapperRef.value.offsetWidth
|
||||
if (!panelContainerWidth) {
|
||||
const container = document.querySelector('.chat-content-container')
|
||||
panelContainerWidth = container ? container.clientWidth : window.innerWidth
|
||||
panelContainerWidth = getPanelContainerWidth()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (!isResizingState && panelWrapperRef.value && panelContainerWidth) {
|
||||
const finalWidth = panelWrapperRef.value.offsetWidth
|
||||
panelRatio.value = finalWidth / panelContainerWidth
|
||||
panelRatio.value = clampPanelRatio(finalWidth / panelContainerWidth, panelContainerWidth)
|
||||
panelWrapperRef.value.style.removeProperty('flex')
|
||||
resizeStartX = 0
|
||||
resizeStartWidth = 0
|
||||
@ -1738,6 +1877,7 @@ const loadChatsList = async () => {
|
||||
if (props.singleMode && !agentId) {
|
||||
console.warn('No agent selected, cannot load chats list')
|
||||
threads.value = []
|
||||
resetAgentPanelState()
|
||||
setCurrentThreadId(null)
|
||||
threadFilesMap.value = {}
|
||||
threadAttachmentsMap.value = {}
|
||||
@ -1796,6 +1936,7 @@ watch(
|
||||
threadMessages.value = {}
|
||||
threadFilesMap.value = {}
|
||||
threadAttachmentsMap.value = {}
|
||||
resetAgentPanelState()
|
||||
// 清理所有线程状态
|
||||
resetOnGoingConv()
|
||||
|
||||
@ -1974,6 +2115,7 @@ watch(currentChatId, (threadId, oldThreadId) => {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
margin-left: 0;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.agent-panel-wrapper.no-transition {
|
||||
@ -2311,7 +2453,26 @@ watch(currentChatId, (threadId, oldThreadId) => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chat-content-container.has-agent-panel .chat-main {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.agent-panel-wrapper.is-visible {
|
||||
max-width: calc(100% - 350px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chat-content-container.has-agent-panel .chat-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.agent-panel-wrapper.is-visible {
|
||||
min-width: 280px;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.agent-segment-wrapper {
|
||||
margin-bottom: 8px;
|
||||
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="agent-file-preview" :class="[containerClass, { 'is-full-height': fullHeight }]">
|
||||
<div
|
||||
class="agent-file-preview"
|
||||
:class="[containerClass, { 'is-full-height': fullHeight, 'is-borderless': borderless }]"
|
||||
>
|
||||
<div v-if="showHeader" class="preview-header">
|
||||
<div class="file-title">
|
||||
<component
|
||||
v-if="showFileIcon"
|
||||
:is="getFileIcon(filePath)"
|
||||
:style="{ color: getFileIconColor(filePath), fontSize: '18px' }"
|
||||
/>
|
||||
@ -86,7 +90,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="file-content" :class="contentClass">
|
||||
<div class="file-content" :class="{contentClass, 'is-iframe-preview': file?.previewType === 'pdf' || (isHtmlFile && htmlPreviewMode === 'render') }">
|
||||
<div v-if="canEdit && editMode === 'edit'" class="edit-floating-actions">
|
||||
<span v-if="draftChanged" class="edit-status-badge">修改未保存</span>
|
||||
<button
|
||||
@ -307,6 +311,14 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showFileIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
borderless: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -455,14 +467,20 @@ onUnmounted(() => {
|
||||
min-width: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.agent-file-preview.is-full-height {
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.agent-file-preview.is-full-height {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.agent-file-preview.is-borderless {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
@ -554,10 +572,13 @@ onUnmounted(() => {
|
||||
|
||||
.file-content {
|
||||
min-height: 300px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
border-radius: 0px;
|
||||
|
||||
&.is-iframe-preview {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
@ -691,17 +712,17 @@ onUnmounted(() => {
|
||||
|
||||
.file-content-pre.code-highlight {
|
||||
border-radius: 8px;
|
||||
background: var(--gray-25);
|
||||
background: var(--gray-0);
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.file-content-pre.code-highlight code {
|
||||
padding: 14px 16px;
|
||||
display: block;
|
||||
white-space: pre;
|
||||
color: inherit;
|
||||
min-height: calc(80vh - 40px);
|
||||
background: var(--gray-0);
|
||||
}
|
||||
|
||||
.image-preview-wrapper {
|
||||
@ -713,6 +734,7 @@ onUnmounted(() => {
|
||||
.image-preview {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: calc(80vh - 32px);
|
||||
object-fit: contain;
|
||||
border-radius: 6px;
|
||||
@ -720,6 +742,7 @@ onUnmounted(() => {
|
||||
|
||||
.pdf-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: calc(80vh - 40px);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
@ -729,6 +752,7 @@ onUnmounted(() => {
|
||||
.html-preview {
|
||||
width: 100%;
|
||||
min-height: calc(80vh - 40px);
|
||||
height: 100vh;
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
background: #fff; // HTML 内容通常需要白色背景以保证可读性
|
||||
@ -743,6 +767,7 @@ onUnmounted(() => {
|
||||
color: var(--gray-600);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
height: 100%;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
||||
@ -1,123 +1,140 @@
|
||||
<template>
|
||||
<div ref="panelRef" class="agent-panel" :class="{ resizing: isResizing }">
|
||||
<!-- 拖拽手柄 -->
|
||||
<div class="agent-panel" :class="{ resizing: isResizing }">
|
||||
<div class="resize-handle" @pointerdown="startResize"></div>
|
||||
<div class="panel-header">
|
||||
<div class="panel-header-main">
|
||||
<div class="panel-title">
|
||||
<span><strong>文件系统</strong></span>
|
||||
</div>
|
||||
<div class="window-actions">
|
||||
<button class="header-action-btn" title="刷新" @click="emitRefresh">
|
||||
<RefreshCw :size="15" />
|
||||
</button>
|
||||
<div class="panel-title">
|
||||
<div v-if="hasActivePreview && normalizedPreviewTabs.length" class="preview-tabs-bar">
|
||||
<div
|
||||
v-for="tab in normalizedPreviewTabs"
|
||||
:key="tab.path"
|
||||
class="preview-tab"
|
||||
:class="{ active: tab.path === activePreviewPath }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="preview-tab-main"
|
||||
:title="tab.path"
|
||||
@click="activatePreviewTab(tab.path)"
|
||||
>
|
||||
<component
|
||||
:is="getFileIcon(tab.path)"
|
||||
class="preview-tab-icon"
|
||||
:style="{ color: getFileIconColor(tab.path) }"
|
||||
/>
|
||||
<span class="preview-tab-name">{{ tab.name }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="preview-tab-close"
|
||||
title="关闭预览"
|
||||
aria-label="关闭预览"
|
||||
@click.stop="closePreviewTab(tab.path)"
|
||||
>
|
||||
<X :size="13" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span v-else><strong>文件</strong></span>
|
||||
</div>
|
||||
<div class="window-actions">
|
||||
<button
|
||||
v-if="hasActivePreview"
|
||||
class="header-action-btn"
|
||||
:class="{ active: treePaneVisible }"
|
||||
:title="treePaneVisible ? '隐藏文件列表' : '查看文件列表'"
|
||||
:aria-label="treePaneVisible ? '隐藏文件列表' : '查看文件列表'"
|
||||
@click="toggleFileTree"
|
||||
>
|
||||
<FolderKanban :size="15" />
|
||||
</button>
|
||||
<button class="header-action-btn" title="刷新" aria-label="刷新" @click="emitRefresh">
|
||||
<RefreshCw :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="files-display">
|
||||
<div v-if="!threadId" class="empty">创建对话后可查看工作区</div>
|
||||
<div v-else-if="loadingFiles" class="empty">正在加载文件系统...</div>
|
||||
<div v-else-if="filesystemError" class="empty error-state">
|
||||
<div>{{ filesystemError }}</div>
|
||||
<a-button type="link" size="small" @click="refreshFileSystem">重试</a-button>
|
||||
</div>
|
||||
<div v-else-if="!fileTreeData.length" class="empty">当前工作区为空</div>
|
||||
<div v-else class="files-workspace" :class="{ 'is-inline-preview': useInlinePreview }">
|
||||
<div class="file-tree-pane">
|
||||
<div class="file-tree-container">
|
||||
<FileTreeComponent
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
:tree-data="fileTreeData"
|
||||
:load-data="loadData"
|
||||
@select="onFileSelect"
|
||||
>
|
||||
<template #title="{ node }">
|
||||
<div class="tree-node-name" :title="node.title">
|
||||
<span class="name-start">{{ node.nameStart || node.title }}</span>
|
||||
<span class="name-end" v-if="node.nameEnd">{{ node.nameEnd }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ node }">
|
||||
<div class="node-actions-container">
|
||||
<button
|
||||
v-if="node.isLeaf"
|
||||
class="tree-action-btn tree-download-btn"
|
||||
@click.stop="downloadFile(node.fileData)"
|
||||
title="下载文件"
|
||||
>
|
||||
<Download :size="14" />
|
||||
</button>
|
||||
<button
|
||||
class="tree-action-btn tree-delete-btn"
|
||||
:disabled="deletingPaths.has(node.key)"
|
||||
@click.stop="confirmDeleteNode(node)"
|
||||
:title="node.isLeaf ? '删除文件' : '删除文件夹'"
|
||||
>
|
||||
<Trash2 :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</FileTreeComponent>
|
||||
</div>
|
||||
<div class="files-display" :class="{ 'has-preview': hasActivePreview, 'with-tree': treePaneVisible }">
|
||||
<div v-if="hasActivePreview" class="preview-pane">
|
||||
<AgentFilePreview
|
||||
v-if="currentFile"
|
||||
containerClass="side-preview-shell"
|
||||
contentClass="side-file-content"
|
||||
:file="currentFile"
|
||||
:filePath="currentFilePath"
|
||||
:fullHeight="true"
|
||||
:showFileIcon="false"
|
||||
:borderless="true"
|
||||
:showClose="false"
|
||||
:showDownload="true"
|
||||
:showFullscreen="true"
|
||||
@download="downloadFile"
|
||||
/>
|
||||
<div v-else class="preview-empty">
|
||||
<div class="preview-empty-title">选择交付物后可在此预览</div>
|
||||
<div class="preview-empty-desc">也可以打开文件列表，浏览当前工作区文件。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="useInlinePreview" class="inline-preview-pane">
|
||||
<AgentFilePreview
|
||||
v-if="currentFile"
|
||||
containerClass="inline-preview-shell"
|
||||
contentClass="inline-file-content"
|
||||
:file="currentFile"
|
||||
:filePath="currentFilePath"
|
||||
:fullHeight="true"
|
||||
:showClose="true"
|
||||
closeVariant="collapse-right"
|
||||
:showDownload="true"
|
||||
:showFullscreen="true"
|
||||
@download="downloadFile"
|
||||
@close="closePreview"
|
||||
/>
|
||||
<div v-else class="inline-preview-empty">
|
||||
<div class="inline-preview-empty-title">选择文件后可在此预览</div>
|
||||
<div class="inline-preview-empty-desc">
|
||||
当前宽度足够，预览会直接显示在工作台右侧。
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="treePaneVisible" class="tree-pane">
|
||||
<div v-if="!threadId" class="empty">创建对话后可查看工作区</div>
|
||||
<div v-else-if="loadingFiles" class="empty">正在加载文件系统...</div>
|
||||
<div v-else-if="filesystemError" class="empty error-state">
|
||||
<div>{{ filesystemError }}</div>
|
||||
<a-button type="link" size="small" @click="refreshFileSystem">重试</a-button>
|
||||
</div>
|
||||
<div v-else-if="!fileTreeData.length" class="empty">当前工作区为空</div>
|
||||
<div v-else class="file-tree-container">
|
||||
<FileTreeComponent
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
:tree-data="fileTreeData"
|
||||
:load-data="loadData"
|
||||
@select="onFileSelect"
|
||||
>
|
||||
<template #title="{ node }">
|
||||
<div class="tree-node-name" :title="node.title">
|
||||
<span class="name-start">{{ node.nameStart || node.title }}</span>
|
||||
<span class="name-end" v-if="node.nameEnd">{{ node.nameEnd }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ node }">
|
||||
<div class="node-actions-container">
|
||||
<button
|
||||
v-if="node.isLeaf"
|
||||
class="tree-action-btn tree-download-btn"
|
||||
@click.stop="downloadFile(node.fileData)"
|
||||
title="下载文件"
|
||||
aria-label="下载文件"
|
||||
>
|
||||
<Download :size="14" />
|
||||
</button>
|
||||
<button
|
||||
class="tree-action-btn tree-delete-btn"
|
||||
:disabled="deletingPaths.has(node.key)"
|
||||
@click.stop="confirmDeleteNode(node)"
|
||||
:title="node.isLeaf ? '删除文件' : '删除文件夹'"
|
||||
:aria-label="node.isLeaf ? '删除文件' : '删除文件夹'"
|
||||
>
|
||||
<Trash2 :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</FileTreeComponent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
width="800px"
|
||||
:style="{ maxWidth: '90vw', top: '5vh' }"
|
||||
:bodyStyle="{ maxHeight: '90vh', overflow: 'auto' }"
|
||||
:footer="null"
|
||||
:closable="false"
|
||||
wrapClassName="agent-file-preview-modal"
|
||||
@cancel="closePreview"
|
||||
>
|
||||
<AgentFilePreview
|
||||
:file="currentFile"
|
||||
:filePath="currentFilePath"
|
||||
:showClose="true"
|
||||
:showDownload="true"
|
||||
:showFullscreen="true"
|
||||
@download="downloadFile"
|
||||
@close="closePreview"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { Download, RefreshCw, Trash2 } from 'lucide-vue-next'
|
||||
import { Download, FolderKanban, RefreshCw, Trash2, X } from 'lucide-vue-next'
|
||||
import { Modal, message } from 'ant-design-vue'
|
||||
import FileTreeComponent from '@/components/FileTreeComponent.vue'
|
||||
import AgentFilePreview from '@/components/AgentFilePreview.vue'
|
||||
import { getFileIcon, getFileIconColor } from '@/utils/file_utils'
|
||||
import {
|
||||
deleteViewerFile,
|
||||
downloadViewerFile,
|
||||
@ -145,27 +162,60 @@ const props = defineProps({
|
||||
panelRatio: {
|
||||
type: Number,
|
||||
default: 0.35
|
||||
},
|
||||
previewTabs: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
activePreviewPath: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
viewMode: {
|
||||
type: String,
|
||||
default: 'tree',
|
||||
validator: (value) => ['tree', 'preview'].includes(value)
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['refresh', 'resize', 'resizing'])
|
||||
const INLINE_PREVIEW_MIN_WIDTH = 920
|
||||
const emit = defineEmits([
|
||||
'refresh',
|
||||
'resize',
|
||||
'resizing',
|
||||
'open-preview',
|
||||
'activate-preview',
|
||||
'close-preview-tab',
|
||||
'close-preview-path',
|
||||
'view-mode-change'
|
||||
])
|
||||
const DISPLAY_ROOT_DIRECTORY_NAME = 'user-data'
|
||||
|
||||
const panelRef = ref(null)
|
||||
const modalVisible = ref(false)
|
||||
const currentFile = ref(null)
|
||||
const currentFilePath = ref('')
|
||||
const loadingFiles = ref(false)
|
||||
const filesystemError = ref('')
|
||||
const panelWidth = ref(0)
|
||||
|
||||
const dynamicTreeData = ref([])
|
||||
const selectedKeys = ref([])
|
||||
const expandedKeys = ref([])
|
||||
const deletingPaths = ref(new Set())
|
||||
const isResizing = ref(false)
|
||||
|
||||
const useInlinePreview = computed(() => panelWidth.value >= INLINE_PREVIEW_MIN_WIDTH)
|
||||
const normalizedPreviewTabs = computed(() =>
|
||||
(props.previewTabs || [])
|
||||
.filter((file) => file?.path)
|
||||
.map((file) => ({
|
||||
...file,
|
||||
path: String(file.path),
|
||||
name: file.name || getFileName(file)
|
||||
}))
|
||||
)
|
||||
const hasActivePreview = computed(() => Boolean(props.activePreviewPath))
|
||||
const treePaneVisible = computed(() => !hasActivePreview.value || props.viewMode === 'tree')
|
||||
const activePreviewTab = computed(
|
||||
() => normalizedPreviewTabs.value.find((file) => file.path === props.activePreviewPath) || null
|
||||
)
|
||||
const fileTreeData = computed(() => dynamicTreeData.value)
|
||||
|
||||
const buildDisplayName = (fullPath) => {
|
||||
const normalized = String(fullPath || '').replace(/\/+$/, '')
|
||||
@ -283,6 +333,7 @@ const parseDownloadFilename = (contentDisposition) => {
|
||||
}
|
||||
|
||||
const getFileName = (fileItem) => {
|
||||
if (fileItem?.name) return fileItem.name
|
||||
if (fileItem?.path) {
|
||||
return String(fileItem.path).split('/').pop() || String(fileItem.path)
|
||||
}
|
||||
@ -325,7 +376,7 @@ const refreshFileSystem = async () => {
|
||||
? await loadDirectoryChildren(displayRootEntry.path)
|
||||
: []
|
||||
expandedKeys.value = []
|
||||
selectedKeys.value = []
|
||||
selectedKeys.value = props.activePreviewPath ? [props.activePreviewPath] : []
|
||||
} else {
|
||||
dynamicTreeData.value = []
|
||||
}
|
||||
@ -349,9 +400,7 @@ const loadData = async (treeNode) => {
|
||||
}
|
||||
}
|
||||
|
||||
const fileTreeData = computed(() => dynamicTreeData.value)
|
||||
|
||||
let panelResizeObserver = null
|
||||
let previewRequestSeq = 0
|
||||
|
||||
const revokeCurrentPreviewUrl = () => {
|
||||
const previewUrl = currentFile.value?.previewUrl
|
||||
@ -360,26 +409,39 @@ const revokeCurrentPreviewUrl = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const onFileSelect = async (nextSelectedKeys, { node }) => {
|
||||
selectedKeys.value = nextSelectedKeys
|
||||
if (!node?.isLeaf || !props.threadId) return
|
||||
const loadActivePreview = async () => {
|
||||
const filePath = props.activePreviewPath
|
||||
const requestSeq = ++previewRequestSeq
|
||||
|
||||
revokeCurrentPreviewUrl()
|
||||
currentFilePath.value = node.key
|
||||
|
||||
if (!filePath || !props.threadId) {
|
||||
currentFile.value = null
|
||||
currentFilePath.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
const baseFile = {
|
||||
...(activePreviewTab.value || {}),
|
||||
path: filePath,
|
||||
name: activePreviewTab.value?.name || getFileName({ path: filePath }),
|
||||
type: 'file'
|
||||
}
|
||||
|
||||
currentFilePath.value = filePath
|
||||
currentFile.value = {
|
||||
...node.fileData,
|
||||
...baseFile,
|
||||
content: 'Loading...',
|
||||
supported: true,
|
||||
previewType: 'text',
|
||||
message: '',
|
||||
previewUrl: ''
|
||||
}
|
||||
modalVisible.value = !useInlinePreview.value
|
||||
|
||||
try {
|
||||
const res = await getViewerFileContent(
|
||||
props.threadId,
|
||||
node.key,
|
||||
filePath,
|
||||
props.agentId,
|
||||
props.agentConfigId
|
||||
)
|
||||
@ -389,7 +451,7 @@ const onFileSelect = async (nextSelectedKeys, { node }) => {
|
||||
if ((previewType === 'image' || previewType === 'pdf') && res?.supported) {
|
||||
const response = await downloadViewerFile(
|
||||
props.threadId,
|
||||
node.key,
|
||||
filePath,
|
||||
props.agentId,
|
||||
props.agentConfigId
|
||||
)
|
||||
@ -397,8 +459,13 @@ const onFileSelect = async (nextSelectedKeys, { node }) => {
|
||||
previewUrl = window.URL.createObjectURL(blob)
|
||||
}
|
||||
|
||||
if (requestSeq !== previewRequestSeq) {
|
||||
if (previewUrl) window.URL.revokeObjectURL(previewUrl)
|
||||
return
|
||||
}
|
||||
|
||||
currentFile.value = {
|
||||
...node.fileData,
|
||||
...baseFile,
|
||||
content: res?.content ?? '',
|
||||
supported: res?.supported !== false,
|
||||
previewType,
|
||||
@ -406,8 +473,10 @@ const onFileSelect = async (nextSelectedKeys, { node }) => {
|
||||
previewUrl
|
||||
}
|
||||
} catch (error) {
|
||||
if (requestSeq !== previewRequestSeq) return
|
||||
|
||||
currentFile.value = {
|
||||
...node.fileData,
|
||||
...baseFile,
|
||||
content: `Error loading file: ${error?.message || 'unknown error'}`,
|
||||
supported: false,
|
||||
previewType: 'unsupported',
|
||||
@ -417,21 +486,28 @@ const onFileSelect = async (nextSelectedKeys, { node }) => {
|
||||
}
|
||||
}
|
||||
|
||||
const closePreview = () => {
|
||||
revokeCurrentPreviewUrl()
|
||||
modalVisible.value = false
|
||||
currentFile.value = null
|
||||
currentFilePath.value = ''
|
||||
selectedKeys.value = []
|
||||
const onFileSelect = (nextSelectedKeys, { node }) => {
|
||||
selectedKeys.value = nextSelectedKeys
|
||||
if (!node?.isLeaf || !props.threadId) return
|
||||
emit('open-preview', node.fileData, true)
|
||||
}
|
||||
|
||||
const activatePreviewTab = (filePath) => {
|
||||
emit('activate-preview', filePath)
|
||||
}
|
||||
|
||||
const closePreviewTab = (filePath) => {
|
||||
emit('close-preview-tab', filePath)
|
||||
}
|
||||
|
||||
const toggleFileTree = () => {
|
||||
emit('view-mode-change', treePaneVisible.value ? 'preview' : 'tree')
|
||||
}
|
||||
|
||||
const pruneTreeStateAfterDelete = (targetPath) => {
|
||||
selectedKeys.value = selectedKeys.value.filter((key) => !isSameOrChildPath(key, targetPath))
|
||||
expandedKeys.value = expandedKeys.value.filter((key) => !isSameOrChildPath(key, targetPath))
|
||||
|
||||
if (isSameOrChildPath(currentFilePath.value, targetPath)) {
|
||||
closePreview()
|
||||
}
|
||||
emit('close-preview-path', targetPath)
|
||||
}
|
||||
|
||||
const confirmDeleteNode = (node) => {
|
||||
@ -497,8 +573,6 @@ const emitRefresh = () => {
|
||||
emit('refresh', props.threadId)
|
||||
}
|
||||
|
||||
const isResizing = ref(false)
|
||||
|
||||
let resizePointerId = null
|
||||
let pendingClientX = 0
|
||||
let resizeFrameId = 0
|
||||
@ -561,21 +635,9 @@ const stopResize = (e) => {
|
||||
|
||||
onMounted(() => {
|
||||
refreshFileSystem()
|
||||
|
||||
if (panelRef.value && typeof ResizeObserver !== 'undefined') {
|
||||
panelWidth.value = panelRef.value.clientWidth || 0
|
||||
panelResizeObserver = new ResizeObserver((entries) => {
|
||||
const entry = entries[0]
|
||||
if (!entry) return
|
||||
panelWidth.value = entry.contentRect.width
|
||||
})
|
||||
panelResizeObserver.observe(panelRef.value)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
panelResizeObserver?.disconnect()
|
||||
panelResizeObserver = null
|
||||
if (resizeFrameId) {
|
||||
window.cancelAnimationFrame(resizeFrameId)
|
||||
resizeFrameId = 0
|
||||
@ -599,14 +661,18 @@ watch([() => props.threadId, () => props.agentId, () => props.agentConfigId], ([
|
||||
}
|
||||
})
|
||||
|
||||
watch(useInlinePreview, (isInline) => {
|
||||
if (!currentFile.value) {
|
||||
modalVisible.value = false
|
||||
return
|
||||
}
|
||||
watch(
|
||||
[() => props.threadId, () => props.agentId, () => props.agentConfigId, () => props.activePreviewPath],
|
||||
loadActivePreview,
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
modalVisible.value = !isInline
|
||||
})
|
||||
watch(
|
||||
() => props.activePreviewPath,
|
||||
(filePath) => {
|
||||
selectedKeys.value = filePath ? [filePath] : []
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@ -633,6 +699,7 @@ watch(useInlinePreview, (isInline) => {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background: var(--gray-0);
|
||||
transition: none;
|
||||
|
||||
@ -645,17 +712,14 @@ watch(useInlinePreview, (isInline) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2px;
|
||||
padding: 4px 16px;
|
||||
gap: 8px;
|
||||
padding: 4px 12px;
|
||||
min-height: 44px;
|
||||
background: var(--gray-25);
|
||||
border-bottom: 1px solid var(--gray-100);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-header-main {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@ -670,7 +734,8 @@ watch(useInlinePreview, (isInline) => {
|
||||
padding: 0;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&.active {
|
||||
background: var(--gray-100);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
@ -683,51 +748,202 @@ watch(useInlinePreview, (isInline) => {
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
order: 1;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--gray-900);
|
||||
|
||||
span {
|
||||
> span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
}
|
||||
|
||||
.file-toolbar,
|
||||
.window-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.file-toolbar {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.window-actions {
|
||||
order: 3;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
min-height: 0; /* Important for flex child scroll */
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.files-display {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.preview-pane {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tree-pane {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.files-display.has-preview.with-tree .tree-pane {
|
||||
flex: 0 0 34%;
|
||||
min-width: 260px;
|
||||
max-width: 380px;
|
||||
border-left: 1px solid var(--gray-100);
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.preview-tabs-bar {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 1px;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-tab {
|
||||
min-width: 0;
|
||||
max-width: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 8px;
|
||||
background: var(--gray-0);
|
||||
color: var(--gray-700);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.active {
|
||||
border-color: var(--main-200);
|
||||
background: var(--main-20);
|
||||
color: var(--main-800);
|
||||
}
|
||||
}
|
||||
|
||||
.preview-tab-main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 5px 6px 5px 8px;
|
||||
}
|
||||
|
||||
.preview-tab-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.preview-tab-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-tab-close {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--gray-500);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--gray-900);
|
||||
background: var(--gray-100);
|
||||
}
|
||||
}
|
||||
|
||||
.side-preview-shell {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 12px;
|
||||
background: var(--gray-0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.side-preview-shell :deep(.file-content),
|
||||
.side-preview-shell :deep(.side-file-content) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.preview-empty,
|
||||
.empty {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: var(--gray-500);
|
||||
padding: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.preview-empty {
|
||||
border: 1px dashed var(--gray-200);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, var(--gray-25) 0%, var(--gray-0) 100%);
|
||||
}
|
||||
|
||||
.preview-empty-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-800);
|
||||
}
|
||||
|
||||
.preview-empty-desc {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.file-tree-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
/* 自定义滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
@ -746,127 +962,6 @@ watch(useInlinePreview, (isInline) => {
|
||||
}
|
||||
}
|
||||
|
||||
.error-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.files-display {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.files-workspace {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.files-workspace.is-inline-preview {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.file-tree-pane {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.files-workspace.is-inline-preview .file-tree-pane {
|
||||
flex: 0 0 27%;
|
||||
}
|
||||
|
||||
.inline-preview-pane {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inline-preview-shell {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 12px;
|
||||
background: var(--gray-0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.inline-preview-header {
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 4px 12px;
|
||||
border-bottom: 1px solid var(--gray-150);
|
||||
background: var(--gray-25);
|
||||
}
|
||||
|
||||
.inline-file-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.inline-preview-empty {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border: 1px dashed var(--gray-200);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, var(--gray-25) 0%, var(--gray-0) 100%);
|
||||
color: var(--gray-500);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.inline-preview-empty-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-800);
|
||||
}
|
||||
|
||||
.inline-preview-empty-desc {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--gray-500);
|
||||
padding: 60px 0;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
&::before {
|
||||
content: '📋';
|
||||
font-size: 32px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* File Tree Styles - VS Code Style Refined */
|
||||
.file-tree-container {
|
||||
margin: 0 -4px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.files-workspace.is-inline-preview .file-tree-container {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-node-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -920,52 +1015,4 @@ watch(useInlinePreview, (isInline) => {
|
||||
.tree-delete-btn:hover:not(:disabled) {
|
||||
color: var(--error-600, #dc2626);
|
||||
}
|
||||
|
||||
/* 附件列表专用样式 */
|
||||
.attachment-tree :deep(.ant-tree-node-content-wrapper) {
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-50);
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
|
||||
&.ant-tree-node-selected {
|
||||
background-color: var(--gray-100);
|
||||
border-color: var(--main-300);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.agent-file-preview-modal {
|
||||
.ant-modal {
|
||||
z-index: 1050;
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gray-200);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--main-5);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.ant-modal-title {
|
||||
font-weight: 600;
|
||||
color: var(--gray-1000);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user