Compare commits
2 Commits
cff5e3488e
...
5c3df7a2a4
| Author | SHA1 | Date | |
|---|---|---|---|
| 5c3df7a2a4 | |||
| ad2e2e80cb |
@@ -5,24 +5,48 @@
|
|||||||
<div class="import-section">
|
<div class="import-section">
|
||||||
<h2>Импорт нового модпака</h2>
|
<h2>Импорт нового модпака</h2>
|
||||||
<form @submit.prevent="handleImport" class="import-form">
|
<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" disabled>Modrinth (в разработке)</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">
|
<div class="form-group">
|
||||||
<label for="name">Системное имя (латиница, без пробелов)</label>
|
<label for="name">Системное имя (латиница, без пробелов)</label>
|
||||||
<input id="name" v-model="form.name" type="text" required pattern="^[a-zA-Z0-9_]+$" />
|
<input id="name" v-model="form.name" type="text" required pattern="^[a-zA-Z0-9_]+$" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="displayName">Отображаемое имя</label>
|
<label for="displayName">Отображаемое имя</label>
|
||||||
<input id="displayName" v-model="form.displayName" type="text" required />
|
<input id="displayName" v-model="form.displayName" type="text" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="mcVersion">Версия Minecraft</label>
|
<label for="mcVersion">Версия Minecraft</label>
|
||||||
<input id="mcVersion" v-model="form.mcVersion" type="text" required />
|
<input id="mcVersion" v-model="form.mcVersion" type="text" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<!-- Поля для источника -->
|
||||||
|
<div v-if="form.importMethod === 'file'" class="form-group">
|
||||||
<label for="modpack-file">Файл модпака (.zip)</label>
|
<label for="modpack-file">Файл модпака (.zip)</label>
|
||||||
<input id="modpack-file" type="file" @change="onFileSelected" required accept=".zip" />
|
<input id="modpack-file" type="file" @change="onFileSelected" :required="form.importMethod === 'file'" accept=".zip" />
|
||||||
|
</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>
|
||||||
|
|
||||||
<div v-if="error" class="error-message">{{ error }}</div>
|
<div v-if="error" class="error-message">{{ error }}</div>
|
||||||
@@ -37,7 +61,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive } from "vue";
|
import { ref, reactive, watch } from "vue";
|
||||||
import apiClient from "@/api/axios";
|
import apiClient from "@/api/axios";
|
||||||
|
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
@@ -45,12 +69,24 @@ const form = reactive({
|
|||||||
displayName: "",
|
displayName: "",
|
||||||
mcVersion: "",
|
mcVersion: "",
|
||||||
file: null as File | null,
|
file: null as File | null,
|
||||||
|
importerType: "simple",
|
||||||
|
importMethod: "file",
|
||||||
|
sourceUrl: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
const error = ref<string | null>(null);
|
const error = ref<string | null>(null);
|
||||||
const successMessage = ref<string | null>(null);
|
const successMessage = ref<string | null>(null);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => form.importerType,
|
||||||
|
(newType) => {
|
||||||
|
if (newType !== "curseforge" && form.importMethod === "url") {
|
||||||
|
form.importMethod = "file";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
const onFileSelected = (event: Event) => {
|
const onFileSelected = (event: Event) => {
|
||||||
const target = event.target as HTMLInputElement;
|
const target = event.target as HTMLInputElement;
|
||||||
if (target.files && target.files[0]) {
|
if (target.files && target.files[0]) {
|
||||||
@@ -59,10 +95,14 @@ const onFileSelected = (event: Event) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleImport = async () => {
|
const handleImport = async () => {
|
||||||
if (!form.file) {
|
if (form.importMethod === "file" && !form.file) {
|
||||||
error.value = "Пожалуйста, выберите файл для импорта.";
|
error.value = "Пожалуйста, выберите файл для импорта.";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (form.importMethod === "url" && !form.sourceUrl) {
|
||||||
|
error.value = "Пожалуйста, введите URL.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
error.value = null;
|
error.value = null;
|
||||||
@@ -72,7 +112,14 @@ const handleImport = async () => {
|
|||||||
formData.append("name", form.name);
|
formData.append("name", form.name);
|
||||||
formData.append("displayName", form.displayName);
|
formData.append("displayName", form.displayName);
|
||||||
formData.append("mcVersion", form.mcVersion);
|
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);
|
formData.append("file", form.file);
|
||||||
|
} else if (form.importMethod === "url") {
|
||||||
|
formData.append("sourceUrl", form.sourceUrl);
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await apiClient.post("/admin/modpacks/import", formData, {
|
const response = await apiClient.post("/admin/modpacks/import", formData, {
|
||||||
@@ -97,22 +144,23 @@ const handleImport = async () => {
|
|||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-form .form-group {
|
.import-form .form-group {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-form label {
|
.import-form label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
.import-form input,
|
||||||
.import-form input {
|
.import-form select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
.radio-group label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
.error-message,
|
.error-message,
|
||||||
.success-message {
|
.success-message {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
@@ -120,19 +168,16 @@ const handleImport = async () => {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
background-color: #f8d7da;
|
background-color: #f8d7da;
|
||||||
color: #721c24;
|
color: #721c24;
|
||||||
border: 1px solid #f5c6cb;
|
border: 1px solid #f5c6cb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.success-message {
|
.success-message {
|
||||||
background-color: #d4edda;
|
background-color: #d4edda;
|
||||||
color: #155724;
|
color: #155724;
|
||||||
border: 1px solid #c3e6cb;
|
border: 1px solid #c3e6cb;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding: 0.75rem 1.5rem;
|
padding: 0.75rem 1.5rem;
|
||||||
background-color: #42b983;
|
background-color: #42b983;
|
||||||
@@ -141,7 +186,6 @@ button {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:disabled {
|
button:disabled {
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
}
|
}
|
||||||
|
|||||||
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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user