add catalog

src/components/ScenarioPage.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { getAuthClient } from '@/api/auth_client'
+import type { Scenario } from '@/api/generated/crabs/evening_detective_server'
+import HeaderMenu from '@/components/HeaderMenu.vue'
+import { useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { NTag } from 'naive-ui'
+
+const message = useMessage()
+const client = getAuthClient()
+const route = useRoute()
+
+const scenarioId = route.params.id
+
+const scenario = ref<Scenario>({
+    id: undefined,
+    name: undefined,
+    story: undefined,
+    author: undefined,
+    status: undefined,
+    updatedAt: undefined,
+    createdAt: undefined,
+    publishedAt: undefined,
+})
+
+async function getScenario(id: number) {
+    const res = await client.GetScenario({ id: id })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    scenario.value = res.scenario!
+}
+getScenario(Number(scenarioId))
+</script>
+
+<template>
+    <div class="center-block-custom">
+        <div class="scenario-container">
+            <div class="scenario-title">
+                {{ scenario.name }}
+            </div>
+            <img class="scenario-image" :src="scenario.image">
+            <div class="scenario-description">
+                {{ scenario.description }}
+            </div>
+            <div class="scenario-author">
+                <n-tag :bordered="false" type="success" class="status-block">Автор: {{ scenario.author?.username
+                }}</n-tag>
+            </div>
+        </div>
+    </div>
+
+    <HeaderMenu :add-logout="true" active="catalog" />
+</template>
+
+<style scoped>
+.scenario-container {
+    padding: 20px;
+}
+
+.scenario-title {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.scenario-image {
+    width: 100%;
+    max-width: 400px;
+    margin-bottom: 10px;
+}
+
+.scenario-description {
+    color: #aaa;
+    margin-bottom: 10px;
+}
+</style>