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

fixes

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-09-02 00:59:46 +07:00
parent 690efbbbf5
commit 30ffe8ea08
45 changed files with 2138 additions and 1643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ScenariosPage.vue
+85 -37
View File
@@ -2,7 +2,18 @@
import { Archive } from '@vicons/carbon'
import { Icon } from '@vicons/utils'
import { useMessage } from 'naive-ui'
import { NButton, NCard, NFlex, NInput, NModal, NTag, NText, NUpload, NUploadDragger, type UploadFileInfo } from 'naive-ui'
import {
NButton,
NCard,
NFlex,
NInput,
NModal,
NTag,
NText,
NUpload,
NUploadDragger,
type UploadFileInfo,
} from 'naive-ui'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
@@ -97,17 +108,34 @@ getScenarios()
</div>
</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>
<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>
<div class="scenario-content-block">
<p class="scenario-title">{{ scenario.name }}</p>
<p class="scenario-label">
<n-tag v-if="scenario.status == 'public'" :bordered="false" type="success"
class="status-block">Опубликовано</n-tag>
<n-tag v-if="scenario.status == 'draft'" :bordered="false" type="warning" class="status-block">В
разработке</n-tag>
<n-tag
v-if="scenario.status == 'public'"
:bordered="false"
type="success"
class="status-block"
>Опубликовано</n-tag
>
<n-tag
v-if="scenario.status == 'draft'"
:bordered="false"
type="warning"
class="status-block"
>В разработке</n-tag
>
</p>
</div>
</div>
@@ -116,12 +144,22 @@ getScenarios()
<!-- Окно создания сценария -->
<n-modal v-model:show="showAddScenarioModal">
<n-card style="width: 600px" title="Создание сценария" :bordered="false" size="huge" role="dialog"
aria-modal="true">
<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 "Следствие ведут овечки"' />
<n-input
v-model:value="newScenarioName"
type="text"
placeholder='Дело №0 "Следствие ведут овечки"'
/>
<template #footer>
<n-flex justify="end">
<n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
@@ -134,28 +172,39 @@ getScenarios()
<!-- Окно импорта сценария из архива -->
<n-modal v-model:show="showImportModal">
<n-card style="width: 600px" title="Импорт сценария из архива" :bordered="false" size="huge" role="dialog"
aria-modal="true">
<n-card
style="width: 600px"
title="Импорт сценария из архива"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<template #header-extra>
<n-button @click="resetImport()"> x </n-button>
</template>
<p class="import-hint">
Выберите ZIP-архив сценария (файл scenario.json + папка images). Архив можно получить
через «Скачать архив» в настройках сценария.
Выберите ZIP-архив сценария (файл scenario.json + папка images). Архив можно получить через
«Скачать архив» в настройках сценария.
</p>
<n-upload :max="1" v-model:file-list="importFileList"
accept=".zip,application/zip,application/x-zip-compressed,application/octet-stream">
<n-upload
:max="1"
v-model:file-list="importFileList"
accept=".zip,application/zip,application/x-zip-compressed,application/octet-stream"
>
<n-upload-dragger>
<n-text style="font-size: 16px">
Щелкните или перетащите ZIP-архив в эту область
</n-text>
<n-text style="font-size: 16px"> Щелкните или перетащите ZIP-архив в эту область </n-text>
</n-upload-dragger>
</n-upload>
<template #footer>
<n-flex justify="end">
<n-button @click="resetImport()">Отмена</n-button>
<n-button type="primary" :loading="isImporting" :disabled="importFileList.length == 0"
@click="importScenario()">
<n-button
type="primary"
:loading="isImporting"
:disabled="importFileList.length == 0"
@click="importScenario()"
>
Импортировать
</n-button>
</n-flex>
@@ -168,16 +217,15 @@ getScenarios()
<style scoped>
.scenario-block {
position: relative;
margin: 10px;
width: 160px;
height: 300px;
cursor: pointer;
border-radius: 12px;
/* background-color: #553333; */
background-color: #222;
border: 2px solid #222;
border-radius: 12px;
cursor: pointer;
height: 300px;
margin: 10px;
position: relative;
width: 160px;
}
.scenario-content-block {
@@ -185,22 +233,22 @@ getScenarios()
}
.scenario-block:hover {
color: #63e2b7;
border: 2px solid #63e2b7;
color: #63e2b7;
}
.scenario-image-block {
background-color: #111;
height: 160px;
border-radius: 10px;
height: 160px;
}
.scenario-image-plus {
font-size: 120px;
display: flex;
justify-content: center;
align-items: center;
background-color: #111;
display: flex;
font-size: 120px;
justify-content: center;
}
.import-icon svg {
@@ -214,8 +262,8 @@ getScenarios()
}
.scenario-image {
background-size: cover;
background-position: center;
background-size: cover;
}
.scenario-title {
@@ -223,15 +271,15 @@ getScenarios()
}
.status-block {
position: absolute;
bottom: 15px;
position: absolute;
right: 15px;
}
@media (width >=1024px) {
.scenario-block {
width: 250px;
height: 400px;
width: 250px;
}
.scenario-image-block {