<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  content: string
  fileName?: string
}>()

const lines = computed(() => props.content.split('\n').slice(0, 100))
</script>

<template>
  <div class="code-viewer" tabindex="0" :aria-label="`${fileName || ''} 文件内容`">
    <div v-for="(line, index) in lines" :key="index" class="code-line">
      <span class="line-number" aria-hidden="true">{{ index + 1 }}</span>
      <code>{{ line || ' ' }}</code>
    </div>
  </div>
</template>

<style scoped lang="scss">
.code-viewer {
  height: 100%;
  max-height: 468px;
  overflow: auto;
  padding: 12px 0 18px;
  outline: none;
}

.code-viewer:focus-visible {
  box-shadow: inset 0 0 0 2px var(--el-color-primary-light-5);
}

.code-line {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 25px;
  color: #344054;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  line-height: 1.65;
}

.code-line:hover {
  background: #f4f6fa;
}

.line-number {
  padding-right: 14px;
  border-right: 1px solid #edf0f5;
  color: #a4adbc;
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
}

.code-line code {
  display: block;
  min-width: max-content;
  padding: 0 18px;
  white-space: pre;
}
</style>
