Compare commits
21 Commits
d7d61f9de3
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 635941f635 | |||
| 80db9ede92 | |||
| d374730343 | |||
| d94614c793 | |||
| e28d5f2658 | |||
| ede741df4f | |||
| 8ba21f915f | |||
| 4dfecf7fcf | |||
| 4415e9508e | |||
| 5c3df7a2a4 | |||
| ad2e2e80cb | |||
| cff5e3488e | |||
| 960f58be06 | |||
| 83637636f8 | |||
| 17868d3a7b | |||
| f9e0c068f4 | |||
| 8f4996fb2b | |||
| e391c16468 | |||
| d6059f4325 | |||
| c4a1c2cde0 | |||
| df460f57ab |
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
15
Dockerfile
Normal file
15
Dockerfile
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
# Build stage
|
||||||
|
FROM node:20-alpine as build-stage
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package*.json ./
|
||||||
|
# Используем npm ci для надежной установки зависимостей из package-lock.json
|
||||||
|
RUN npm ci
|
||||||
|
COPY . .
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Production stage
|
||||||
|
FROM nginx:stable-alpine as production-stage
|
||||||
|
COPY --from=build-stage /app/dist /usr/share/nginx/html
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
nginx.conf
Normal file
21
nginx.conf
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Gzip сжатие для ускорения загрузки
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
||||||
|
|
||||||
|
# Для SPA: все запросы, которые не соответствуют файлу, перенаправляются на index.html
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Кэширование статических файлов
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
}
|
||||||
1940
package-lock.json
generated
Normal file
1940
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
package.json
Normal file
26
package.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.10.0",
|
||||||
|
"pinia": "^3.0.3",
|
||||||
|
"skinview3d": "^3.4.1",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "^4.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.14.9",
|
||||||
|
"@vitejs/plugin-vue": "^5.2.3",
|
||||||
|
"@vue/tsconfig": "^0.7.0",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"vite": "^6.3.5",
|
||||||
|
"vue-tsc": "^2.2.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
59
src/App.vue
Normal file
59
src/App.vue
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<router-link to="/">Главная</router-link> | <router-link to="/servers">Мониторинг</router-link> |
|
||||||
|
<template v-if="!authStore.isAuthenticated">
|
||||||
|
<router-link to="/login">Вход</router-link> |
|
||||||
|
<router-link to="/register">Регистрация</router-link>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<router-link v-if="authStore.user?.role === 'admin'" to="/admin">Админ-панель</router-link> |
|
||||||
|
<router-link to="/account">Личный кабинет</router-link>
|
||||||
|
<span>Привет, {{ authStore.user?.username }}!</span> |
|
||||||
|
<a @click="authStore.handleLogout" href="#">Выход</a>
|
||||||
|
</template>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<router-view />
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
import { useAuthStore } from "@/stores/auth";
|
||||||
|
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
|
||||||
|
// Восстанавливаем сессию при загрузке приложения
|
||||||
|
onMounted(() => {
|
||||||
|
authStore.checkAuth();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
header {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
nav a {
|
||||||
|
margin: 0 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
nav a.router-link-exact-active {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
10
src/api/auth.ts
Normal file
10
src/api/auth.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import type { RegisterRequest, LoginRequest, LoginResponse } from "@/types";
|
||||||
|
import apiClient from "./axios";
|
||||||
|
|
||||||
|
export const registerUser = (userData: RegisterRequest) => {
|
||||||
|
return apiClient.post("/register", userData);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loginUser = (credentials: LoginRequest) => {
|
||||||
|
return apiClient.post<LoginResponse>("/login", credentials);
|
||||||
|
};
|
||||||
26
src/api/axios.ts
Normal file
26
src/api/axios.ts
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const apiClient = axios.create({
|
||||||
|
// Vite предоставляет переменную import.meta.env.VITE_API_URL
|
||||||
|
// В режиме разработки это будет прокси, в продакшене - реальный URL
|
||||||
|
baseURL: import.meta.env.VITE_API_URL || "/api",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Мы можем добавить interceptor для автоматического добавления JWT
|
||||||
|
apiClient.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
const token = localStorage.getItem("authToken");
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
return Promise.reject(error);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export default apiClient;
|
||||||
7
src/api/user.ts
Normal file
7
src/api/user.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import apiClient from "./axios";
|
||||||
|
import type { SessionProfileResponse } from "@/types";
|
||||||
|
|
||||||
|
export const getUserProfile = (uuid: string) => {
|
||||||
|
// Этот эндпоинт не начинается с /api, поэтому указываем полный путь
|
||||||
|
return apiClient.get<SessionProfileResponse>(`/sessionserver/session/minecraft/profile/${uuid}`);
|
||||||
|
};
|
||||||
12
src/main.ts
Normal file
12
src/main.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { createApp } from "vue";
|
||||||
|
import { createPinia } from "pinia"; // Импортируем Pinia
|
||||||
|
import App from "./App.vue";
|
||||||
|
import router from "./router"; // Импортируем наш роутер
|
||||||
|
import "./style.css"; // Глобальные стили
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
|
||||||
|
app.use(createPinia()); // Подключаем Pinia
|
||||||
|
app.use(router); // Подключаем роутер
|
||||||
|
|
||||||
|
app.mount("#app");
|
||||||
72
src/router/index.ts
Normal file
72
src/router/index.ts
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
|
import HomeView from "../views/HomeView.vue";
|
||||||
|
import { useAuthStore } from "@/stores/auth";
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
name: "home",
|
||||||
|
component: HomeView,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/login",
|
||||||
|
name: "login",
|
||||||
|
component: () => import("../views/LoginView.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/register",
|
||||||
|
name: "register",
|
||||||
|
component: () => import("../views/RegisterView.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/account",
|
||||||
|
name: "account",
|
||||||
|
component: () => import("../views/AccountView.vue"),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/servers",
|
||||||
|
name: "servers",
|
||||||
|
component: () => import("../views/ServersView.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/admin",
|
||||||
|
name: "admin",
|
||||||
|
component: () => import("../views/admin/AdminLayout.vue"),
|
||||||
|
meta: { requiresAuth: true, requiresAdmin: true },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name: "admin-dashboard",
|
||||||
|
component: () => import("../views/admin/DashboardView.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "users",
|
||||||
|
name: "admin-users",
|
||||||
|
component: () => import("../views/admin/UsersView.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "modpacks",
|
||||||
|
name: "admin-modpacks",
|
||||||
|
component: () => import("../views/admin/ModpacksView.vue"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes,
|
||||||
|
});
|
||||||
|
|
||||||
|
router.beforeEach((to, _from, next) => {
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
|
||||||
|
next({ name: "login" });
|
||||||
|
} else if (to.meta.requiresAdmin && authStore.user?.role !== "admin") {
|
||||||
|
next({ name: "home" });
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
export default router;
|
||||||
125
src/stores/auth.ts
Normal file
125
src/stores/auth.ts
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { ref, computed } from "vue";
|
||||||
|
import { registerUser as apiRegisterUser, loginUser as apiLoginUser } from "@/api/auth";
|
||||||
|
import { getUserProfile as apiGetUserProfile } from "@/api/user";
|
||||||
|
import type { RegisterRequest, User, LoginRequest } from "@/types";
|
||||||
|
import router from "@/router";
|
||||||
|
import apiClient from "@/api/axios";
|
||||||
|
|
||||||
|
export const useAuthStore = defineStore("auth", () => {
|
||||||
|
// State
|
||||||
|
const user = ref<User | null>(null);
|
||||||
|
const token = ref<string | null>(localStorage.getItem("authToken"));
|
||||||
|
const skinUrl = ref<string | null>(null);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const error = ref<string | null>(null);
|
||||||
|
|
||||||
|
// === Getters ===
|
||||||
|
const isAuthenticated = computed(() => !!user.value && !!token.value);
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
async function fetchUserProfile() {
|
||||||
|
if (!user.value) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiGetUserProfile(user.value.uuid);
|
||||||
|
if (response.data && response.data.properties) {
|
||||||
|
const textureProp = response.data.properties.find((p) => p.name === "textures");
|
||||||
|
if (textureProp) {
|
||||||
|
const textureData = JSON.parse(atob(textureProp.value));
|
||||||
|
if (textureData.textures?.SKIN?.url) {
|
||||||
|
skinUrl.value = textureData.textures.SKIN.url;
|
||||||
|
} else {
|
||||||
|
skinUrl.value = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to fetch user profile:", e);
|
||||||
|
skinUrl.value = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function setAuthData(userData: User, authToken: string) {
|
||||||
|
user.value = userData;
|
||||||
|
token.value = authToken;
|
||||||
|
localStorage.setItem("authToken", authToken);
|
||||||
|
apiClient.defaults.headers.common["Authorization"] = `Bearer ${authToken}`;
|
||||||
|
fetchUserProfile();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleLogin(credentials: LoginRequest) {
|
||||||
|
isLoading.value = true;
|
||||||
|
error.value = null;
|
||||||
|
try {
|
||||||
|
const response = await apiLoginUser(credentials);
|
||||||
|
setAuthData(response.data.user, response.data.token);
|
||||||
|
await router.push({ name: "home" });
|
||||||
|
} catch (e: any) {
|
||||||
|
if (e.response && e.response.data) {
|
||||||
|
error.value = e.response.data;
|
||||||
|
} else {
|
||||||
|
error.value = "Произошла неизвестная ошибка при входе";
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleRegister(userData: RegisterRequest) {
|
||||||
|
isLoading.value = true;
|
||||||
|
error.value = null;
|
||||||
|
try {
|
||||||
|
await apiRegisterUser(userData);
|
||||||
|
await router.push({ name: "login" });
|
||||||
|
} catch (e: any) {
|
||||||
|
if (e.response && e.response.data) {
|
||||||
|
error.value = e.response.data;
|
||||||
|
} else {
|
||||||
|
error.value = "Произошла неизвестная ошибка";
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Функция для выхода
|
||||||
|
function handleLogout() {
|
||||||
|
user.value = null;
|
||||||
|
token.value = null;
|
||||||
|
skinUrl.value = null;
|
||||||
|
localStorage.removeItem("authToken");
|
||||||
|
delete apiClient.defaults.headers.common["Authorization"];
|
||||||
|
router.push({ name: "login" });
|
||||||
|
}
|
||||||
|
|
||||||
|
async function checkAuth() {
|
||||||
|
isLoading.value = true;
|
||||||
|
if (token.value) {
|
||||||
|
try {
|
||||||
|
apiClient.defaults.headers.common["Authorization"] = `Bearer ${token.value}`;
|
||||||
|
const response = await apiClient.get("/api/user/me");
|
||||||
|
user.value = response.data;
|
||||||
|
await fetchUserProfile();
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Session restoration failed:", e);
|
||||||
|
handleLogout();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
// State
|
||||||
|
user,
|
||||||
|
token,
|
||||||
|
skinUrl,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
// Getters
|
||||||
|
isAuthenticated,
|
||||||
|
// Actions
|
||||||
|
handleLogin,
|
||||||
|
handleRegister,
|
||||||
|
handleLogout,
|
||||||
|
fetchUserProfile,
|
||||||
|
checkAuth,
|
||||||
|
};
|
||||||
|
});
|
||||||
79
src/style.css
Normal file
79
src/style.css
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
:root {
|
||||||
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
41
src/types.ts
Normal file
41
src/types.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
// Тип для запроса на регистрацию, должен совпадать с бэкендом
|
||||||
|
export interface RegisterRequest {
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Тип для запроса на логин
|
||||||
|
export interface LoginRequest {
|
||||||
|
login: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Тип для ответа с бэкенда
|
||||||
|
export interface LoginResponse {
|
||||||
|
token: string;
|
||||||
|
user: User;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Тип для объекта пользователя
|
||||||
|
export interface User {
|
||||||
|
id: number;
|
||||||
|
uuid: string;
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
role: string;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProfileProperty {
|
||||||
|
name: string;
|
||||||
|
value: string; // Base64-encoded JSON
|
||||||
|
signature: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SessionProfileResponse {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
properties: ProfileProperty[];
|
||||||
|
}
|
||||||
181
src/views/AccountView.vue
Normal file
181
src/views/AccountView.vue
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account-container">
|
||||||
|
<h1>Личный кабинет</h1>
|
||||||
|
<div v-if="authStore.user" class="user-info">
|
||||||
|
<p><strong>Имя пользователя:</strong> {{ authStore.user.username }}</p>
|
||||||
|
<p><strong>Email:</strong> {{ authStore.user.email }}</p>
|
||||||
|
<p><strong>Роль:</strong> {{ authStore.user.role }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skin-manager">
|
||||||
|
<h2>Управление скином</h2>
|
||||||
|
<div class="skin-preview">
|
||||||
|
<canvas ref="skinCanvas" class="skin-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent="onSkinUpload" class="skin-upload-form">
|
||||||
|
<label for="skin-file">Загрузить новый скин (PNG, 64x64)</label>
|
||||||
|
<input id="skin-file" type="file" @change="onFileSelected" accept="image/png" />
|
||||||
|
<button type="submit" :disabled="!selectedFile || isLoading">
|
||||||
|
{{ isLoading ? "Загрузка..." : "Загрузить" }}
|
||||||
|
</button>
|
||||||
|
<div v-if="uploadError" class="error-message">{{ uploadError }}</div>
|
||||||
|
<div v-if="uploadSuccess" class="success-message">Скин успешно обновлен!</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||||
|
import { useAuthStore } from "@/stores/auth";
|
||||||
|
import { SkinViewer } from "skinview3d";
|
||||||
|
import apiClient from "@/api/axios";
|
||||||
|
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
|
||||||
|
// Для 3D-вьювера
|
||||||
|
const skinCanvas = ref<HTMLCanvasElement | null>(null);
|
||||||
|
let skinViewer: SkinViewer | null = null;
|
||||||
|
|
||||||
|
// Для формы загрузки
|
||||||
|
const selectedFile = ref<File | null>(null);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const uploadError = ref<string | null>(null);
|
||||||
|
const uploadSuccess = ref(false);
|
||||||
|
|
||||||
|
const onFileSelected = (event: Event) => {
|
||||||
|
const target = event.target as HTMLInputElement;
|
||||||
|
if (target.files && target.files[0]) {
|
||||||
|
selectedFile.value = target.files[0];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSkinUpload = async () => {
|
||||||
|
if (!selectedFile.value) return;
|
||||||
|
|
||||||
|
isLoading.value = true;
|
||||||
|
uploadError.value = null;
|
||||||
|
uploadSuccess.value = false;
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("skin", selectedFile.value);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await apiClient.post("/user/skin", formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
uploadSuccess.value = true;
|
||||||
|
// Обновляем скин во вьювере после успешной загрузки
|
||||||
|
if (skinViewer) {
|
||||||
|
skinViewer.loadSkin(URL.createObjectURL(selectedFile.value));
|
||||||
|
}
|
||||||
|
await authStore.fetchUserProfile();
|
||||||
|
} catch (e: any) {
|
||||||
|
uploadError.value = e.response?.data || "Ошибка при загрузке файла.";
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setupSkinViewer = () => {
|
||||||
|
if (skinCanvas.value && !skinViewer) {
|
||||||
|
skinViewer = new SkinViewer({
|
||||||
|
canvas: skinCanvas.value,
|
||||||
|
width: 300,
|
||||||
|
height: 400,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Следим за изменением URL скина в сторе и обновляем вьювер
|
||||||
|
watch(
|
||||||
|
() => authStore.skinUrl,
|
||||||
|
(newUrl) => {
|
||||||
|
if (skinViewer) {
|
||||||
|
if (newUrl) {
|
||||||
|
skinViewer.loadSkin(newUrl);
|
||||||
|
} else {
|
||||||
|
// Если у пользователя нет скина, показываем скин по умолчанию
|
||||||
|
skinViewer.loadSkin("/default_skin.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
// Инициализация 3D-вьювера при монтировании компонента
|
||||||
|
onMounted(() => {
|
||||||
|
setupSkinViewer();
|
||||||
|
if (!authStore.skinUrl && authStore.isAuthenticated) {
|
||||||
|
authStore.fetchUserProfile();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Очистка ресурсов при размонтировании
|
||||||
|
onUnmounted(() => {
|
||||||
|
skinViewer?.dispose();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.account-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.user-info {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.skin-manager {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.skin-preview {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.skin-canvas {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.skin-upload-form {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.error-message,
|
||||||
|
.success-message {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.error-message {
|
||||||
|
background-color: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
border: 1px solid #f5c6cb;
|
||||||
|
}
|
||||||
|
.success-message {
|
||||||
|
background-color: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
border: 1px solid #c3e6cb;
|
||||||
|
}
|
||||||
|
input[type="file"] {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background-color: #42b983;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
3
src/views/HomeView.vue
Normal file
3
src/views/HomeView.vue
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<h1>Главная страница</h1>
|
||||||
|
</template>
|
||||||
112
src/views/LoginView.vue
Normal file
112
src/views/LoginView.vue
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login-container">
|
||||||
|
<form @submit.prevent="onSubmit" class="login-form">
|
||||||
|
<h1>Вход</h1>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="login">Имя пользователя или Email</label>
|
||||||
|
<input id="login" v-model="login" type="text" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Пароль</label>
|
||||||
|
<input id="password" v-model="password" type="password" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="authStore.error" class="error-message">
|
||||||
|
{{ authStore.error }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" :disabled="authStore.isLoading">
|
||||||
|
{{ authStore.isLoading ? "Вход..." : "Войти" }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onUnmounted } from "vue";
|
||||||
|
import { useAuthStore } from "@/stores/auth";
|
||||||
|
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
|
||||||
|
const login = ref("");
|
||||||
|
const password = ref("");
|
||||||
|
|
||||||
|
const onSubmit = async () => {
|
||||||
|
if (!login.value || !password.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await authStore.handleLogin({
|
||||||
|
login: login.value,
|
||||||
|
password: password.value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
authStore.error = null;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Стили можно скопировать из RegisterView.vue или вынести в общий файл */
|
||||||
|
.login-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
.login-form {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.error-message {
|
||||||
|
background-color: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 1px solid #f5c6cb;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background-color: #42b983;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background-color: #36a476;
|
||||||
|
}
|
||||||
|
button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
136
src/views/RegisterView.vue
Normal file
136
src/views/RegisterView.vue
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
<template>
|
||||||
|
<div class="register-container">
|
||||||
|
<form @submit.prevent="onSubmit" class="register-form">
|
||||||
|
<h1>Регистрация</h1>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="username">Имя пользователя</label>
|
||||||
|
<input id="username" v-model="username" type="text" required minlength="3" maxlength="16" pattern="^[a-zA-Z0-9_]+$" />
|
||||||
|
<small>От 3 до 16 символов. Только буквы, цифры и `_`.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email</label>
|
||||||
|
<input id="email" v-model="email" type="email" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Пароль</label>
|
||||||
|
<input id="password" v-model="password" type="password" required minlength="8" />
|
||||||
|
<small>Минимум 8 символов.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="authStore.error" class="error-message">
|
||||||
|
{{ authStore.error }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" :disabled="authStore.isLoading">
|
||||||
|
{{ authStore.isLoading ? "Регистрация..." : "Зарегистрироваться" }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useAuthStore } from "@/stores/auth";
|
||||||
|
|
||||||
|
// Используем наш Pinia store
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
|
||||||
|
// Реактивные переменные для полей формы
|
||||||
|
const username = ref("");
|
||||||
|
const email = ref("");
|
||||||
|
const password = ref("");
|
||||||
|
|
||||||
|
// Функция, вызываемая при отправке формы
|
||||||
|
const onSubmit = async () => {
|
||||||
|
// Простая валидация на клиенте (хотя основная на бэкенде)
|
||||||
|
if (!username.value || !email.value || !password.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await authStore.handleRegister({
|
||||||
|
username: username.value,
|
||||||
|
email: email.value,
|
||||||
|
password: password.value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.register-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box; /* Важно для правильного расчета ширины */
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
background-color: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 1px solid #f5c6cb;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background-color: #42b983;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #36a476;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
163
src/views/ServersView.vue
Normal file
163
src/views/ServersView.vue
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
<template>
|
||||||
|
<div class="servers-container">
|
||||||
|
<h1>Мониторинг серверов</h1>
|
||||||
|
<div v-if="isLoading" class="loading">Загрузка данных...</div>
|
||||||
|
<div v-if="error" class="error-message">{{ error }}</div>
|
||||||
|
|
||||||
|
<div class="ping-info">
|
||||||
|
Ваш пинг до сервера:
|
||||||
|
<span v-if="clientProxyPing !== null">{{ clientProxyPing }} мс</span>
|
||||||
|
<span v-else>измерение...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="server-list">
|
||||||
|
<div v-for="server in servers" :key="server.id" class="server-card">
|
||||||
|
<h3>{{ server.name }}</h3>
|
||||||
|
<p class="motd" v-html="formatMotd(server.motd)"></p>
|
||||||
|
<div class="status">
|
||||||
|
<span class="online-status" :class="{ 'is-online': server.player_count !== null }">
|
||||||
|
{{ server.player_count !== null ? "Online" : "Offline" }}
|
||||||
|
</span>
|
||||||
|
<span class="players" v-if="server.player_count !== null"> {{ server.player_count }} / {{ server.max_players }} </span>
|
||||||
|
</div>
|
||||||
|
<div class="ping">
|
||||||
|
Общий пинг:
|
||||||
|
<span v-if="totalPing(server) !== null">{{ totalPing(server) }} мс</span>
|
||||||
|
<span v-else>N/A</span>
|
||||||
|
</div>
|
||||||
|
<div class="version">{{ server.version_name }}</div>
|
||||||
|
<div v-if="server.bluemap_url" class="bluemap-link">
|
||||||
|
<a :href="server.bluemap_url" target="_blank" rel="noopener noreferrer">Карта мира</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from "vue";
|
||||||
|
import apiClient from "@/api/axios";
|
||||||
|
|
||||||
|
// Тип для сервера, можно вынести в types.ts
|
||||||
|
interface GameServer {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
motd: string | null;
|
||||||
|
player_count: number | null;
|
||||||
|
max_players: number | null;
|
||||||
|
version_name: string | null;
|
||||||
|
ping_proxy_server: number | null;
|
||||||
|
bluemap_url: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const servers = ref<GameServer[]>([]);
|
||||||
|
const isLoading = ref(true);
|
||||||
|
const error = ref<string | null>(null);
|
||||||
|
const clientProxyPing = ref<number | null>(null);
|
||||||
|
|
||||||
|
let ws: WebSocket | null = null;
|
||||||
|
let pingInterval: number | null = null;
|
||||||
|
|
||||||
|
const fetchServers = async () => {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get<GameServer[]>("/servers");
|
||||||
|
servers.value = response.data;
|
||||||
|
} catch (e) {
|
||||||
|
error.value = "Не удалось загрузить список серверов.";
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setupWebSocket = () => {
|
||||||
|
const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||||
|
const wsUrl = `${wsProtocol}//${window.location.host}/ws/ping`;
|
||||||
|
|
||||||
|
ws = new WebSocket(wsUrl);
|
||||||
|
|
||||||
|
ws.onopen = () => {
|
||||||
|
console.log("WebSocket connection established.");
|
||||||
|
pingInterval = window.setInterval(() => {
|
||||||
|
if (ws?.readyState === WebSocket.OPEN) {
|
||||||
|
ws.send(Date.now().toString());
|
||||||
|
}
|
||||||
|
}, 5000);
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onmessage = (event) => {
|
||||||
|
const serverTimestamp = parseInt(event.data, 10);
|
||||||
|
clientProxyPing.value = Date.now() - serverTimestamp;
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onclose = () => {
|
||||||
|
console.log("WebSocket connection closed.");
|
||||||
|
if (pingInterval) clearInterval(pingInterval);
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onerror = (err) => {
|
||||||
|
console.error("WebSocket error:", err);
|
||||||
|
error.value = "Ошибка подключения к WebSocket.";
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const totalPing = (server: GameServer) => {
|
||||||
|
if (clientProxyPing.value !== null && server.ping_proxy_server !== null) {
|
||||||
|
return clientProxyPing.value + server.ping_proxy_server;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Функция для форматирования MOTD с кодами цвета Minecraft
|
||||||
|
const formatMotd = (motd: string | null) => {
|
||||||
|
if (!motd) return "";
|
||||||
|
return motd.replace(/§[0-9a-fk-or]/g, "");
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchServers();
|
||||||
|
setupWebSocket();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (ws) {
|
||||||
|
ws.close();
|
||||||
|
}
|
||||||
|
if (pingInterval) {
|
||||||
|
clearInterval(pingInterval);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* ... добавьте стили для карточек серверов ... */
|
||||||
|
.server-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.server-card {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.ping-info {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.bluemap-link {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.bluemap-link a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
background-color: #3eaf7c;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
.bluemap-link a:hover {
|
||||||
|
background-color: #339265;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
48
src/views/admin/AdminLayout.vue
Normal file
48
src/views/admin/AdminLayout.vue
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="admin-layout">
|
||||||
|
<aside class="admin-sidebar">
|
||||||
|
<h2>Админ-панель</h2>
|
||||||
|
<nav>
|
||||||
|
<router-link :to="{ name: 'admin-dashboard' }">Дашборд</router-link>
|
||||||
|
<router-link :to="{ name: 'admin-users' }">Пользователи</router-link>
|
||||||
|
<router-link :to="{ name: 'admin-modpacks' }">Модпаки</router-link>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
<main class="admin-content">
|
||||||
|
<router-view />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.admin-layout {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.admin-sidebar {
|
||||||
|
width: 200px;
|
||||||
|
background: #f4f4f4;
|
||||||
|
padding: 1rem;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.admin-sidebar h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.admin-sidebar nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.admin-sidebar nav a {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.admin-sidebar nav a.router-link-exact-active {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.admin-content {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
src/views/admin/DashboardView.vue
Normal file
1
src/views/admin/DashboardView.vue
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<template><h1>Дашборд</h1></template>
|
||||||
598
src/views/admin/ModpacksView.vue
Normal file
598
src/views/admin/ModpacksView.vue
Normal file
@@ -0,0 +1,598 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Управление модпаками</h1>
|
||||||
|
|
||||||
|
<div class="import-section">
|
||||||
|
<h2>Импорт нового модпака</h2>
|
||||||
|
<form @submit.prevent="handleImport" class="import-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Тип сборки</label>
|
||||||
|
<select v-model="form.importerType">
|
||||||
|
<option value="simple">Простой ZIP</option>
|
||||||
|
<option value="curseforge">CurseForge</option>
|
||||||
|
<option value="modrinth">Modrinth (.mrpack)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Метод импорта</label>
|
||||||
|
<div class="radio-group">
|
||||||
|
<label><input type="radio" v-model="form.importMethod" value="file" /> Файл</label>
|
||||||
|
<label
|
||||||
|
><input type="radio" v-model="form.importMethod" value="url" :disabled="form.importerType !== 'curseforge'" />
|
||||||
|
URL</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Поля для метаданных -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Системное имя (латиница, без пробелов)</label>
|
||||||
|
<input id="name" v-model="form.name" type="text" required pattern="^[a-zA-Z0-9_]+$" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="displayName">Отображаемое имя</label>
|
||||||
|
<input id="displayName" v-model="form.displayName" type="text" required />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="mcVersion">Версия Minecraft</label>
|
||||||
|
<input id="mcVersion" v-model="form.mcVersion" type="text" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Поля для источника -->
|
||||||
|
<div v-if="form.importMethod === 'file'" class="form-group">
|
||||||
|
<label for="modpack-file">Файл модпака (.zip, .mrpack)</label>
|
||||||
|
<input id="modpack-file" type="file" @change="onFileSelected" :required="form.importMethod === 'file'" accept=".zip,.mrpack" />
|
||||||
|
</div>
|
||||||
|
<div v-if="form.importMethod === 'url'" class="form-group">
|
||||||
|
<label for="sourceUrl">URL страницы модпака на CurseForge</label>
|
||||||
|
<input id="sourceUrl" v-model="form.sourceUrl" type="url" :required="form.importMethod === 'url'" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="importJob.jobId" class="job-status">
|
||||||
|
<h3>Статус импорта</h3>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress" :style="{ width: importJob.progress + '%' }"></div>
|
||||||
|
</div>
|
||||||
|
<p>{{ importJob.message }} ({{ importJob.progress }}%)</p>
|
||||||
|
<div v-if="importJob.status === 'failed'" class="error-message">Ошибка: {{ importJob.message }}</div>
|
||||||
|
<div v-if="importJob.status === 'completed'" class="success-message">Импорт успешно завершен!</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="error && !importJob.jobId" class="error-message">{{ error }}</div>
|
||||||
|
<!-- <div v-if="successMessage" class="success-message">{{ successMessage }}</div> -->
|
||||||
|
|
||||||
|
<button type="submit" :disabled="isLoading || (importJob.jobId !== null && importJob.status !== 'completed' && importJob.status !== 'failed')">
|
||||||
|
{{ isLoading ? "Запуск..." : "Импортировать" }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- СПИСОК МОДПАКОВ -->
|
||||||
|
<div class="modpacks-section">
|
||||||
|
<h2>Существующие модпаки</h2>
|
||||||
|
<div v-if="modpacksLoading">Загрузка...</div>
|
||||||
|
<table v-else-if="modpacks.length > 0" class="modpacks-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Имя</th>
|
||||||
|
<th>Отображаемое имя</th>
|
||||||
|
<th>MC Version</th>
|
||||||
|
<th>Обновлено</th>
|
||||||
|
<th>Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="m in modpacks" :key="m.id">
|
||||||
|
<td>{{ m.name }}</td>
|
||||||
|
<td>{{ m.display_name }}</td>
|
||||||
|
<td>{{ m.minecraft_version }}</td>
|
||||||
|
<td>{{ formatDate(m.updated_at) }}</td>
|
||||||
|
<td>
|
||||||
|
<button @click="openUpdateModal(m)" class="btn-small">Обновить</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p v-else>Нет модпаков</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- МОДАЛЬНОЕ ОКНО ОБНОВЛЕНИЯ -->
|
||||||
|
<div v-if="updateModal.show" class="modal-overlay" @click.self="closeUpdateModal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h3>Обновить модпак: {{ updateModal.modpack?.name }}</h3>
|
||||||
|
<form @submit.prevent="handleUpdate" class="import-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Тип сборки</label>
|
||||||
|
<select v-model="updateForm.importerType">
|
||||||
|
<option value="simple">Простой ZIP</option>
|
||||||
|
<option value="curseforge">CurseForge</option>
|
||||||
|
<option value="modrinth">Modrinth (.mrpack)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Метод импорта</label>
|
||||||
|
<div class="radio-group">
|
||||||
|
<label><input type="radio" v-model="updateForm.importMethod" value="file" /> Файл</label>
|
||||||
|
<label><input type="radio" v-model="updateForm.importMethod" value="url" :disabled="updateForm.importerType !== 'curseforge'" /> URL</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Версия Minecraft (опционально)</label>
|
||||||
|
<input v-model="updateForm.mcVersion" type="text" :placeholder="updateModal.modpack?.minecraft_version" />
|
||||||
|
</div>
|
||||||
|
<div v-if="updateForm.importMethod === 'file'" class="form-group">
|
||||||
|
<label>Файл модпака</label>
|
||||||
|
<input type="file" @change="onUpdateFileSelected" accept=".zip,.mrpack" />
|
||||||
|
</div>
|
||||||
|
<div v-if="updateForm.importMethod === 'url'" class="form-group">
|
||||||
|
<label>URL страницы модпака</label>
|
||||||
|
<input v-model="updateForm.sourceUrl" type="url" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="updateJob.jobId" class="job-status">
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress" :style="{ width: updateJob.progress + '%' }"></div>
|
||||||
|
</div>
|
||||||
|
<p>{{ updateJob.message }} ({{ updateJob.progress }}%)</p>
|
||||||
|
<div v-if="updateJob.status === 'failed'" class="error-message">Ошибка: {{ updateJob.message }}</div>
|
||||||
|
<div v-if="updateJob.status === 'completed'" class="success-message">Обновление завершено!</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button type="submit" :disabled="updateLoading || (updateJob.jobId !== null && updateJob.status !== 'completed' && updateJob.status !== 'failed')">
|
||||||
|
{{ updateLoading ? "Запуск..." : "Обновить" }}
|
||||||
|
</button>
|
||||||
|
<button type="button" @click="closeUpdateModal" class="btn-secondary">Отмена</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch, onMounted, onUnmounted } from "vue";
|
||||||
|
import apiClient from "@/api/axios";
|
||||||
|
import { useAuthStore } from "@/stores/auth";
|
||||||
|
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
|
||||||
|
// ===== Интерфейсы =====
|
||||||
|
interface Modpack {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
display_name: string;
|
||||||
|
minecraft_version: string;
|
||||||
|
is_active: boolean;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== Состояние списка модпаков =====
|
||||||
|
const modpacks = ref<Modpack[]>([]);
|
||||||
|
const modpacksLoading = ref(true);
|
||||||
|
|
||||||
|
// ===== Форма импорта =====
|
||||||
|
const form = reactive({
|
||||||
|
name: "",
|
||||||
|
displayName: "",
|
||||||
|
mcVersion: "",
|
||||||
|
file: null as File | null,
|
||||||
|
importerType: "simple",
|
||||||
|
importMethod: "file",
|
||||||
|
sourceUrl: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const error = ref<string | null>(null);
|
||||||
|
const successMessage = ref<string | null>(null);
|
||||||
|
|
||||||
|
// Состояние задачи импорта
|
||||||
|
const importJob = reactive({
|
||||||
|
jobId: null as number | null,
|
||||||
|
status: "" as string,
|
||||||
|
progress: 0,
|
||||||
|
message: "" as string,
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== Модальное окно обновления =====
|
||||||
|
const updateModal = reactive({
|
||||||
|
show: false,
|
||||||
|
modpack: null as Modpack | null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateForm = reactive({
|
||||||
|
importerType: "simple",
|
||||||
|
importMethod: "file",
|
||||||
|
mcVersion: "",
|
||||||
|
sourceUrl: "",
|
||||||
|
file: null as File | null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateLoading = ref(false);
|
||||||
|
const updateJob = reactive({
|
||||||
|
jobId: null as number | null,
|
||||||
|
status: "" as string,
|
||||||
|
progress: 0,
|
||||||
|
message: "" as string,
|
||||||
|
});
|
||||||
|
|
||||||
|
let ws: WebSocket | null = null;
|
||||||
|
|
||||||
|
// ===== Watchers =====
|
||||||
|
watch(
|
||||||
|
() => form.importerType,
|
||||||
|
(newType) => {
|
||||||
|
if (newType !== "curseforge" && form.importMethod === "url") {
|
||||||
|
form.importMethod = "file";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => updateForm.importerType,
|
||||||
|
(newType) => {
|
||||||
|
if (newType !== "curseforge" && updateForm.importMethod === "url") {
|
||||||
|
updateForm.importMethod = "file";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// ===== Helpers =====
|
||||||
|
const formatDate = (dateStr: string) => {
|
||||||
|
return new Date(dateStr).toLocaleString();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusMessage = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'pending': return 'Ожидание очереди...';
|
||||||
|
case 'downloading': return 'Скачивание файлов...';
|
||||||
|
case 'processing': return 'Обработка...';
|
||||||
|
case 'completed': return 'Готово';
|
||||||
|
case 'failed': return 'Ошибка';
|
||||||
|
default: return status;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== Fetching =====
|
||||||
|
const fetchModpacks = async () => {
|
||||||
|
modpacksLoading.value = true;
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get<Modpack[]>("/admin/modpacks");
|
||||||
|
modpacks.value = response.data || [];
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to fetch modpacks", e);
|
||||||
|
} finally {
|
||||||
|
modpacksLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== File handlers =====
|
||||||
|
const onFileSelected = (event: Event) => {
|
||||||
|
const target = event.target as HTMLInputElement;
|
||||||
|
if (target.files && target.files[0]) {
|
||||||
|
form.file = target.files[0];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onUpdateFileSelected = (event: Event) => {
|
||||||
|
const target = event.target as HTMLInputElement;
|
||||||
|
if (target.files && target.files[0]) {
|
||||||
|
updateForm.file = target.files[0];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== WebSocket =====
|
||||||
|
const connectWebSocket = (targetJob: { jobId: number | null; status: string; progress: number; message: string }, onComplete?: () => void) => {
|
||||||
|
if (ws) {
|
||||||
|
ws.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||||
|
const host = window.location.host;
|
||||||
|
const url = `${protocol}//${host}/api/admin/ws/jobs?token=${authStore.token}`;
|
||||||
|
|
||||||
|
ws = new WebSocket(url);
|
||||||
|
|
||||||
|
ws.onmessage = (event) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
if (data.job_id === targetJob.jobId) {
|
||||||
|
targetJob.status = data.status;
|
||||||
|
targetJob.progress = data.progress;
|
||||||
|
targetJob.message = data.error_message || getStatusMessage(data.status);
|
||||||
|
|
||||||
|
if (data.status === 'completed') {
|
||||||
|
isLoading.value = false;
|
||||||
|
updateLoading.value = false;
|
||||||
|
if (onComplete) onComplete();
|
||||||
|
} else if (data.status === 'failed') {
|
||||||
|
isLoading.value = false;
|
||||||
|
updateLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("WS parse error", e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onclose = () => {
|
||||||
|
console.log("WS closed");
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== Modal handlers =====
|
||||||
|
const openUpdateModal = (modpack: Modpack) => {
|
||||||
|
updateModal.show = true;
|
||||||
|
updateModal.modpack = modpack;
|
||||||
|
updateForm.importerType = "simple";
|
||||||
|
updateForm.importMethod = "file";
|
||||||
|
updateForm.mcVersion = "";
|
||||||
|
updateForm.sourceUrl = "";
|
||||||
|
updateForm.file = null;
|
||||||
|
updateJob.jobId = null;
|
||||||
|
updateJob.status = "";
|
||||||
|
updateJob.progress = 0;
|
||||||
|
updateJob.message = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeUpdateModal = () => {
|
||||||
|
updateModal.show = false;
|
||||||
|
updateModal.modpack = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== Import handler =====
|
||||||
|
const handleImport = async () => {
|
||||||
|
if (form.importMethod === "file" && !form.file) {
|
||||||
|
error.value = "Пожалуйста, выберите файл для импорта.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (form.importMethod === "url" && !form.sourceUrl) {
|
||||||
|
error.value = "Пожалуйста, введите URL.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoading.value = true;
|
||||||
|
error.value = null;
|
||||||
|
successMessage.value = null;
|
||||||
|
|
||||||
|
importJob.jobId = null;
|
||||||
|
importJob.status = "";
|
||||||
|
importJob.progress = 0;
|
||||||
|
importJob.message = "";
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("name", form.name);
|
||||||
|
formData.append("displayName", form.displayName);
|
||||||
|
formData.append("mcVersion", form.mcVersion);
|
||||||
|
formData.append("importerType", form.importerType);
|
||||||
|
formData.append("importMethod", form.importMethod);
|
||||||
|
|
||||||
|
if (form.importMethod === "file" && form.file) {
|
||||||
|
formData.append("file", form.file);
|
||||||
|
} else if (form.importMethod === "url") {
|
||||||
|
formData.append("sourceUrl", form.sourceUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post("/admin/modpacks/import", formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status === 202 && response.data.job_id) {
|
||||||
|
importJob.jobId = response.data.job_id;
|
||||||
|
importJob.status = 'pending';
|
||||||
|
importJob.message = 'Задача создана...';
|
||||||
|
connectWebSocket(importJob, fetchModpacks);
|
||||||
|
} else {
|
||||||
|
successMessage.value = response.data;
|
||||||
|
isLoading.value = false;
|
||||||
|
fetchModpacks();
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e.response?.data || "Произошла ошибка при импорте.";
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== Update handler =====
|
||||||
|
const handleUpdate = async () => {
|
||||||
|
if (!updateModal.modpack) return;
|
||||||
|
|
||||||
|
if (updateForm.importMethod === "file" && !updateForm.file) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (updateForm.importMethod === "url" && !updateForm.sourceUrl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateLoading.value = true;
|
||||||
|
updateJob.jobId = null;
|
||||||
|
updateJob.status = "";
|
||||||
|
updateJob.progress = 0;
|
||||||
|
updateJob.message = "";
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("modpackName", updateModal.modpack.name);
|
||||||
|
formData.append("importerType", updateForm.importerType);
|
||||||
|
formData.append("importMethod", updateForm.importMethod);
|
||||||
|
if (updateForm.mcVersion) {
|
||||||
|
formData.append("mcVersion", updateForm.mcVersion);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (updateForm.importMethod === "file" && updateForm.file) {
|
||||||
|
formData.append("file", updateForm.file);
|
||||||
|
} else if (updateForm.importMethod === "url") {
|
||||||
|
formData.append("sourceUrl", updateForm.sourceUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post("/admin/modpacks/update", formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status === 202 && response.data.job_id) {
|
||||||
|
updateJob.jobId = response.data.job_id;
|
||||||
|
updateJob.status = 'pending';
|
||||||
|
updateJob.message = 'Задача создана...';
|
||||||
|
connectWebSocket(updateJob, () => {
|
||||||
|
fetchModpacks();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
updateLoading.value = false;
|
||||||
|
fetchModpacks();
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Update error", e);
|
||||||
|
updateLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== Lifecycle =====
|
||||||
|
onMounted(() => {
|
||||||
|
fetchModpacks();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (ws) ws.close();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.import-section {
|
||||||
|
max-width: 600px;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.import-form .form-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.import-form label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.import-form input,
|
||||||
|
.import-form select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.radio-group label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
.error-message,
|
||||||
|
.success-message {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.error-message {
|
||||||
|
background-color: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
border: 1px solid #f5c6cb;
|
||||||
|
}
|
||||||
|
.success-message {
|
||||||
|
background-color: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
border: 1px solid #c3e6cb;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background-color: #42b983;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modpacks List Section */
|
||||||
|
.modpacks-section {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.modpacks-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.modpacks-table th,
|
||||||
|
.modpacks-table td {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 0.75rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.modpacks-table th {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.btn-small {
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Overlay */
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
background: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
max-width: 500px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: #6c757d;
|
||||||
|
}
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background-color: #5a6268;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress bar */
|
||||||
|
.progress-bar {
|
||||||
|
height: 20px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
background: #42b983;
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
.job-status {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
88
src/views/admin/UsersView.vue
Normal file
88
src/views/admin/UsersView.vue
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Управление пользователями</h1>
|
||||||
|
<div v-if="isLoading">Загрузка...</div>
|
||||||
|
<table v-else>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Username</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Роль</th>
|
||||||
|
<th>Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="user in users" :key="user.uuid">
|
||||||
|
<td>{{ user.id }}</td>
|
||||||
|
<td>{{ user.username }}</td>
|
||||||
|
<td>{{ user.email }}</td>
|
||||||
|
<td>
|
||||||
|
<select v-model="user.role" @change="updateRole(user)">
|
||||||
|
<option value="user">user</option>
|
||||||
|
<option value="admin">admin</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
<td><button @click="updateRole(user)">Сохранить</button></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import apiClient from "@/api/axios";
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
id: number;
|
||||||
|
uuid: string;
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
role: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const users = ref<User[]>([]);
|
||||||
|
const isLoading = ref(true);
|
||||||
|
|
||||||
|
const fetchUsers = async () => {
|
||||||
|
isLoading.value = true;
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get<User[]>("/admin/users");
|
||||||
|
users.value = response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch users:", error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateRole = async (user: User) => {
|
||||||
|
try {
|
||||||
|
await apiClient.patch(`/admin/users/${user.id}/role`, { role: user.role });
|
||||||
|
alert(`Роль для ${user.username} обновлена.`);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to update role:", error);
|
||||||
|
alert("Ошибка при обновлении роли.");
|
||||||
|
fetchUsers();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(fetchUsers);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 8px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
21
tsconfig.app.json
Normal file
21
tsconfig.app.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true,
|
||||||
|
|
||||||
|
/* Path Aliases */
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
14
tsconfig.node.json
Normal file
14
tsconfig.node.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"target": "ES2022",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"types": ["node"]
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
2
vite.config.d.ts
vendored
Normal file
2
vite.config.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
declare const _default: import("vite").UserConfig;
|
||||||
|
export default _default;
|
||||||
20
vite.config.js
Normal file
20
vite.config.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
import { URL, fileURLToPath } from "node:url";
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
"^/api|/authserver|/sessionserver": {
|
||||||
|
target: "http://localhost:8080",
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
21
vite.config.ts
Normal file
21
vite.config.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
import { URL, fileURLToPath } from "node:url";
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
"^/api|/authserver|/sessionserver": {
|
||||||
|
target: "http://localhost:8080",
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user