feat(admin): add modpack import page

src/App.vue

@@ -8,6 +8,7 @@
             </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>

src/router/index.ts

@@ -29,6 +29,29 @@ const routes = [
     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({
@@ -40,6 +63,8 @@ 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();
   }

src/stores/auth.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref, computed } from "vue";
-import { registerUser as apiRegisterUser } from "@/api/auth";
+import { registerUser as apiRegisterUser, loginUser as apiLoginUser } from "@/api/auth";
 import { getUserProfile as apiGetUserProfile } from "@/api/user";
 import type { RegisterRequest } from "@/types";
 import router from "@/router";
@@ -26,12 +26,11 @@ export const useAuthStore = defineStore("auth", () => {
       if (response.data && response.data.properties) {
         const textureProp = response.data.properties.find((p) => p.name === "textures");
         if (textureProp) {
-          // Декодируем Base64-строку и парсим JSON
           const textureData = JSON.parse(atob(textureProp.value));
           if (textureData.textures?.SKIN?.url) {
             skinUrl.value = textureData.textures.SKIN.url;
           } else {
-            skinUrl.value = null; // У пользователя нет скина
+            skinUrl.value = null;
           }
         }
       }

src/types.ts

@@ -19,6 +19,7 @@ export interface LoginResponse {
 
 // Тип для объекта пользователя
 export interface User {
+  id: number;
   uuid: string;
   username: string;
   email: string;

src/views/AccountView.vue

@@ -78,9 +78,6 @@ const onSkinUpload = async () => {
         isLoading.value = false;
     }
 };
-// --- Логика для 3D-вьювера ---
-const skinCanvas = ref<HTMLCanvasElement | null>(null);
-let skinViewer: SkinViewer | null = null;
 
 const setupSkinViewer = () => {
     if (skinCanvas.value && !skinViewer) {

src/views/admin/AdminLayout.vue

@@ -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>

src/views/admin/DashboardView.vue

@@ -0,0 +1 @@
+<template><h1>Дашборд</h1></template>

src/views/admin/ModpacksView.vue

@@ -0,0 +1,148 @@
+<template>
+    <div>
+        <h1>Управление модпаками</h1>
+
+        <div class="import-section">
+            <h2>Импорт нового модпака</h2>
+            <form @submit.prevent="handleImport" class="import-form">
+                <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 class="form-group">
+                    <label for="modpack-file">Файл модпака (.zip)</label>
+                    <input id="modpack-file" type="file" @change="onFileSelected" required accept=".zip" />
+                </div>
+
+                <div v-if="error" class="error-message">{{ error }}</div>
+                <div v-if="successMessage" class="success-message">{{ successMessage }}</div>
+
+                <button type="submit" :disabled="isLoading">
+                    {{ isLoading ? "Импорт..." : "Импортировать" }}
+                </button>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import apiClient from "@/api/axios";
+
+const form = reactive({
+    name: "",
+    displayName: "",
+    mcVersion: "",
+    file: null as File | null,
+});
+
+const isLoading = ref(false);
+const error = ref<string | null>(null);
+const successMessage = ref<string | null>(null);
+
+const onFileSelected = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+        form.file = target.files[0];
+    }
+};
+
+const handleImport = async () => {
+    if (!form.file) {
+        error.value = "Пожалуйста, выберите файл для импорта.";
+        return;
+    }
+
+    isLoading.value = true;
+    error.value = null;
+    successMessage.value = null;
+
+    const formData = new FormData();
+    formData.append("name", form.name);
+    formData.append("displayName", form.displayName);
+    formData.append("mcVersion", form.mcVersion);
+    formData.append("file", form.file);
+
+    try {
+        const response = await apiClient.post("/admin/modpacks/import", formData, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        });
+        successMessage.value = response.data;
+    } catch (e: any) {
+        error.value = e.response?.data || "Произошла ошибка при импорте.";
+    } finally {
+        isLoading.value = false;
+    }
+};
+</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 {
+    width: 100%;
+    padding: 0.5rem;
+    box-sizing: border-box;
+}
+
+.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;
+}
+</style>

src/views/admin/UsersView.vue

@@ -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>