austnv
fa8498ef4c
add: - legal .md files - routers - home view - rewrite App.vue - update footer / header - update features
86 lines
2.8 KiB
Vue
86 lines
2.8 KiB
Vue
<template>
|
|
<div class="max-w-4xl mx-auto px-4 py-12">
|
|
<!-- Навигация: теперь используем router-link вместо обычных кнопок -->
|
|
<nav class="flex space-x-6 mb-8 pb-2">
|
|
<router-link
|
|
to="/docs/policy"
|
|
class="px-1 py-2 text-sm font-medium transition-colors border-b-2 -mb-2.5"
|
|
active-class="border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400"
|
|
inactive-class="border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400"
|
|
>
|
|
Политика конфиденциальности
|
|
</router-link>
|
|
|
|
<router-link
|
|
to="/docs/agreement"
|
|
class="px-1 py-2 text-sm font-medium transition-colors border-b-2 -mb-2.5"
|
|
active-class="border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400"
|
|
inactive-class="border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400"
|
|
>
|
|
Пользовательское соглашение
|
|
</router-link>
|
|
</nav>
|
|
|
|
<!-- Область отображения Markdown (Tailwind Typography) -->
|
|
<div
|
|
v-if="htmlContent"
|
|
v-html="htmlContent"
|
|
class="prose prose-slate max-w-none dark:prose-invert"
|
|
></div>
|
|
|
|
<div v-else-if="isLoading" class="text-center py-12 text-slate-500 dark:text-slate-400">
|
|
Загрузка документа...
|
|
</div>
|
|
|
|
<div v-else class="text-center py-12 text-red-500">
|
|
Документ не найден или произошла ошибка.
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted } from 'vue'
|
|
import { marked } from 'marked'
|
|
|
|
// Принимаем параметр docName из роутера
|
|
const props = defineProps({
|
|
docName: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const htmlContent = ref('')
|
|
const isLoading = ref(true)
|
|
|
|
// Функция загрузки md-файла
|
|
const fetchMarkdown = async (name) => {
|
|
isLoading.value = true
|
|
htmlContent.value = ''
|
|
|
|
try {
|
|
// Загрузка из папки public/docs/
|
|
const response = await fetch(`/docs/${name}.md`)
|
|
if (!response.ok) throw new Error('Файл отсутствует')
|
|
|
|
const markdownText = await response.text()
|
|
htmlContent.value = marked(markdownText)
|
|
} catch (error) {
|
|
console.error('Ошибка отрисовки md:', error)
|
|
htmlContent.value = ''
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
// Загружаем файл при первой инициализации страницы
|
|
onMounted(() => {
|
|
fetchMarkdown(props.docName)
|
|
})
|
|
|
|
// Отслеживаем изменение ссылки (например, если пользователь перешел с policy на agreement)
|
|
watch(() => props.docName, (newName) => {
|
|
fetchMarkdown(newName)
|
|
})
|
|
</script>
|