FranklinWH-wiki/client/docs/.vitepress/theme/components/ParameterTable.vue

<template>
  <div class="para-tab-wrap">
    <div v-for="(item, index) in items" :key="index" class="para-tab-row">
      <div class="para-tab-name" :style="{ width: labelWidth }" v-html="safeHtml(item.name)"></div>
      <div class="para-tab-content" v-html="safeHtml(item.content)"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  labelWidth: {
    type: String,
    default: '150px' // 默认 150px
  },
  items: {
    type: Array,
    required: true,
    default: () => []
  }
});

// 防止 XSS
function safeHtml(name: string) {
  return name
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/&lt;br&gt;/g, '<br>');
}

</script>

<style scoped>
.para-tab-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}
.para-tab-row {
  display: flex;
  gap: 20px;
}
.para-tab-name {
  white-space: normal; /* 默认可以换行 */
  font-weight: bold;
  color: #333;
}
.para-tab-content {
  white-space: normal; /* 默认可以换行 */
  flex: 1;
}
</style>