This commit is contained in:
Lizandro Guarnizo
2026-06-03 21:32:50 -05:00
parent f087fd46f1
commit c05a2a8137
10 changed files with 453 additions and 175 deletions
+19 -4
View File
@@ -75,6 +75,7 @@
<thead class="border-b border-gray-200 text-left text-xs font-semibold text-gray-500 uppercase">
<tr>
<th class="py-2 px-3">Nombre</th>
<th class="py-2 px-3">Proveedor</th>
<th class="py-2 px-3">Endpoint</th>
<th class="py-2 px-3">Bucket</th>
<th class="py-2 px-3">Región</th>
@@ -85,7 +86,7 @@
<tbody>
<template x-if="items.length === 0 && !loading">
<tr>
<td colspan="6" class="py-8 text-center text-gray-400 text-sm">
<td colspan="7" class="py-8 text-center text-gray-400 text-sm">
Sin configuraciones. Haz clic en "Nueva configuración" para agregar una.
</td>
</tr>
@@ -93,6 +94,11 @@
<template x-for="item in items" :key="item.ID">
<tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
<td class="py-2 px-3 font-medium text-gray-800" x-text="item.name"></td>
<td class="py-2 px-3">
<span x-text="item.provider === 's3' ? 'S3' : 'Alibaba'"
:class="item.provider === 's3' ? 'bg-orange-100 text-orange-700' : 'bg-blue-100 text-blue-700'"
class="text-xs px-2 py-0.5 rounded-full font-medium"></span>
</td>
<td class="py-2 px-3 font-mono text-xs text-blue-700 break-all" x-text="item.endpoint"></td>
<td class="py-2 px-3 text-xs text-gray-600" x-text="item.bucket_name"></td>
<td class="py-2 px-3 text-xs text-gray-500" x-text="item.region || '—'"></td>
@@ -243,10 +249,19 @@
<input x-model="form.name" type="text" placeholder="ej. OSS Producción"
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" required />
</div>
<!-- Provider -->
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Proveedor <span class="text-red-500">*</span></label>
<select x-model="form.provider"
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
<option value="alibaba">Alibaba Cloud OSS</option>
<option value="s3">S3-Compatible (MinIO, AWS S3, etc.)</option>
</select>
</div>
<!-- Endpoint -->
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Endpoint <span class="text-red-500">*</span></label>
<input x-model="form.endpoint" type="text" placeholder="ej. https://oss-cn-hangzhou.aliyuncs.com"
<input x-model="form.endpoint" type="text" x-bind:placeholder="form.provider === 'alibaba' ? 'ej. oss-cn-hangzhou.aliyuncs.com' : 'ej. https://minio.u-s.app'"
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" required />
</div>
<!-- Access Key ID -->
@@ -393,14 +408,14 @@ function ossApiApp() {
openAdd() {
this.editItem = null;
this.form = { name: '', endpoint: '', access_key_id: '', access_key_secret: '', bucket_name: '', region: '', is_active: true, notes: '' };
this.form = { name: '', provider: 'alibaba', endpoint: '', access_key_id: '', access_key_secret: '', bucket_name: '', region: '', is_active: true, notes: '' };
this.modalError = '';
this.showModal = true;
},
openEdit(item) {
this.editItem = item;
this.form = { name: item.name || '', endpoint: item.endpoint || '', access_key_id: '', access_key_secret: '', bucket_name: item.bucket_name || '', region: item.region || '', is_active: item.is_active, notes: item.notes || '' };
this.form = { name: item.name || '', provider: item.provider || 'alibaba', endpoint: item.endpoint || '', access_key_id: '', access_key_secret: '', bucket_name: item.bucket_name || '', region: item.region || '', is_active: item.is_active, notes: item.notes || '' };
this.modalError = '';
this.showModal = true;
},