<script setup>
import VueMarkdown from 'vue-markdown-render'
defineProps({ source: { type: String, required: true } })

const options = {
  html: true,
  breaks: true,
}
</script>

<template>
  <VueMarkdown :source="source" :options="options" class="markdown-body" />
</template>

<style lang="scss">
.markdown-body {
  font-size: 14px;
  line-height: 1;
  color: #333;

  // 标题样式 - 优化间距
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 1.2em 0 0.6em 0;
    font-weight: 600;
    line-height: 1.3;
    color: #2c3e50;

    &:first-child {
      margin-top: 0;
    }
  }

  h1 {
    font-size: 1.6em;
    border-bottom: 2px solid #eaecef;
    padding-bottom: 0.4em;
    margin-top: 1.5em;
  }
  h2 {
    font-size: 1.4em;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 0.3em;
    margin-top: 1.3em;
  }
  h3 {
    font-size: 1.2em;
    margin-top: 1.1em;
  }
  h4 {
    font-size: 1.1em;
    margin-top: 1em;
  }
  h5 {
    font-size: 1.05em;
    margin-top: 0.9em;
  }
  h6 {
    font-size: 1em;
    color: #6a737d;
    margin-top: 0.8em;
  }

  // 段落和文字 - 优化间距
  p {
    margin: 0.8em 0;
    line-height: 1.7;
  }

  // 强调文本
  strong,
  b {
    font-weight: 600;
    color: #2c3e50;
  }

  em,
  i {
    font-style: italic;
    color: #5a6268;
  }

  // 链接
  a {
    color: #0366d6;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      color: #0550ae;
    }
  }

  // 列表 - 优化间距和缩进
  ul,
  ol {
    margin: 0.8em 0;
    padding-left: 1.8em;
  }

  li {
    margin: 0.3em 0;
    line-height: 1.6;

    p {
      margin: 0.4em 0;
    }

    // 嵌套列表间距
    ul,
    ol {
      margin: 0.4em 0;
    }
  }

  // 代码块 - 优化内边距
  // pre {
  //   background-color: #f6f8fa;
  //   border-radius: 6px;
  //   padding: 0.9em;
  //   margin: 0.9em 0;
  //   overflow: auto;
  //   border: 1px solid #e1e4e8;

  //   code {
  //     background: transparent;
  //     padding: 0;
  //     border: none;
  //     color: #24292e;
  //     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  //     font-size: 0.9em;
  //     line-height: 1.5;
  //   }
  // }

  // 行内代码 - 优化内边距
  // code {
  //   background-color: #f6f8fa;
  //   padding: 0.15em 0.3em;
  //   border-radius: 3px;
  //   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  //   font-size: 0.88em;
  //   color: #e01e5a;
  //   border: 1px solid #e1e4e8;
  //   line-height: 1.4;
  // }

  // 引用块 - 优化内边距
  blockquote {
    margin: 0.9em 0;
    padding: 0.6em 0.9em 0.6em 1em;
    background-color: #f8f9fa;
    border-left: 4px solid #dfe2e5;
    color: #6a737d;
    border-radius: 0 4px 4px 0;

    p {
      margin: 0.4em 0;
    }

    // 嵌套引用
    blockquote {
      margin: 0.6em 0;
      padding: 0.4em 0.8em 0.4em 0.9em;
    }
  }

  // 表格 - 优化单元格内边距
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.9em 0;
    font-size: 0.95em;

    th,
    td {
      padding: 0.5em 0.8em;
      border: 1px solid #dfe2e5;
      line-height: 1.5;
    }

    th {
      background-color: #f6f8fa;
      font-weight: 600;
      text-align: left;
    }

    tr:nth-child(even) {
      background-color: #f6f8fa;
    }
  }

  // 水平分割线 - 优化间距
  hr {
    height: 1px;
    background-color: #e1e4e8;
    border: none;
    margin: 1.5em 0;
  }

  // 图片 - 优化外边距
  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #e1e4e8;
    margin: 0.8em 0;
  }

  // 任务列表 - 优化对齐
  .contains-task-list {
    list-style: none;
    padding-left: 0;
    margin: 0.8em 0;

    li {
      display: flex;
      align-items: flex-start;
      gap: 0.5em;
      margin: 0.3em 0;

      input[type='checkbox'] {
        margin-top: 0.15em;
        transform: scale(1.1);
      }
    }
  }

  // 相邻元素间距优化
  * + h1,
  * + h2,
  * + h3 {
    margin-top: 1.4em;
  }

  // 代码块后的内容间距
  pre + * {
    margin-top: 1em;
  }

  // 图片后的内容间距
  img + * {
    margin-top: 0.9em;
  }

  [data-streamdown='code-block'] {
    background-color: #f6f3f4;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
  }
  [data-streamdown='code-block-header'] {
    padding: 12px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  // [data-streamdown='code-actions'] {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   gap: 10px;
  //   button {
  //     border-radius: 4px;
  //     border: 0;
  //     padding: 4px;
  //     background-color: #ebe6e7;
  //     cursor: pointer;
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     color: #333;
  //     svg {
  //       width: 14px;
  //       height: 14px;
  //     }
  //     span {
  //       display: none;
  //     }
  //   }
  // }
  [data-streamdown='code-body'] {
    padding: 12px;
  }
}

@media (prefers-color-scheme: dark) {
  .markdown-body {
    [data-streamdown='code-block-header'] {
      color: #fff;
    }
  }
}
</style>
