The_evening_detective/evening_detective_frontend
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add catalog

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-26 03:02:05 +07:00
parent 4663493c66
commit 6d5766092b
14 changed files with 338 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CatalogPage.vue
+138
View File
@@ -0,0 +1,138 @@
<script setup lang="ts">
import { NTag } from 'naive-ui'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getAuthClient } from '@/api/auth_client'
import type { Scenario } from '@/api/generated/crabs/evening_detective_server'
import HeaderMenu from '@/components/HeaderMenu.vue'
const client = getAuthClient()
const scenarios = ref<Scenario[]>([])
const router = useRouter()
async function getScenarios() {
scenarios.value = []
const res = await client.GetScenariosCatalog({})
scenarios.value = res.scenarios!
}
async function toScenarioInfo(id: number) {
router.push('/scenarios/' + id)
}
getScenarios()
</script>
<template>
<div class="center-block-custom-big content-block">
<div class="scenarios-container">
<div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioInfo(scenario.id!)"
v-bind:key="scenario.id">
<div class="scenario-image-block scenario-image" :style="{ backgroundImage: `url(${scenario.image})` }">
</div>
<div class="scenario-content-block">
<p class="scenario-title">{{ scenario.name }}</p>
<p class="scenario-description">{{ scenario.description }}</p>
<p class="scenario-label">
<n-tag :bordered="false" type="success" class="status-block">Автор: {{ scenario.author?.username
}}</n-tag>
</p>
</div>
</div>
</div>
</div>
<HeaderMenu :add-logout="true" active="catalog" />
</template>
<style scoped>
.scenarios-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: auto;
padding: 0;
height: calc(100vh - 150px);
/* border: 1px solid red; */
}
.scenario-block {
position: relative;
margin: 10px;
width: 160px;
height: 300px;
cursor: pointer;
border-radius: 12px;
/* background-color: #553333; */
background-color: #333;
border: 2px solid #333;
}
.scenario-content-block {
padding: 2px 10px;
}
.scenario-block:hover {
color: #63e2b7;
border: 2px solid #63e2b7;
}
.scenario-image-block {
background-color: #111;
height: 160px;
border-radius: 10px;
}
.scenario-image {
background-size: cover;
background-position: center;
}
.scenario-title {
padding: 5px 0;
}
.scenario-description {
color: #aaa;
display: none;
}
.status-block {
position: absolute;
bottom: 15px;
right: 15px;
}
@media (width >=1024px) {
.scenarios-container {
height: calc(100vh - 70px);
}
.scenario-block {
width: 250px;
height: 400px;
}
.scenario-image-block {
height: 250px;
}
.scenario-content-block {
padding: 4px 10px;
}
.scenario-description {
color: #aaa;
display: block;
}
}
</style>
src/components/HeaderMenu.vue
+4
View File
@@ -70,6 +70,10 @@ const openMenu = ref(false)
@click="router.push('/games')">
Игры
</div>
<div class="menu-item-block" :class="{ active: props.active == 'catalog' }" v-if="hasPermission('catalog_page')"
@click="router.push('/catalog')">
Каталог
</div>
<div class="menu-item-block" :class="{ active: props.active == 'scenarios' }"
v-if="hasPermission('scenarios_page')" @click="router.push('/scenarios')">
Мои сценарии
src/components/ScenarioPage.vue
+78
View File
@@ -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>
src/components/ScenariosEditorPage.vue
+2 -1
View File
@@ -29,13 +29,14 @@ const scenario = ref<Scenario>({
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 })
const res = await client.GetFullScenario({ id: id })
if (res.error != '') {
message.error(res.error!)
return