feat(account): implement user account page with skin upload

2025-06-17 12:01:08 +03:00
parent d6059f4325
commit e391c16468
5 changed files with 235 additions and 5 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "axios": "^1.10.0",
        "pinia": "^3.0.3",
+        "skinview3d": "^3.4.1",
        "vue": "^3.5.13",
        "vue-router": "^4.5.1"
      },
@@ -785,6 +786,30 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.156.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.156.0.tgz",
+      "integrity": "sha512-733bXDSRdlrxqOmQuOmfC1UBRuJ2pREPk8sWnx9MtIJEVDQMx8U0NQO5MVVaOrjzDPyLI+cFPim2X/ss9v0+LQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.6.10",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.22",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.22.tgz",
+      "integrity": "sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==",
+      "license": "MIT"
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "5.2.4",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -1261,6 +1286,12 @@
        }
      }
    },
+    "node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
    "node_modules/follow-redirects": {
      "version": "1.15.9",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -1455,6 +1486,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "license": "MIT"
+    },
    "node_modules/mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1656,6 +1693,23 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/skinview-utils": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.7.1.tgz",
+      "integrity": "sha512-4eLrMqR526ehlZbsd8SuZ/CHpS9GiH0xUMoV+PYlJVi95ZFz5HJu7Spt5XYa72DRS7wgt5qquvHZf0XZJgmu9Q==",
+      "license": "MIT"
+    },
+    "node_modules/skinview3d": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/skinview3d/-/skinview3d-3.4.1.tgz",
+      "integrity": "sha512-WVN1selfDSAoQB7msLs3ueJjW/pge3nsmbqxJeXPnN/qIJ1GJKpMZO8mavSvMojaMrmpSgOJWfYUkK9B34ts2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "^0.156.0",
+        "skinview-utils": "^0.7.1",
+        "three": "^0.156.0"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1686,6 +1740,12 @@
        "node": ">=16"
      }
    },
+    "node_modules/three": {
+      "version": "0.156.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.156.1.tgz",
+      "integrity": "sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.14",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
  "dependencies": {
    "axios": "^1.10.0",
    "pinia": "^3.0.3",
+    "skinview3d": "^3.4.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.1"
  },
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,14 +3,13 @@
        <nav>
            <router-link to="/">Главная</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 to="/account">Личный кабинет</router-link>
                <span>Привет, {{ authStore.user?.username }}!</span> |
                <a @click="authStore.handleLogout" href="#">Выход</a>
            </template>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
-import HomeView from "../views/HomeView.vue"; // Мы создадим его позже
+import HomeView from "../views/HomeView.vue";

 const routes = [
  {
@@ -10,7 +10,6 @@ const routes = [
  {
    path: "/login",
    name: "login",
-    // Ленивая загрузка (lazy-loading) для страниц, которые не нужны сразу
    component: () => import("../views/LoginView.vue"),
  },
  {
@@ -18,7 +17,12 @@ const routes = [
    name: "register",
    component: () => import("../views/RegisterView.vue"),
  },
-  // Здесь будут другие роуты: личный кабинет, мониторинг и т.д.
+  {
+    path: "/account",
+    name: "account",
+    component: () => import("../views/AccountView.vue"),
+    meta: { requiresAuth: true },
+  },
 ];

 const router = createRouter({
@@ -26,4 +30,12 @@ const router = createRouter({
  routes,
 });

+router.beforeEach((to, from, next) => {
+  const authStore = useAuthStore();
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    next({ name: "login" });
+  } else {
+    next();
+  }
+});
 export default router;
--- a/src/views/AccountView.vue
+++ b/src/views/AccountView.vue
@@ -0,0 +1,158 @@
+<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));
+        }
+    } catch (e: any) {
+        uploadError.value = e.response?.data || "Ошибка при загрузке файла.";
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+// Инициализация 3D-вьювера при монтировании компонента
+onMounted(() => {
+    if (skinCanvas.value) {
+        skinViewer = new SkinViewer({
+            canvas: skinCanvas.value,
+            width: 300,
+            height: 400,
+            skin: "/default_skin.png",
+        });
+    }
+});
+
+// Очистка ресурсов при размонтировании
+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>