llm-in-text/src/components/FileContent.vue

<script setup>
import { computed } from 'vue'

const props = defineProps({
  node: { type: Object, default: null },
  breadcrumb: { type: Array, default: () => [] }
})

const emit = defineEmits(['navigate'])

const fileExt = computed(() => {
  if (!props.node || props.node.type !== 'file') return ''
  const parts = props.node.name.split('.')
  return parts.length > 1 ? parts.pop().toLowerCase() : ''
})

const isMarkdown = computed(() => {
  return fileExt.value === 'md' || fileExt.value === 'markdown'
})

const isText = computed(() => {
  const textExts = ['txt', 'json', 'js', 'ts', 'css', 'html', 'py', 'vue', 'xml', 'yaml', 'yml', 'csv', 'log', 'sql', 'toml', 'ini', 'cfg', 'conf', 'sh', 'bat']
  return textExts.includes(fileExt.value) || isMarkdown.value
})

function navigateTo(id) {
  emit('navigate', id)
}
</script>

<template>
  <div class="file-content">
    <div v-if="breadcrumb.length > 0" class="breadcrumb">
      <template v-for="(item, index) in breadcrumb" :key="item.id">
        <span
          v-if="item.type === 'folder'"
          class="breadcrumb-item"
          @click="navigateTo(item.id)"
        >{{ item.name }}</span>
        <span v-else class="breadcrumb-item breadcrumb-current">{{ item.name }}</span>
        <span v-if="index < breadcrumb.length - 1" class="breadcrumb-sep">/</span>
      </template>
    </div>

    <div v-if="!node" class="content-empty">
      <svg viewBox="0 0 24 24" width="48" height="48" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
      </svg>
      <p>选择一个文件以查看内容</p>
    </div>

    <div v-else-if="node.type === 'folder'" class="content-folder">
      <svg viewBox="0 0 24 24" width="48" height="48" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
      </svg>
      <h3>{{ node.name }}</h3>
      <p>包含 {{ (node.children || []).length }} 个项目</p>
    </div>

    <div v-else-if="isMarkdown" class="content-markdown">
      <div class="markdown-body" v-html="renderMarkdown(node.content || '')"></div>
    </div>

    <div v-else-if="isText" class="content-text">
      <pre class="text-content">{{ node.content || '' }}</pre>
    </div>

    <div v-else class="content-unsupported">
      <svg viewBox="0 0 24 24" width="48" height="48" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <line x1="12" y1="8" x2="12" y2="12"></line>
        <line x1="12" y1="16" x2="12.01" y2="16"></line>
      </svg>
      <p>暂不支持预览此文件类型</p>
      <p class="file-ext">.{{ fileExt }}</p>
    </div>
  </div>
</template>

<script>
function renderMarkdown(text) {
  if (!text) return ''
  let html = text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/`(.+?)`/g, '<code>$1</code>')
    .replace(/^\> (.+)$/gm, '<blockquote>$1</blockquote>')
    .replace(/^\- (.+)$/gm, '<li>$1</li>')
    .replace(/^(\d+)\. (.+)$/gm, '<li>$1. $2</li>')
    .replace(/\n\n/g, '</p><p>')
    .replace(/\n/g, '<br>')
  return `<p>${html}</p>`
}
</script>

<style scoped>
.file-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--muted-text);
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.breadcrumb-item {
  cursor: pointer;
  color: var(--focus-ring);
}

.breadcrumb-item:hover {
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--app-text);
  cursor: default;
}

.breadcrumb-current:hover {
  text-decoration: none;
}

.breadcrumb-sep {
  color: var(--muted-text);
}

.content-empty,
.content-folder,
.content-unsupported {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted-text);
  padding: 32px;
}

.content-empty svg,
.content-folder svg,
.content-unsupported svg {
  opacity: 0.4;
}

.content-folder h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--app-text);
}

.content-folder p,
.content-empty p {
  margin: 0;
  font-size: 0.9rem;
}

.file-ext {
  font-family: monospace;
  font-size: 0.85rem;
  background: var(--ghost-code-bg);
  padding: 4px 8px;
  border-radius: 4px;
}

.content-markdown {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.markdown-body {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
  color: var(--app-text);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.markdown-body h1 { font-size: 1.75rem; border-bottom: 1px solid var(--panel-border); padding-bottom: 8px; }
.markdown-body h2 { font-size: 1.4rem; border-bottom: 1px solid var(--panel-border); padding-bottom: 6px; }
.markdown-body h3 { font-size: 1.15rem; }

.markdown-body strong { font-weight: 600; }
.markdown-body em { font-style: italic; }

.markdown-body code {
  background: var(--code-inline-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: var(--code-text);
}

.markdown-body blockquote {
  border-left: 3px solid var(--focus-ring);
  padding-left: 16px;
  margin: 12px 0;
  color: var(--muted-text);
}

.markdown-body li {
  margin-left: 20px;
  list-style: disc;
}

.content-text {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.text-content {
  margin: 0;
  padding: 16px;
  background: var(--code-block-bg);
  border: 1px solid var(--code-block-border);
  border-radius: 8px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--code-text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-width: 100%;
}

.content-markdown::-webkit-scrollbar,
.content-text::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.content-markdown::-webkit-scrollbar-thumb,
.content-text::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.content-markdown::-webkit-scrollbar-thumb:hover,
.content-text::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
</style>