mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-08-06 08:13:56 +08:00
refactor(SubmitterWindow): 调整deb上传组件的位置
将deb安装包上传区域从表单下方移动到上方,优化页面填写流程
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen overflow-y-auto bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100"
|
||||
class="h-screen overflow-y-auto bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100"
|
||||
>
|
||||
<div
|
||||
class="sticky top-0 z-30 border-b border-slate-200/70 bg-white px-4 py-3 dark:border-slate-800/70 dark:bg-slate-900"
|
||||
@@ -26,6 +26,52 @@
|
||||
|
||||
<div class="p-6 max-w-2xl mx-auto">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2"
|
||||
>安装包 (deb)</label
|
||||
>
|
||||
<div
|
||||
class="border-2 border-dashed border-slate-200 rounded-lg p-8 text-center hover:border-blue-500 transition-colors cursor-pointer dark:border-slate-700"
|
||||
@click="selectDebFile"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
>
|
||||
<input
|
||||
ref="debFileInput"
|
||||
type="file"
|
||||
accept=".deb"
|
||||
class="hidden"
|
||||
@change="handleDebFileSelect"
|
||||
/>
|
||||
<div v-if="isParsingDeb" class="flex flex-col items-center">
|
||||
<div
|
||||
class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"
|
||||
></div>
|
||||
<p class="text-slate-600 dark:text-slate-400">
|
||||
正在解析 deb 文件...
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<i class="fas fa-cloud-upload text-4xl text-slate-400 mb-4"></i>
|
||||
<p class="text-slate-600 dark:text-slate-400">点击浏览</p>
|
||||
<p v-if="formData.debFilePath" class="mt-2 text-sm text-blue-500">
|
||||
{{ formData.debFilePath.split("/").pop() }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="debParseError"
|
||||
class="mt-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800"
|
||||
>
|
||||
<p class="text-yellow-700 dark:text-yellow-400 text-sm">
|
||||
{{ debParseError }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label
|
||||
@@ -119,52 +165,6 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2"
|
||||
>安装包 (deb)</label
|
||||
>
|
||||
<div
|
||||
class="border-2 border-dashed border-slate-200 rounded-lg p-8 text-center hover:border-blue-500 transition-colors cursor-pointer dark:border-slate-700"
|
||||
@click="selectDebFile"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
>
|
||||
<input
|
||||
ref="debFileInput"
|
||||
type="file"
|
||||
accept=".deb"
|
||||
class="hidden"
|
||||
@change="handleDebFileSelect"
|
||||
/>
|
||||
<div v-if="isParsingDeb" class="flex flex-col items-center">
|
||||
<div
|
||||
class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"
|
||||
></div>
|
||||
<p class="text-slate-600 dark:text-slate-400">
|
||||
正在解析 deb 文件...
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<i class="fas fa-cloud-upload text-4xl text-slate-400 mb-4"></i>
|
||||
<p class="text-slate-600 dark:text-slate-400">点击浏览</p>
|
||||
<p v-if="formData.debFilePath" class="mt-2 text-sm text-blue-500">
|
||||
{{ formData.debFilePath.split("/").pop() }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="debParseError"
|
||||
class="mt-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800"
|
||||
>
|
||||
<p class="text-yellow-700 dark:text-yellow-400 text-sm">
|
||||
{{ debParseError }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2"
|
||||
|
||||
Reference in New Issue
Block a user