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

format

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-20 22:49:45 +07:00
parent c314e4f329
commit db558c87d1
24 changed files with 1464 additions and 1362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ScenariosPage.vue
+96 -87
View File
@@ -1,15 +1,14 @@
<script setup lang="ts">
import { useMessage } from 'naive-ui';
import { NButton, NCard, NInput,NModal } from 'naive-ui'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui'
import { NButton, NCard, NInput, NModal } 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 { 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 client = getAuthClient()
const scenarios = ref<Scenario[]>([])
@@ -21,132 +20,142 @@ const showAddScenarioModal = ref(false)
const newScenarioName = ref('')
async function getScenarios() {
scenarios.value = []
const res = await client.GetMyScenarios({})
scenarios.value = res.scenarios!
scenarios.value = []
const res = await client.GetMyScenarios({})
scenarios.value = res.scenarios!
}
async function addScenario(name: string) {
const res = await client.AddScenario({ name: name })
if (res.error != '') {
message.error(res.error!)
return
}
await toScenarioEditor(res.id!)
const res = await client.AddScenario({ name: name })
if (res.error != '') {
message.error(res.error!)
return
}
await toScenarioEditor(res.id!)
}
async function toScenarioEditor(id: number) {
router.push('/scenarios/' + id)
router.push('/scenarios/' + id)
}
getScenarios()
</script>
<template>
<HeaderMenu :add-logout="true" active="scenarios" />
<HeaderMenu :add-logout="true" active="scenarios" />
<div class="center-block-custom-big content-block">
<div class="scenarios-container">
<div class="scenario-block" @click="showAddScenarioModal = true">
<div class="scenario-image-block scenario-image-plus">+</div>
<p class="scenario-title">Создать новый сценарий</p>
</div>
<div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)" v-bind:key="scenario.id">
<div class="scenario-image-block scenario-image"
:style="{ backgroundImage: `url(${scenario.image})` }"></div>
<p class="scenario-title">{{ scenario.name }}</p>
</div>
</div>
<div class="center-block-custom-big content-block">
<div class="scenarios-container">
<div class="scenario-block" @click="showAddScenarioModal = true">
<div class="scenario-image-block scenario-image-plus">+</div>
<p class="scenario-title">Создать новый сценарий</p>
</div>
<div
class="scenario-block"
v-for="scenario in scenarios"
@click="toScenarioEditor(scenario.id!)"
v-bind:key="scenario.id"
>
<div
class="scenario-image-block scenario-image"
:style="{ backgroundImage: `url(${scenario.image})` }"
></div>
<p class="scenario-title">{{ scenario.name }}</p>
</div>
</div>
</div>
<!-- Окно создания сценария -->
<n-modal v-model:show="showAddScenarioModal">
<n-card style="width: 600px" title="Создание сценария" :bordered="false" size="huge" role="dialog"
aria-modal="true">
<template #header-extra>
<n-button @click="showAddScenarioModal = false">
x
</n-button>
</template>
<n-input v-model:value="newScenarioName" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
<template #footer>
<n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
Создать
</n-button>
</template>
</n-card>
</n-modal>
<!-- Окно создания сценария -->
<n-modal v-model:show="showAddScenarioModal">
<n-card
style="width: 600px"
title="Создание сценария"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<template #header-extra>
<n-button @click="showAddScenarioModal = false"> x </n-button>
</template>
<n-input
v-model:value="newScenarioName"
type="text"
placeholder='Дело №0 "Следствие ведут овечки"'
/>
<template #footer>
<n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
Создать
</n-button>
</template>
</n-card>
</n-modal>
</template>
<style scoped>
.scenarios-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: auto;
padding: 40px 0;
height: calc(100vh - 150px);
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: auto;
padding: 40px 0;
height: calc(100vh - 150px);
/* border: 1px solid red; */
/* border: 1px solid red; */
}
.scenario-block {
margin: 10px;
width: 150px;
cursor: pointer;
margin: 10px;
width: 150px;
cursor: pointer;
/* background-color: #553333; */
/* background-color: #553333; */
}
.scenario-block:hover {
color: #63e2b7;
color: #63e2b7;
}
.scenario-image-block {
height: 150px;
border-radius: 10px;
height: 150px;
border-radius: 10px;
}
.scenario-image-block:hover {
color: #63e2b7;
border: 2px solid #63e2b7;
color: #63e2b7;
border: 2px solid #63e2b7;
}
.scenario-image-plus {
font-size: 120px;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
font-size: 120px;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.scenario-image {
background-size: cover;
background-position: center;
background-size: cover;
background-position: center;
}
.scenario-title {
padding: 5px 0;
padding: 5px 0;
}
@media (width >= 1024px) {
.scenarios-container {
height: calc(100vh - 70px);
}
.scenarios-container {
height: calc(100vh - 70px);
}
.scenario-block {
width: 250px;
}
.scenario-block {
width: 250px;
}
.scenario-image-block {
height: 250px;
border-radius: 10px;
}
.scenario-image-block {
height: 250px;
border-radius: 10px;
}
}
</style>