<template>
  <div class="txt-preview">
    {{ content }}
  </div>
</template>

<script>
export default {
  props: {
    txtUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      content: "",
    };
  },
  async mounted() {
    await this.loadTxt();
  },
  methods: {
    async loadTxt() {
      try {
        const response = await fetch(this.txtUrl);
        this.content = await response.text();
      } catch (error) {
        console.error("加载 TXT 文件失败:", error);
        this.content = "无法加载文本内容。";
      }
    },
  },
};
</script>

<style>
.txt-preview {
  padding: 16px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  white-space: pre-wrap; /* 保留换行符并自动换行 */
  word-wrap: break-word; /* 遇到长单词时强制换行 */
  overflow: auto; /* 当内容超出容器时允许滚动 */
  max-width: 100%; /* 确保不会超出父容器 */
  box-sizing: border-box; /* 包括 padding 在内计算宽度 */
}
</style>
