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

update editor

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-20 22:18:41 +07:00
parent a0dfa65be8
commit 34520a95d4
3 changed files with 171 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/main.css
+1 -1
View File
@@ -25,7 +25,7 @@ body {
.content-block { .content-block {
margin-top: 70px; margin-top: 70px;
padding: 0 20px; padding: 0;
/* background-color: #553333; */ /* background-color: #553333; */
} }
src/components/PlaceBlock.vue
+101 -58
View File
@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Application, Door, Key, Place, Scenario } from '@/api/generated/crabs/evening_detective_server'; import type { Application, Door, Key, Place, Scenario } from '@/api/generated/crabs/evening_detective_server';
import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput } from 'naive-ui' import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput, NInputGroup } from 'naive-ui'
import type { PropType } from 'vue'; import type { PropType } from 'vue';
const props = defineProps({ const props = defineProps({
@@ -15,6 +15,12 @@ const props = defineProps({
} }
}) })
const emit = defineEmits<{ 'update:mode': [value: String] }>()
const updateMode = (mode: string) => {
console.log(mode)
emit('update:mode', mode)
}
function onCreateApplication(): Application { function onCreateApplication(): Application {
return { return {
name: undefined, name: undefined,
@@ -39,81 +45,118 @@ function onCreateKey(): Key {
</script> </script>
<template> <template>
<div class="place-block"> <div v-if="mode == 'mini-add'" class="place-block-plus show-editor-block" @click="updateMode('edit')">
<div v-if="mode == 'show'"> <p class="place-image-plus">+</p>
<p>{{ place.code }}</p> </div>
<p>{{ place.name }}</p>
<p>{{ place.text }}</p> <div v-if="mode == 'show-editor'" class="place-block show-editor-block" @click="updateMode('edit')">
</div> <p>[{{ props.place.code }}] - {{ props.place.name }}</p>
<div v-if="mode == 'edit'"> <div class="message-content">{{ props.place.text }}</div>
<n-space vertical> <p v-for="application in props.place.applications">{{ application.name }}</p>
<n-input v-model:value="place.code" type="text" placeholder='Ы-1' /> </div>
<n-input v-model:value="place.name" type="text" placeholder='Дом №Ы' />
<n-input v-model:value="place.text" type="textarea" placeholder='В начале было слово...' /> <div v-if="mode == 'edit'" class="place-block">
<!-- <n-upload multiple directory-dnd :max="1" v-model:file-list="newPlaceFileList"> <n-space vertical>
<n-input-group>
<n-input :style="{ width: '20%' }" v-model:value="props.place.code" type="text" placeholder='Ы-1' />
<n-input :style="{ width: '80%' }" v-model:value="props.place.name" type="text" placeholder='Дом №Ы' />
</n-input-group>
<n-input v-model:value="props.place.text" type="textarea" :autosize="{ minRows: 3 }"
placeholder='В начале было слово...' />
<!-- <n-upload multiple directory-dnd :max="1" v-model:file-list="newPlaceFileList">
<n-upload-dragger> <n-upload-dragger>
<n-text style="font-size: 16px"> <n-text style="font-size: 16px">
Щелкните или перетащите файл в эту область для загрузки Щелкните или перетащите файл в эту область для загрузки
</n-text> </n-text>
</n-upload-dragger> </n-upload-dragger>
</n-upload> --> </n-upload> -->
<n-switch v-model:value="place.hidden" /> <n-switch v-model:value="props.place.hidden" />
<n-dynamic-input v-model:value="place.applications" :on-create="onCreateApplication"> <n-dynamic-input v-model:value="props.place.applications" :on-create="onCreateApplication">
<template #create-button-default> <template #create-button-default>
Добавить улику Добавить улику
</template> </template>
<template #default="{ value }"> <template #default="{ value }">
<div style="display: flex; align-items: center; width: 100%"> <div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="value.name" type="text" /> <n-input v-model:value="value.name" type="text" />
</div> </div>
</template> </template>
</n-dynamic-input> </n-dynamic-input>
<n-dynamic-input v-model:value="place.doors" :on-create="onCreateDoor"> <n-dynamic-input v-model:value="props.place.doors" :on-create="onCreateDoor">
<template #create-button-default> <template #create-button-default>
Добавить действие Добавить действие
</template> </template>
<template #default="{ value: door }"> <template #default="{ value: door }">
<div style="display: flex; align-items: center; width: 100%"> <div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="door.code" type="text" /> <n-input v-model:value="door.code" type="text" placeholder="Код" />
<n-input v-model:value="door.name" type="text" /> <n-input v-model:value="door.name" type="text" placeholder="Название" />
<n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey"> <n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
<template #create-button-default> <template #create-button-default>
Добавить ключ Добавить ключ
</template> </template>
<template #default="{ value: key }"> <template #default="{ value: key }">
<div style="display: flex; align-items: center; width: 100%"> <div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="key.name" type="text" /> <n-input v-model:value="key.name" type="text" placeholder="Название" />
</div> </div>
</template> </template>
</n-dynamic-input> </n-dynamic-input>
</div> </div>
</template> </template>
</n-dynamic-input> </n-dynamic-input>
<n-dynamic-input v-model:value="place.keys" :on-create="onCreateKey"> <n-dynamic-input v-model:value="props.place.keys" :on-create="onCreateKey">
<template #create-button-default> <template #create-button-default>
Добавить ключ Добавить ключ
</template> </template>
<template #default="{ value: key }"> <template #default="{ value: key }">
<div style="display: flex; align-items: center; width: 100%"> <div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="key.name" type="text" /> <n-input v-model:value="key.name" type="text" placeholder="Название" />
</div> </div>
</template> </template>
</n-dynamic-input> </n-dynamic-input>
</n-space> <slot></slot>
</div>
</n-space>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.place-block { .place-block {
margin: 20px 0; margin: 20px;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #444444; border: 1px solid #444444;
} }
.place-block:hover {
color: #63e2b7;
}
.place-block-plus {
margin: 20px;
border-radius: 10px;
border: 1px solid #444444;
}
.place-block-plus:hover {
color: #63e2b7;
}
.place-image-plus {
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.show-editor-block {
cursor: pointer;
}
.message-content {
white-space: pre-wrap;
}
</style> </style>
src/components/ScenariosEditorPage.vue
+69 -107
View File
@@ -8,7 +8,7 @@ import { useRoute } from 'vue-router';
import { Icon } from '@vicons/utils' import { Icon } from '@vicons/utils'
import { Settings } from '@vicons/carbon' import { Settings } from '@vicons/carbon'
import router from '@/router'; import router from '@/router';
import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput } from 'naive-ui' import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NFlex, NSwitch, NDynamicInput } from 'naive-ui'
import PlaceBlock from '@/components/PlaceBlock.vue'; import PlaceBlock from '@/components/PlaceBlock.vue';
const client = getAuthClient(); const client = getAuthClient();
@@ -21,7 +21,6 @@ const deletedScenarioName = ref('')
const message = useMessage() const message = useMessage()
const fileList = ref<UploadFileInfo[]>([]) const fileList = ref<UploadFileInfo[]>([])
const newPlaceFileList = ref<UploadFileInfo[]>([])
const scenario = ref<Scenario>({ const scenario = ref<Scenario>({
id: undefined, id: undefined,
@@ -41,7 +40,8 @@ const newPlace = ref<Place>({
hidden: undefined, hidden: undefined,
applications: undefined, applications: undefined,
doors: undefined, doors: undefined,
keys: undefined keys: undefined,
mode: 'mini-add'
}) })
async function getScenario(id: number) { async function getScenario(id: number) {
@@ -51,6 +51,10 @@ async function getScenario(id: number) {
return return
} }
scenario.value = res.scenario! scenario.value = res.scenario!
scenario.value.story?.places?.forEach((item) => {
item.oldCode = item.code
item.mode = 'show-editor'
})
} }
getScenario(Number(scenarioId)) getScenario(Number(scenarioId))
@@ -101,27 +105,6 @@ function uint8ToBase64(uint8Array: Uint8Array) {
return btoa(binaryString); return btoa(binaryString);
} }
function onCreateApplication(): Application {
return {
name: undefined,
image: undefined
}
}
function onCreateDoor(): Door {
return {
code: undefined,
name: undefined,
keys: undefined
}
}
function onCreateKey(): Key {
return {
name: undefined
}
}
async function addPlace() { async function addPlace() {
const res = await client.AddScenarioPlace({ const res = await client.AddScenarioPlace({
id: scenario.value.id, id: scenario.value.id,
@@ -145,91 +128,73 @@ async function addPlace() {
} }
} }
async function collapseAddPlace(place: Place) {
place.mode = 'mini-add'
}
async function cancelUpdatePlace(place: Place) {
await getScenario(Number(scenarioId))
place.mode = 'show-editor'
}
async function updatePlace(place: Place) {
const res = await client.UpdateScenarioPlace({
id: scenario.value.id,
code: place.oldCode,
place: place
})
if (res.error != '') {
message.error(res.error!)
return
}
await getScenario(Number(scenarioId))
place.mode = 'show-editor'
}
async function deletePlace(place: Place) {
const res = await client.DeleteScenarioPlace({
id: scenario.value.id,
code: place.oldCode,
})
if (res.error != '') {
message.error(res.error!)
return
}
await getScenario(Number(scenarioId))
}
</script> </script>
<template> <template>
<HeaderMenu :add-logout="true" active="scenarios" /> <HeaderMenu :add-logout="true" active="scenarios" />
<div class="center-block-custom content-block"> <div class="center-block-custom-big content-block">
<div class="settings-block">
<n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
<Icon class="settings-icon">
<Settings />
</Icon>
Настройки
</n-button>
<h3 class="settings-header">{{ scenario.name }}</h3>
</div>
<div class="places-container"> <div class="places-container">
<div class="place-block"> <div class="settings-block">
<n-space vertical> <n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
<n-input v-model:value="newPlace.code" type="text" placeholder='Ы-1' /> <Icon class="settings-icon">
<n-input v-model:value="newPlace.name" type="text" placeholder='Дом №Ы' /> <Settings />
<n-input v-model:value="newPlace.text" type="textarea" placeholder='В начале было слово...' /> </Icon>
<n-upload multiple directory-dnd :max="1" v-model:file-list="newPlaceFileList"> Настройки
<n-upload-dragger> </n-button>
<n-text style="font-size: 16px">
Щелкните или перетащите файл в эту область для загрузки
</n-text>
</n-upload-dragger>
</n-upload>
<n-switch v-model:value="newPlace.hidden" />
<n-dynamic-input v-model:value="newPlace.applications" :on-create="onCreateApplication">
<template #create-button-default>
Добавить улику
</template>
<template #default="{ value }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="value.name" type="text" />
</div>
</template>
</n-dynamic-input>
<n-dynamic-input v-model:value="newPlace.doors" :on-create="onCreateDoor">
<template #create-button-default>
Добавить действие
</template>
<template #default="{ value: door }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="door.code" type="text" />
<n-input v-model:value="door.name" type="text" />
<n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
<template #create-button-default>
Добавить ключ
</template>
<template #default="{ value: key }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="key.name" type="text" />
</div>
</template>
</n-dynamic-input>
</div>
</template>
</n-dynamic-input>
<n-dynamic-input v-model:value="newPlace.keys" :on-create="onCreateKey">
<template #create-button-default>
Добавить ключ
</template>
<template #default="{ value: key }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="key.name" type="text" />
</div>
</template>
</n-dynamic-input>
<n-button @click="addPlace()" ghost>
Добавить место
</n-button>
</n-space>
</div> </div>
<PlaceBlock :place="place" mode="show" v-for="place in scenario.story?.places"></PlaceBlock> <PlaceBlock :place="newPlace" v-model:mode="newPlace.mode">
<n-flex justify="end">
<n-button @click="collapseAddPlace(newPlace)">Отмена</n-button>
<n-button @click="addPlace()" :disabled="!newPlace.code">Добавить точку</n-button>
</n-flex>
</PlaceBlock>
<PlaceBlock :place="place" v-model:mode="place.mode" v-for="place in scenario.story?.places">
<n-flex justify="end">
<n-button @click="deletePlace(place)" type="error" ghost>Удалить</n-button>
<n-button @click="cancelUpdatePlace(place)">Отмена</n-button>
<n-button @click="updatePlace(place)">Сохранить</n-button>
</n-flex>
</PlaceBlock>
</div> </div>
</div> </div>
@@ -295,10 +260,6 @@ async function addPlace() {
/* background-color: brown; */ /* background-color: brown; */
} }
.settings-header {
padding: 5px 0 0 5px;
}
.settings-button { .settings-button {
float: right; float: right;
} }
@@ -326,14 +287,15 @@ async function addPlace() {
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow-y: auto; overflow-y: auto;
padding: 40px 0; padding: 20px 0;
height: calc(100vh - 150px - 40px); height: calc(100vh - 150px);
/* border: 1px solid red; */ /* border: 1px solid red; */
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.places-container { .places-container {
height: calc(100vh - 70px - 40px); padding: 20px 250px;
height: calc(100vh - 70px);
} }
} }
</style> </style>