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/App.vue
-2
View File
@@ -6,11 +6,9 @@ import { RouterView } from 'vue-router'
<template> <template>
<n-config-provider :theme="darkTheme"> <n-config-provider :theme="darkTheme">
<n-message-provider> <n-message-provider>
<RouterView /> <RouterView />
</n-message-provider> </n-message-provider>
</n-config-provider> </n-config-provider>
</template> </template>
src/api/auth_client.ts
+11 -15
View File
@@ -1,10 +1,13 @@
import { useAuthStore } from "@/stores/auth"; import { useAuthStore } from '@/stores/auth'
import { createEveningDetectiveServerClient, type EveningDetectiveServer } from "./generated/crabs/evening_detective_server"; import {
import { createHttpHandler } from "./generated/crabs/evening_detective_server/client"; createEveningDetectiveServerClient,
type EveningDetectiveServer,
} from './generated/crabs/evening_detective_server'
import { createHttpHandler } from './generated/crabs/evening_detective_server/client'
export function getAuthClient() { export function getAuthClient() {
const authStore = useAuthStore(); const authStore = useAuthStore()
return buildAuthClient(authStore.refreshTokenAction, authStore.getToken) return buildAuthClient(authStore.refreshTokenAction, authStore.getToken)
} }
@@ -13,22 +16,15 @@ function buildAuthClient(
getToken: () => string | null, getToken: () => string | null,
): EveningDetectiveServer { ): EveningDetectiveServer {
return createEveningDetectiveServerClient( return createEveningDetectiveServerClient(
createAuthHttpHandler( createAuthHttpHandler(refreshTokens, createHttpHandler(getToken)),
refreshTokens,
createHttpHandler(
getToken,
)
)
) )
} }
function createAuthHttpHandler( function createAuthHttpHandler(
refreshTokens: () => Promise<boolean>, refreshTokens: () => Promise<boolean>,
handler: (request: { path: string, method: string, body: string | null }) => Promise<unknown> handler: (request: { path: string; method: string; body: string | null }) => Promise<unknown>,
): (request: { path: string, method: string, body: string | null }) => Promise<unknown> { ): (request: { path: string; method: string; body: string | null }) => Promise<unknown> {
return async ( return async (request: { path: string; method: string; body: string | null }) => {
request: { path: string, method: string, body: string | null },
) => {
try { try {
return await handler(request) return await handler(request)
} catch { } catch {
src/api/generated/crabs/evening_detective_server/client.ts
+15 -23
View File
@@ -1,35 +1,27 @@
import { createEveningDetectiveServerClient, type EveningDetectiveServer } from "."; import { createEveningDetectiveServerClient, type EveningDetectiveServer } from '.'
export function buildClient( export function buildClient(getToken?: () => string | null): EveningDetectiveServer {
getToken?: () => string | null, return createEveningDetectiveServerClient(createHttpHandler(getToken))
): EveningDetectiveServer {
return createEveningDetectiveServerClient(
createHttpHandler(
getToken,
)
)
} }
export function createHttpHandler( export function createHttpHandler(
getToken?: () => string | null, getToken?: () => string | null,
): (request: { path: string, method: string, body: string | null }) => Promise<unknown> { ): (request: { path: string; method: string; body: string | null }) => Promise<unknown> {
return async ( return async (request: { path: string; method: string; body: string | null }) => {
request: { path: string, method: string, body: string | null },
) => {
const baseURL = getURL() const baseURL = getURL()
// Формируем полный URL // Формируем полный URL
const url = `${baseURL}/${request.path}`; const url = `${baseURL}/${request.path}`
// Подготавливаем заголовки // Подготавливаем заголовки
const headers: Record<string, string> = { const headers: Record<string, string> = {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}; }
// Добавляем токен, если он есть // Добавляем токен, если он есть
const token = getToken?.(); const token = getToken?.()
if (token) { if (token) {
headers['Authorization'] = `Bearer ${token}`; headers['Authorization'] = `Bearer ${token}`
} }
// Делаем запрос // Делаем запрос
@@ -37,22 +29,22 @@ export function createHttpHandler(
method: request.method, method: request.method,
headers, headers,
body: request.body, // body уже JSON-строка из генератора body: request.body, // body уже JSON-строка из генератора
}); })
if (response.status == 401) { if (response.status == 401) {
throw new Error("unauthorized"); throw new Error('unauthorized')
} }
// Парсим ответ // Парсим ответ
const data = await response.json(); const data = await response.json()
// Возвращаем в формате, который ожидает генератор // Возвращаем в формате, который ожидает генератор
return data; return data
}; }
} }
export function getURL(): string { export function getURL(): string {
const url = import.meta.env.VITE_API_URL || "http://localhost:8090" const url = import.meta.env.VITE_API_URL || 'http://localhost:8090'
// console.log(url) // console.log(url)
return url return url
} }
src/api/generated/crabs/evening_detective_server/index.ts
+500 -438
View File
File diff suppressed because it is too large Load Diff
src/assets/main.css
+1 -1
View File
@@ -8,7 +8,7 @@ body {
} }
@font-face { @font-face {
font-family: "font_old_typer"; font-family: 'font_old_typer';
src: url('@/assets/fonts/a_OldTyper.ttf'); src: url('@/assets/fonts/a_OldTyper.ttf');
} }
src/components/GamesPage.vue
+1 -3
View File
@@ -5,9 +5,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
<template> <template>
<HeaderMenu :add-logout="true" active="games" /> <HeaderMenu :add-logout="true" active="games" />
<div class="center-block-custom content-block"> <div class="center-block-custom content-block">Игры</div>
Игры
</div>
</template> </template>
<style scoped></style> <style scoped></style>
src/components/HeaderMenu.vue
+41 -31
View File
@@ -2,44 +2,43 @@
const props = defineProps({ const props = defineProps({
addLogin: { addLogin: {
type: Boolean, type: Boolean,
required: false required: false,
}, },
addLogout: { addLogout: {
type: Boolean, type: Boolean,
required: false required: false,
}, },
isFoundKey: { isFoundKey: {
type: Boolean, type: Boolean,
required: false required: false,
}, },
active: { active: {
type: String, type: String,
required: false required: false,
} },
}) })
import { DoorOpen } from '@vicons/fa' import { DoorOpen } from '@vicons/fa'
import { Key24Regular } from '@vicons/fluent' import { Key24Regular } from '@vicons/fluent'
import { DoorFrontFilled } from '@vicons/material' import { DoorFrontFilled } from '@vicons/material'
import { Icon } from '@vicons/utils' import { Icon } from '@vicons/utils'
import { useMessage } from 'naive-ui'; import { useMessage } from 'naive-ui'
import { NIcon } from 'naive-ui' import { NIcon } from 'naive-ui'
import { ref } from 'vue'; import { ref } from 'vue'
import { h } from 'vue' import { h } from 'vue'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router'
import { getAuthClient } from '@/api/auth_client'; import { getAuthClient } from '@/api/auth_client'
import { useAuthStore } from '@/stores/auth'; import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore(); const authStore = useAuthStore()
authStore.initFromStorage() authStore.initFromStorage()
const router = useRouter() const router = useRouter()
const client = getAuthClient(); const client = getAuthClient()
const message = useMessage() const message = useMessage()
const permissions = ref<string[]>([]); const permissions = ref<string[]>([])
async function getPermissions() { async function getPermissions() {
permissions.value = [] permissions.value = []
@@ -57,12 +56,9 @@ const goToLogin = () => {
router.push('/login') router.push('/login')
return return
} }
message.create( message.create('Дверь закрыта, куда же подевался ключ?', {
"Дверь закрыта, куда же подевался ключ?", icon: () => h(NIcon, null, { default: () => h(Key24Regular) }),
{ })
icon: () => h(NIcon, null, { default: () => h(Key24Regular) })
}
)
} }
const goToLogout = () => { const goToLogout = () => {
@@ -74,20 +70,36 @@ const goToLogout = () => {
<template> <template>
<div class="menu-block"> <div class="menu-block">
<div class="left-group"> <div class="left-group">
<div class="menu-item-block" :class="{ active: props.active == 'office' }" v-if="authStore.hasRole('user')" <div
@click="router.push('/office')"> class="menu-item-block"
:class="{ active: props.active == 'office' }"
v-if="authStore.hasRole('user')"
@click="router.push('/office')"
>
Кабинет Кабинет
</div> </div>
<div class="menu-item-block" :class="{ active: props.active == 'games' }" v-if="hasPermission('games_page')" <div
@click="router.push('/games')"> class="menu-item-block"
:class="{ active: props.active == 'games' }"
v-if="hasPermission('games_page')"
@click="router.push('/games')"
>
Игры Игры
</div> </div>
<div class="menu-item-block" :class="{ active: props.active == 'scenarios' }" <div
v-if="hasPermission('scenarios_page')" @click="router.push('/scenarios')"> class="menu-item-block"
:class="{ active: props.active == 'scenarios' }"
v-if="hasPermission('scenarios_page')"
@click="router.push('/scenarios')"
>
Мои сценарии Мои сценарии
</div> </div>
<div class="menu-item-block" :class="{ active: props.active == 'users' }" v-if="hasPermission('users_page')" <div
@click="router.push('/users')"> class="menu-item-block"
:class="{ active: props.active == 'users' }"
v-if="hasPermission('users_page')"
@click="router.push('/users')"
>
Пользователи Пользователи
</div> </div>
</div> </div>
@@ -102,9 +114,7 @@ const goToLogout = () => {
</Icon> </Icon>
Войти Войти
</div> </div>
<div v-if="props.addLogout" class="menu-item-block right" @click="goToLogout"> <div v-if="props.addLogout" class="menu-item-block right" @click="goToLogout">Выйти</div>
Выйти
</div>
</div> </div>
</div> </div>
</template> </template>
src/components/LoginPage.vue
+46 -28
View File
@@ -1,11 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { NAutoComplete, NButton, NCard, NCheckbox, NInput, NSpace, NTabPane, NTabs, useMessage } from 'naive-ui' import {
NAutoComplete,
NButton,
NCard,
NCheckbox,
NInput,
NSpace,
NTabPane,
NTabs,
useMessage,
} from 'naive-ui'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'; import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore(); const authStore = useAuthStore()
const router = useRouter() const router = useRouter()
@@ -16,13 +26,12 @@ const email = ref('')
const password = ref('') const password = ref('')
const approval = ref(false) const approval = ref(false)
const options = computed(() => { const options = computed(() => {
return ['@mail.ru', '@yandex.ru', '@gmail.com'].map((suffix) => { return ['@mail.ru', '@yandex.ru', '@gmail.com'].map((suffix) => {
const prefix = email.value.split('@')[0] const prefix = email.value.split('@')[0]
return { return {
label: prefix + suffix, label: prefix + suffix,
value: prefix + suffix value: prefix + suffix,
} }
}) })
}) })
@@ -47,7 +56,7 @@ async function signup() {
message.error(authStore.error) message.error(authStore.error)
return return
} }
message.info("Пароль отправлен на почту") message.info('Пароль отправлен на почту')
} }
</script> </script>
@@ -55,24 +64,25 @@ async function signup() {
<div class="center-block-custom content-block center-middle-block-custom height80"> <div class="center-block-custom content-block center-middle-block-custom height80">
<n-card style="margin-bottom: 16px" class="sign-card"> <n-card style="margin-bottom: 16px" class="sign-card">
<n-tabs type="line" animated> <n-tabs type="line" animated>
<n-tab-pane name="signin" tab="Вход"> <n-tab-pane name="signin" tab="Вход">
<n-space vertical> <n-space vertical>
<div class="form-label">Почта</div> <div class="form-label">Почта</div>
<n-auto-complete v-model:value="email" :input-props="{ <n-auto-complete
v-model:value="email"
:input-props="{
autocomplete: 'disabled', autocomplete: 'disabled',
}" :options="options" placeholder="detective@mail.ru" clearable /> }"
:options="options"
placeholder="detective@mail.ru"
clearable
/>
<div class="form-label">Пароль</div> <div class="form-label">Пароль</div>
<n-input v-model:value="password" type="password" placeholder="********" /> <n-input v-model:value="password" type="password" placeholder="********" />
<div class="form-button-wrapper"> <div class="form-button-wrapper">
<div class="form-label"> <div class="form-label">
<n-button @click="signin" :disabled="email.length == 0 || password.length == 0"> <n-button @click="signin" :disabled="email.length == 0 || password.length == 0">
<span v-if="!authStore.isLoading"> <span v-if="!authStore.isLoading"> Вход </span>
Вход <span v-else> Подождите... </span>
</span>
<span v-else>
Подождите...
</span>
</n-button> </n-button>
</div> </div>
</div> </div>
@@ -84,32 +94,40 @@ async function signup() {
<div class="form-label">Позывной</div> <div class="form-label">Позывной</div>
<n-input v-model:value="username" type="text" placeholder="Шерлок" /> <n-input v-model:value="username" type="text" placeholder="Шерлок" />
<div class="form-label">Почта</div> <div class="form-label">Почта</div>
<n-auto-complete v-model:value="email" :input-props="{ <n-auto-complete
v-model:value="email"
:input-props="{
autocomplete: 'disabled', autocomplete: 'disabled',
}" :options="options" placeholder="detective@mail.ru" clearable /> }"
:options="options"
placeholder="detective@mail.ru"
clearable
/>
<div class="form-label"> <div class="form-label">
<n-checkbox v-model:checked="approval"> <n-checkbox v-model:checked="approval">
Я согласен с Я согласен с
<a href="/user-agreement" target="_blank" class="docs-link">пользовательским соглашением</a><br> <a href="/user-agreement" target="_blank" class="docs-link"
>пользовательским соглашением</a
><br />
и и
<a href="/privacy-policy" target="_blank" class="docs-link">соглашением о персональных данных</a> <a href="/privacy-policy" target="_blank" class="docs-link"
>соглашением о персональных данных</a
>
</n-checkbox> </n-checkbox>
</div> </div>
<div class="form-button-wrapper"> <div class="form-button-wrapper">
<div class="form-label"> <div class="form-label">
<n-button @click="signup" :disabled="username.length == 0 || password.length == 0 || !approval"> <n-button
<span v-if="!authStore.isLoading"> @click="signup"
Регистрация :disabled="username.length == 0 || password.length == 0 || !approval"
</span> >
<span v-else> <span v-if="!authStore.isLoading"> Регистрация </span>
Подождите... <span v-else> Подождите... </span>
</span>
</n-button> </n-button>
</div> </div>
</div> </div>
</n-space> </n-space>
</n-tab-pane> </n-tab-pane>
</n-tabs> </n-tabs>
</n-card> </n-card>
</div> </div>
src/components/OfficePage.vue
+6 -8
View File
@@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue'
import { getAuthClient } from '@/api/auth_client'; import { getAuthClient } from '@/api/auth_client'
import HeaderMenu from '@/components/HeaderMenu.vue' import HeaderMenu from '@/components/HeaderMenu.vue'
import { useAuthStore } from '@/stores/auth'; import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore(); const authStore = useAuthStore()
const client = getAuthClient(); const client = getAuthClient()
const permissions = ref<string[]>([]) const permissions = ref<string[]>([])
@@ -23,9 +23,7 @@ getPermissions()
<HeaderMenu :add-logout="true" active="office" /> <HeaderMenu :add-logout="true" active="office" />
<div class="center-block-custom content-block"> <div class="center-block-custom content-block">
<p> <p>Доброго времени суток, {{ authStore.username }}.</p>
Доброго времени суток, {{ authStore.username }}.
</p>
<p> <p>
{{ authStore.userRoles }} {{ authStore.userRoles }}
</p> </p>
src/components/PlaceBlock.vue
+43 -30
View File
@@ -1,19 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch } from 'naive-ui' import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch } from 'naive-ui'
import type { PropType } from 'vue'; import type { PropType } from 'vue'
import type { Application, Door, Key, Place } from '@/api/generated/crabs/evening_detective_server'; import type { Application, Door, Key, Place } from '@/api/generated/crabs/evening_detective_server'
const props = defineProps({ const props = defineProps({
place: { place: {
type: Object as PropType<Place>, type: Object as PropType<Place>,
required: true required: true,
}, },
mode: { mode: {
type: String, type: String,
required: true required: true,
} },
}) })
const emit = defineEmits<{ 'update:mode': [value: string] }>() const emit = defineEmits<{ 'update:mode': [value: string] }>()
@@ -25,7 +24,7 @@ const updateMode = (mode: string) => {
function onCreateApplication(): Application { function onCreateApplication(): Application {
return { return {
name: undefined, name: undefined,
image: undefined image: undefined,
} }
} }
@@ -33,37 +32,60 @@ function onCreateDoor(): Door {
return { return {
code: undefined, code: undefined,
name: undefined, name: undefined,
keys: undefined keys: undefined,
} }
} }
function onCreateKey(): Key { function onCreateKey(): Key {
return { return {
name: undefined name: undefined,
} }
} }
</script> </script>
<template> <template>
<div v-if="mode == 'mini-add'" class="place-block-plus show-editor-block" @click="updateMode('edit')"> <div
v-if="mode == 'mini-add'"
class="place-block-plus show-editor-block"
@click="updateMode('edit')"
>
<p class="place-image-plus">+</p> <p class="place-image-plus">+</p>
</div> </div>
<div v-if="mode == 'show-editor'" class="place-block show-editor-block" @click="updateMode('edit')"> <div
v-if="mode == 'show-editor'"
class="place-block show-editor-block"
@click="updateMode('edit')"
>
<p>[{{ props.place.code }}] - {{ props.place.name }}</p> <p>[{{ props.place.code }}] - {{ props.place.name }}</p>
<div class="message-content">{{ props.place.text }}</div> <div class="message-content">{{ props.place.text }}</div>
<p v-for="application in props.place.applications" v-bind:key="application.name">{{ application.name }}</p> <p v-for="application in props.place.applications" v-bind:key="application.name">
{{ application.name }}
</p>
</div> </div>
<div v-if="mode == 'edit'" class="place-block"> <div v-if="mode == 'edit'" class="place-block">
<n-space vertical> <n-space vertical>
<n-input-group> <n-input-group>
<n-input :style="{ width: '20%' }" v-model:value="props.place.code" type="text" placeholder='Ы-1' /> <n-input
<n-input :style="{ width: '80%' }" v-model:value="props.place.name" type="text" placeholder='Дом №Ы' /> :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-group>
<n-input v-model:value="props.place.text" type="textarea" :autosize="{ minRows: 3 }" <n-input
placeholder='В начале было слово...' /> 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 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">
@@ -74,9 +96,7 @@ function onCreateKey(): Key {
<n-switch v-model:value="props.place.hidden" /> <n-switch v-model:value="props.place.hidden" />
<n-dynamic-input v-model:value="props.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" />
@@ -85,18 +105,14 @@ function onCreateKey(): Key {
</n-dynamic-input> </n-dynamic-input>
<n-dynamic-input v-model:value="props.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" placeholder="Код" /> <n-input v-model:value="door.code" type="text" placeholder="Код" />
<n-input v-model:value="door.name" type="text" placeholder="Название" /> <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" placeholder="Название" /> <n-input v-model:value="key.name" type="text" placeholder="Название" />
@@ -108,9 +124,7 @@ function onCreateKey(): Key {
</n-dynamic-input> </n-dynamic-input>
<n-dynamic-input v-model:value="props.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" placeholder="Название" /> <n-input v-model:value="key.name" type="text" placeholder="Название" />
@@ -119,7 +133,6 @@ function onCreateKey(): Key {
</n-dynamic-input> </n-dynamic-input>
<slot></slot> <slot></slot>
</n-space> </n-space>
</div> </div>
</template> </template>
src/components/ScenariosEditorPage.vue
+66 -48
View File
@@ -1,18 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { Settings } from '@vicons/carbon' import { Settings } from '@vicons/carbon'
import { Icon } from '@vicons/utils' import { Icon } from '@vicons/utils'
import { NButton, type UploadFileInfo,useMessage } from 'naive-ui'; import { NButton, type UploadFileInfo, useMessage } from 'naive-ui'
import { NCard, NFlex, NInput, NModal, NSpace, NText, NUpload, NUploadDragger } from 'naive-ui' import { NCard, NFlex, NInput, NModal, NSpace, NText, NUpload, NUploadDragger } from 'naive-ui'
import { ref } from 'vue'; import { ref } from 'vue'
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router'
import { getAuthClient } from '@/api/auth_client'; import { getAuthClient } from '@/api/auth_client'
import type { Place, Scenario } from '@/api/generated/crabs/evening_detective_server'; import type { Place, Scenario } from '@/api/generated/crabs/evening_detective_server'
import HeaderMenu from '@/components/HeaderMenu.vue' import HeaderMenu from '@/components/HeaderMenu.vue'
import PlaceBlock from '@/components/PlaceBlock.vue'; import PlaceBlock from '@/components/PlaceBlock.vue'
import router from '@/router'; import router from '@/router'
const client = getAuthClient(); const client = getAuthClient()
const route = useRoute() const route = useRoute()
const scenarioId = route.params.id const scenarioId = route.params.id
@@ -30,7 +30,7 @@ const scenario = ref<Scenario>({
author: undefined, author: undefined,
updatedAt: undefined, updatedAt: undefined,
createdAt: undefined, createdAt: undefined,
publishedAt: undefined publishedAt: undefined,
}) })
const newPlace = ref<Place>({ const newPlace = ref<Place>({
@@ -42,7 +42,7 @@ const newPlace = ref<Place>({
applications: undefined, applications: undefined,
doors: undefined, doors: undefined,
keys: undefined, keys: undefined,
mode: 'mini-add' mode: 'mini-add',
}) })
async function getScenario(id: number) { async function getScenario(id: number) {
@@ -78,7 +78,7 @@ async function updateScenario() {
const resUploadFile = await client.UploadFile({ const resUploadFile = await client.UploadFile({
filename: 'scenarios_' + scenario.value.id + '_' + file.name, filename: 'scenarios_' + scenario.value.id + '_' + file.name,
data: uint8ToBase64(bytes) data: uint8ToBase64(bytes),
}) })
if (resUploadFile.error != '') { if (resUploadFile.error != '') {
message.error(resUploadFile.error!) message.error(resUploadFile.error!)
@@ -101,15 +101,15 @@ async function updateScenario() {
function uint8ToBase64(uint8Array: Uint8Array) { function uint8ToBase64(uint8Array: Uint8Array) {
// Преобразуем Uint8Array в двоичную строку // Преобразуем Uint8Array в двоичную строку
const binaryString = String.fromCharCode(...uint8Array); const binaryString = String.fromCharCode(...uint8Array)
// Кодируем в Base64 // Кодируем в Base64
return btoa(binaryString); return btoa(binaryString)
} }
async function addPlace() { async function addPlace() {
const res = await client.AddScenarioPlace({ const res = await client.AddScenarioPlace({
id: scenario.value.id, id: scenario.value.id,
place: newPlace.value place: newPlace.value,
}) })
if (res.error != '') { if (res.error != '') {
message.error(res.error!) message.error(res.error!)
@@ -125,7 +125,7 @@ async function addPlace() {
hidden: undefined, hidden: undefined,
applications: undefined, applications: undefined,
doors: undefined, doors: undefined,
keys: undefined keys: undefined,
} }
} }
@@ -143,7 +143,7 @@ async function updatePlace(place: Place) {
const res = await client.UpdateScenarioPlace({ const res = await client.UpdateScenarioPlace({
id: scenario.value.id, id: scenario.value.id,
code: place.oldCode, code: place.oldCode,
place: place place: place,
}) })
if (res.error != '') { if (res.error != '') {
message.error(res.error!) message.error(res.error!)
@@ -165,7 +165,6 @@ async function deletePlace(place: Place) {
} }
await getScenario(Number(scenarioId)) await getScenario(Number(scenarioId))
} }
</script> </script>
<template> <template>
@@ -189,7 +188,12 @@ async function deletePlace(place: Place) {
</n-flex> </n-flex>
</PlaceBlock> </PlaceBlock>
<PlaceBlock :place="place" v-model:mode="place.mode" v-for="place in scenario.story?.places" v-bind:key="place.code"> <PlaceBlock
:place="place"
v-model:mode="place.mode"
v-for="place in scenario.story?.places"
v-bind:key="place.code"
>
<n-flex justify="end"> <n-flex justify="end">
<n-button @click="deletePlace(place)" type="error" ghost>Удалить</n-button> <n-button @click="deletePlace(place)" type="error" ghost>Удалить</n-button>
<n-button @click="cancelUpdatePlace(place)">Отмена</n-button> <n-button @click="cancelUpdatePlace(place)">Отмена</n-button>
@@ -201,28 +205,39 @@ async function deletePlace(place: Place) {
<!-- Окно настроек сценария --> <!-- Окно настроек сценария -->
<n-modal v-model:show="showSettingsScenarioModal"> <n-modal v-model:show="showSettingsScenarioModal">
<n-card style="width: 600px" title="Настройки сценария" :bordered="false" size="huge" role="dialog" <n-card
aria-modal="true"> style="width: 600px"
title="Настройки сценария"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<template #header-extra> <template #header-extra>
<n-button @click="showSettingsScenarioModal = false"> <n-button @click="showSettingsScenarioModal = false"> x </n-button>
x
</n-button>
</template> </template>
<n-space vertical> <n-space vertical>
<p> <p>Название</p>
Название <n-input
</p> v-model:value="scenario.name"
<n-input v-model:value="scenario.name" type="text" placeholder='Дело №0 "Следствие ведут овечки"' /> type="text"
placeholder='Дело №0 "Следствие ведут овечки"'
/>
<p class="settings-header"> <p class="settings-header">Описание</p>
Описание <n-input
</p> v-model:value="scenario.description"
<n-input v-model:value="scenario.description" type="textarea" placeholder='Убийство пастуха...' /> type="textarea"
placeholder="Убийство пастуха..."
/>
<p class="settings-header"> <p class="settings-header">Картинка</p>
Картинка <n-input
</p> v-model:value="scenario.image"
<n-input v-model:value="scenario.image" type="text" placeholder='default_scenario.png' disabled /> type="text"
placeholder="default_scenario.png"
disabled
/>
<n-upload multiple directory-dnd :max="1" v-model:file-list="fileList"> <n-upload multiple directory-dnd :max="1" v-model:file-list="fileList">
<n-upload-dragger> <n-upload-dragger>
<n-text style="font-size: 16px"> <n-text style="font-size: 16px">
@@ -231,26 +246,29 @@ async function deletePlace(place: Place) {
</n-upload-dragger> </n-upload-dragger>
</n-upload> </n-upload>
<n-button @click="updateScenario()" ghost> <n-button @click="updateScenario()" ghost> Сохранить изменения </n-button>
Сохранить изменения
</n-button>
<hr class="settings-hr"> <hr class="settings-hr" />
<p> <p>
Введите название сценария <n-text class="name-text" strong>{{ scenario.name }}</n-text> чтобы Введите название сценария
удалить <n-text class="name-text" strong>{{ scenario.name }}</n-text> чтобы удалить его
его
</p> </p>
<n-input v-model:value="deletedScenarioName" type="text" <n-input
placeholder='Дело №0 "Следствие ведут овечки"' /> v-model:value="deletedScenarioName"
<n-button @click="deleteScenario(scenario.id!)" type="error" ghost type="text"
:disabled="deletedScenarioName != scenario.name"> placeholder='Дело №0 "Следствие ведут овечки"'
/>
<n-button
@click="deleteScenario(scenario.id!)"
type="error"
ghost
:disabled="deletedScenarioName != scenario.name"
>
Удалить сценарий Удалить сценарий
</n-button> </n-button>
</n-space> </n-space>
<template #footer> <template #footer> </template>
</template>
</n-card> </n-card>
</n-modal> </n-modal>
</template> </template>
src/components/ScenariosPage.vue
+30 -21
View File
@@ -1,15 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { useMessage } from 'naive-ui'; import { useMessage } from 'naive-ui'
import { NButton, NCard, NInput, NModal } from 'naive-ui' import { NButton, NCard, NInput, NModal } from 'naive-ui'
import { ref } from 'vue'; import { ref } from 'vue'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router'
import { getAuthClient } from '@/api/auth_client'; import { getAuthClient } from '@/api/auth_client'
import type { Scenario } from '@/api/generated/crabs/evening_detective_server'; import type { Scenario } from '@/api/generated/crabs/evening_detective_server'
import HeaderMenu from '@/components/HeaderMenu.vue' import HeaderMenu from '@/components/HeaderMenu.vue'
const client = getAuthClient()
const client = getAuthClient();
const scenarios = ref<Scenario[]>([]) const scenarios = ref<Scenario[]>([])
@@ -46,34 +45,45 @@ getScenarios()
<HeaderMenu :add-logout="true" active="scenarios" /> <HeaderMenu :add-logout="true" active="scenarios" />
<div class="center-block-custom-big content-block"> <div class="center-block-custom-big content-block">
<div class="scenarios-container"> <div class="scenarios-container">
<div class="scenario-block" @click="showAddScenarioModal = true"> <div class="scenario-block" @click="showAddScenarioModal = true">
<div class="scenario-image-block scenario-image-plus">+</div> <div class="scenario-image-block scenario-image-plus">+</div>
<p class="scenario-title">Создать новый сценарий</p> <p class="scenario-title">Создать новый сценарий</p>
</div> </div>
<div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)" v-bind:key="scenario.id"> <div
<div class="scenario-image-block scenario-image" class="scenario-block"
:style="{ backgroundImage: `url(${scenario.image})` }"></div> 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> <p class="scenario-title">{{ scenario.name }}</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Окно создания сценария --> <!-- Окно создания сценария -->
<n-modal v-model:show="showAddScenarioModal"> <n-modal v-model:show="showAddScenarioModal">
<n-card style="width: 600px" title="Создание сценария" :bordered="false" size="huge" role="dialog" <n-card
aria-modal="true"> style="width: 600px"
title="Создание сценария"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<template #header-extra> <template #header-extra>
<n-button @click="showAddScenarioModal = false"> <n-button @click="showAddScenarioModal = false"> x </n-button>
x
</n-button>
</template> </template>
<n-input v-model:value="newScenarioName" type="text" placeholder='Дело №0 "Следствие ведут овечки"' /> <n-input
v-model:value="newScenarioName"
type="text"
placeholder='Дело №0 "Следствие ведут овечки"'
/>
<template #footer> <template #footer>
<n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0"> <n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
Создать Создать
@@ -81,7 +91,6 @@ getScenarios()
</template> </template>
</n-card> </n-card>
</n-modal> </n-modal>
</template> </template>
<style scoped> <style scoped>
src/components/UsersPage.vue
+1 -3
View File
@@ -5,9 +5,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
<template> <template>
<HeaderMenu :add-logout="true" active="users" /> <HeaderMenu :add-logout="true" active="users" />
<div class="center-block-custom content-block"> <div class="center-block-custom content-block">Пользователи</div>
Пользователи
</div>
</template> </template>
<style scoped></style> <style scoped></style>
src/stores/auth.ts
+81 -81
View File
@@ -1,35 +1,35 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia'
import { computed,ref } from 'vue'; import { computed, ref } from 'vue'
import { type User } from '@/api/generated/crabs/evening_detective_server'; import { type User } from '@/api/generated/crabs/evening_detective_server'
import { buildClient } from '@/api/generated/crabs/evening_detective_server/client'; import { buildClient } from '@/api/generated/crabs/evening_detective_server/client'
export const useAuthStore = defineStore('auth', () => { export const useAuthStore = defineStore('auth', () => {
// ===== STATE ===== // ===== STATE =====
const accessToken = ref<string | null>(null); const accessToken = ref<string | null>(null)
const refreshToken = ref<string | null>(null); const refreshToken = ref<string | null>(null)
const user = ref<User | null>(null); const user = ref<User | null>(null)
const isLoading = ref(false); const isLoading = ref(false)
const error = ref<string | null>(null); const error = ref<string | null>(null)
// ===== GETTERS ===== // ===== GETTERS =====
const isAuthenticated = computed(() => !!accessToken.value); const isAuthenticated = computed(() => !!accessToken.value)
const username = computed(() => user.value?.username || ''); const username = computed(() => user.value?.username || '')
const userRoles = computed(() => user.value?.roles || []); const userRoles = computed(() => user.value?.roles || [])
// ===== ACTIONS ===== // ===== ACTIONS =====
// Инициализация из localStorage при загрузке // Инициализация из localStorage при загрузке
function initFromStorage() { function initFromStorage() {
const token = localStorage.getItem('accessToken'); const token = localStorage.getItem('accessToken')
const refresh = localStorage.getItem('refreshToken'); const refresh = localStorage.getItem('refreshToken')
if (token) { if (token) {
accessToken.value = token; accessToken.value = token
refreshToken.value = refresh; refreshToken.value = refresh
// Получаем данные пользователя // Получаем данные пользователя
fetchUser(); fetchUser()
} }
} }
@@ -39,162 +39,162 @@ export const useAuthStore = defineStore('auth', () => {
// Получение данных пользователя // Получение данных пользователя
async function fetchUser() { async function fetchUser() {
if (!accessToken.value) return; if (!accessToken.value) return
try { try {
const client = buildClient(getToken); const client = buildClient(getToken)
const response = await client.GetMe({}); const response = await client.GetMe({})
if (response.error) { if (response.error) {
error.value = response.error; error.value = response.error
return; return
} }
if (response.user) { if (response.user) {
user.value = response.user; user.value = response.user
} }
} catch (err) { } catch (err) {
console.error('Failed to fetch user:', err); console.error('Failed to fetch user:', err)
// Если 401 — токен протух // Если 401 — токен протух
if (err instanceof Error && err.message.includes('401')) { if (err instanceof Error && err.message.includes('401')) {
await logout(); await logout()
} }
} }
} }
// Логин // Логин
async function login(email: string, password: string) { async function login(email: string, password: string) {
isLoading.value = true; isLoading.value = true
error.value = null; error.value = null
try { try {
const client = buildClient(getToken); const client = buildClient(getToken)
const response = await client.Login({ email, password }); const response = await client.Login({ email, password })
if (response.error) { if (response.error) {
error.value = response.error; error.value = response.error
return false; return false
} }
// Сохраняем токены // Сохраняем токены
if (response.accessToken) { if (response.accessToken) {
accessToken.value = response.accessToken; accessToken.value = response.accessToken
refreshToken.value = response.refreshToken || null; refreshToken.value = response.refreshToken || null
// Сохраняем в localStorage // Сохраняем в localStorage
localStorage.setItem('accessToken', response.accessToken); localStorage.setItem('accessToken', response.accessToken)
if (response.refreshToken) { if (response.refreshToken) {
localStorage.setItem('refreshToken', response.refreshToken); localStorage.setItem('refreshToken', response.refreshToken)
} }
// Получаем данные пользователя // Получаем данные пользователя
await fetchUser(); await fetchUser()
return true; return true
} }
return false; return false
} catch (err) { } catch (err) {
error.value = err instanceof Error ? err.message : 'Login failed'; error.value = err instanceof Error ? err.message : 'Login failed'
return false; return false
} finally { } finally {
isLoading.value = false; isLoading.value = false
} }
} }
// Обновление токена // Обновление токена
async function refreshTokenAction() { async function refreshTokenAction() {
if (!refreshToken.value) return false; if (!refreshToken.value) return false
try { try {
const client = buildClient(getToken); const client = buildClient(getToken)
const response = await client.Refresh({ const response = await client.Refresh({
refreshToken: refreshToken.value refreshToken: refreshToken.value,
}); })
if (response.error || !response.accessToken) { if (response.error || !response.accessToken) {
return false; return false
} }
// Обновляем токены // Обновляем токены
accessToken.value = response.accessToken; accessToken.value = response.accessToken
refreshToken.value = response.refreshToken || null; refreshToken.value = response.refreshToken || null
localStorage.setItem('accessToken', response.accessToken); localStorage.setItem('accessToken', response.accessToken)
if (response.refreshToken) { if (response.refreshToken) {
localStorage.setItem('refreshToken', response.refreshToken); localStorage.setItem('refreshToken', response.refreshToken)
} }
return true; return true
} catch { } catch {
return false; return false
} }
} }
// Регистрация // Регистрация
async function signup(username: string, email: string) { async function signup(username: string, email: string) {
isLoading.value = true; isLoading.value = true
error.value = null; error.value = null
try { try {
const client = buildClient(getToken); const client = buildClient(getToken)
const response = await client.Signup({ username, email }); const response = await client.Signup({ username, email })
if (response.error) { if (response.error) {
error.value = response.error; error.value = response.error
return false; return false
} }
return true return true
} catch (err) { } catch (err) {
error.value = err instanceof Error ? err.message : 'Signup failed'; error.value = err instanceof Error ? err.message : 'Signup failed'
return false; return false
} finally { } finally {
isLoading.value = false; isLoading.value = false
} }
} }
// Восстановление пароля // Восстановление пароля
async function refreshPassword(email: string) { async function refreshPassword(email: string) {
isLoading.value = true; isLoading.value = true
error.value = null; error.value = null
try { try {
const client = buildClient(getToken); const client = buildClient(getToken)
const response = await client.RefreshPassword({ email }); const response = await client.RefreshPassword({ email })
if (response.error) { if (response.error) {
error.value = response.error; error.value = response.error
return false; return false
} }
return true; return true
} catch (err) { } catch (err) {
error.value = err instanceof Error ? err.message : 'Password reset failed'; error.value = err instanceof Error ? err.message : 'Password reset failed'
return false; return false
} finally { } finally {
isLoading.value = false; isLoading.value = false
} }
} }
// Выход // Выход
async function logout() { async function logout() {
accessToken.value = null; accessToken.value = null
refreshToken.value = null; refreshToken.value = null
user.value = null; user.value = null
error.value = null; error.value = null
localStorage.removeItem('accessToken'); localStorage.removeItem('accessToken')
localStorage.removeItem('refreshToken'); localStorage.removeItem('refreshToken')
} }
// Проверка ролей // Проверка ролей
function hasRole(role: string): boolean { function hasRole(role: string): boolean {
return userRoles.value.includes(role); return userRoles.value.includes(role)
} }
function hasAnyRole(roles: string[]): boolean { function hasAnyRole(roles: string[]): boolean {
return roles.some(role => userRoles.value.includes(role)); return roles.some((role) => userRoles.value.includes(role))
} }
// ===== RETURN ===== // ===== RETURN =====
@@ -222,5 +222,5 @@ export const useAuthStore = defineStore('auth', () => {
refreshTokenAction, refreshTokenAction,
hasRole, hasRole,
hasAnyRole, hasAnyRole,
}; }
}); })
src/views/GamesView.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import GamesPage from '@/components/GamesPage.vue'; import GamesPage from '@/components/GamesPage.vue'
</script> </script>
<template> <template>
src/views/HomeView.vue
+5 -9
View File
@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Key24Regular } from '@vicons/fluent' import { Key24Regular } from '@vicons/fluent'
import { Icon } from '@vicons/utils' import { Icon } from '@vicons/utils'
import { computed, ref } from 'vue'; import { computed, ref } from 'vue'
import HeaderMenu from '@/components/HeaderMenu.vue' import HeaderMenu from '@/components/HeaderMenu.vue'
@@ -9,7 +9,7 @@ const isFoundKey = ref(false)
const keyColorClass = computed(() => { const keyColorClass = computed(() => {
return { return {
'gold-color': isFoundKey.value 'gold-color': isFoundKey.value,
} }
}) })
</script> </script>
@@ -18,12 +18,8 @@ const keyColorClass = computed(() => {
<HeaderMenu :add-login="true" :is-found-key="isFoundKey" /> <HeaderMenu :add-login="true" :is-found-key="isFoundKey" />
<div class="center-block-custom content-block center-middle-block-custom height80"> <div class="center-block-custom content-block center-middle-block-custom height80">
<div> <div>
<h1 class="font-text"> <h1 class="font-text">Вечерний детектив</h1>
Вечерний детектив <h3 class="font-text">Дело №0</h3>
</h1>
<h3 class="font-text">
Дело №0
</h3>
<p class="content-text"> <p class="content-text">
Поиграем? Поиграем?
<Icon class="key-icon" :class="keyColorClass" @click="isFoundKey = !isFoundKey"> <Icon class="key-icon" :class="keyColorClass" @click="isFoundKey = !isFoundKey">
@@ -36,7 +32,7 @@ const keyColorClass = computed(() => {
<style lang="css"> <style lang="css">
.font-text { .font-text {
font-family: "font_old_typer"; font-family: 'font_old_typer';
} }
.content-text { .content-text {
src/views/LoginView.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import LoginPage from '@/components/LoginPage.vue'; import LoginPage from '@/components/LoginPage.vue'
</script> </script>
<template> <template>
src/views/OfficeView.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import OfficePage from '@/components/OfficePage.vue'; import OfficePage from '@/components/OfficePage.vue'
</script> </script>
<template> <template>
src/views/PrivacyPolicyView.vue
+1 -3
View File
@@ -1,7 +1,5 @@
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template> <template>Соглашением о персональных данных</template>
Соглашением о персональных данных
</template>
<style lang="css"></style> <style lang="css"></style>
src/views/ScenariosEditorView.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import ScenariosEditorPage from '@/components/ScenariosEditorPage.vue'; import ScenariosEditorPage from '@/components/ScenariosEditorPage.vue'
</script> </script>
<template> <template>
src/views/ScenariosView.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import ScenariosPage from '@/components/ScenariosPage.vue'; import ScenariosPage from '@/components/ScenariosPage.vue'
</script> </script>
<template> <template>
src/views/UserAgreementView.vue
+1 -3
View File
@@ -1,7 +1,5 @@
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template> <template>Пользовательское соглашение</template>
Пользовательское соглашение
</template>
<style lang="css"></style> <style lang="css"></style>
src/views/UsersView.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import UsersPage from '@/components/UsersPage.vue'; import UsersPage from '@/components/UsersPage.vue'
</script> </script>
<template> <template>