evening_detective_frontend/src/components/DocsPage.vue

<script setup lang="ts">
import { NAlert, NSpin } from 'naive-ui'
import { onMounted, ref } from 'vue'
import { RouterLink } from 'vue-router'

import { getAuthClient } from '@/api/auth_client'
import HeaderText from '@/components/HeaderText.vue'

const props = defineProps<{
  kind: 'terms' | 'privacy' | 'consent'
}>()

const titles: Record<string, string> = {
  terms: 'Пользовательское соглашение',
  privacy: 'Политика конфиденциальности',
  consent: 'Согласие на обработку персональных данных',
}

const text = ref('')
const loading = ref(true)
const error = ref('')

onMounted(async () => {
  const client = getAuthClient()
  const fetchers = {
    terms: () => client.GetTerms({}),
    privacy: () => client.GetPrivacy({}),
    consent: () => client.GetConsent({}),
  }

  try {
    const res = await fetchers[props.kind]()
    if (res.error) {
      error.value = res.error
    } else {
      text.value = res.text || ''
    }
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Не удалось загрузить документ'
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div class="center-block-custom">
    <div class="width700 doc-page">
      <h1 class="doc-title">
        <HeaderText>{{ titles[props.kind] }}</HeaderText>
      </h1>

      <div v-if="loading" class="doc-loading">
        <n-spin size="large" />
      </div>

      <n-alert v-else-if="error" type="error" :show-icon="false" class="doc-error">
        {{ error }}
      </n-alert>

      <div v-else class="paper-block">
        <div class="paper">
          <p class="doc-text">{{ text }}</p>
        </div>
        <div class="paper-shadow paper-shadow-left"></div>
        <div class="paper-shadow paper-shadow-right"></div>
      </div>

      <div class="docs-links">
        Смотрите также:
        <RouterLink to="/user-agreement" class="docs-link">Пользовательское соглашение</RouterLink>
        ·
        <RouterLink to="/privacy-policy" class="docs-link">Политика конфиденциальности</RouterLink>
        ·
        <RouterLink to="/consent" class="docs-link">Согласие на обработку персональных данных</RouterLink>
      </div>
    </div>
  </div>
</template>

<style scoped>
.doc-page {
  padding-top: 30px;
}

.doc-title {
  margin: 0 0 24px;
  text-align: center;
}

.doc-loading {
  display: flex;
  justify-content: center;
  padding: 80px 0;
}

.doc-error {
  margin: 0 auto;
  max-width: 600px;
}

.paper-block {
  position: relative;
}

.paper {
  position: relative;
  z-index: 2;
  padding: 32px 28px;
  border-radius: 3px;
  background-image: url('@/assets/images/paper_white.jpg');
  background-size: cover;
  color: #1d1d1d;
  box-shadow: 0 0 12px rgb(0 0 0 / 70%);
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.paper::-webkit-scrollbar {
  display: none;
}

.doc-text {
  font-family: 'font_old_typer';
  font-size: 17px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: justify;
}

.paper-shadow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background-image: url('@/assets/images/paper_white.jpg');
  background-size: cover;
}

.paper-shadow-left {
  left: 0;
  transform: rotate(-2.2deg);
  filter: brightness(60%);
  box-shadow: 0 0 10px rgb(0 0 0 / 60%);
}

.paper-shadow-right {
  right: 0;
  transform: rotate(2.2deg);
  filter: brightness(75%);
  box-shadow: 0 0 10px rgb(0 0 0 / 60%);
}

.docs-links {
  margin-top: 28px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 15px;
  color: #999;
}

.docs-link {
  color: #45aa89;
  text-decoration: none;
}

.docs-link:hover {
  color: #63e2b7;
}
</style>