Ars-Font/src/components/tools/LsResultCard.vue

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

const props = defineProps({
  result: {
    type: Object,
    required: true,
  },
})

// 解析结果
const directory = computed(() => props.result?.directory || '.')
const entries = computed(() => props.result?.entries || [])

// 判断是否为详情模式
const isDetailMode = computed(() => {
  return entries.value.length > 0 && typeof entries.value[0] === 'object'
})

// 获取文件图标
const getIcon = (entry) => {
  if (typeof entry === 'string') {
    // 简单模式：根据名称猜测类型
    if (entry.startsWith('.')) return '📁' // 隐藏目录/文件
    if (entry.includes('.')) return '📄'
    return '📁'
  }
  // 详情模式
  return entry.type === 'directory' ? '📁' : '📄'
}

// 获取条目名称
const getName = (entry) => {
  return typeof entry === 'string' ? entry : entry.name
}

// 是否为隐藏文件
const isHidden = (entry) => {
  const name = getName(entry)
  return name.startsWith('.')
}

// 格式化文件大小
const formatSize = (size) => {
  if (!size) return ''
  if (size < 1024) return `${size} B`
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
  return `${(size / 1024 / 1024).toFixed(1)} MB`
}
</script>

<template>
  <div class="ls-result">
    <div class="ls-header">
      <span class="ls-path">{{ directory }}</span>
      <span class="ls-count">{{ entries.length }} 项</span>
    </div>
    <div class="ls-entries">
      <div
        v-for="(entry, idx) in entries"
        :key="idx"
        class="ls-entry"
        :class="{ hidden: isHidden(entry) }"
      >
        <span class="entry-icon">{{ getIcon(entry) }}</span>
        <span class="entry-name">{{ getName(entry) }}</span>
        <template v-if="isDetailMode && typeof entry === 'object'">
          <span class="entry-size">{{ formatSize(entry.size) }}</span>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.ls-result {
  padding: 12px 16px;
}

.ls-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

.ls-path {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
}

.ls-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--chip-bg);
  padding: 2px 8px;
  border-radius: 10px;
}

.ls-entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}

.ls-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  transition: all 0.12s ease;
}

.ls-entry:hover {
  background: var(--chip-bg);
  transform: translateY(-1px);
}

.ls-entry.hidden {
  opacity: 0.6;
}

.entry-icon {
  font-size: 14px;
}

.entry-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-size {
  font-size: 11px;
  color: var(--text-muted);
}
</style>