diplomnexus/diplomnexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tgf

Browse Source
This commit is contained in:
diplomnexus
2026-06-08 01:41:23 +08:00
parent d5a3a60ec9
commit 8a4de1bdb3
1 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/tables/HubsTable.jsx
+26 -27
View File
@@ -12,7 +12,7 @@ const HubsTable = ({ user }) => {
const [viewData, setViewData] = useState(null);
const [formData, setFormData] = useState({ id: null, name: '', price: '', category: 'hubs', description: '', image: null, stock: 100, rating: 5.0 });
// ПАГИНАЦИЯ (Вернули на 8 элементов для идеальной сетки 4x2)
// ПАГИНАЦИЯ (Установлено ровно 8 элементов для идеальной сетки 4x2)
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 8;
@@ -196,45 +196,44 @@ const HubsTable = ({ user }) => {
</div>
</div>
{/* КРАСИВОЕ ДВУХКОЛОНОЧНОЕ МОДАЛЬНОЕ ОКНО ДОБАВЛЕНИЯ / РЕДАКТИРОВАНИЯ */}
{/* MODAL EDIT/CREATE */}
{isModalOpen && isAdmin && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
<div className="glass p-8 w-full max-w-3xl relative border border-[var(--accent-color)] rounded-[2rem] shadow-[0_0_50px_rgba(0,0,0,0.5)] flex flex-col md:flex-row gap-8">
<button onClick={() => setIsModalOpen(false)} className="absolute top-6 right-6 text-[var(--text-color)] hover:text-red-500 transition-colors"><X size={20}/></button>
<div className="glass p-8 w-full max-w-2xl relative border border-[var(--accent-color)] rounded-[2rem] shadow-[0_0_50px_rgba(0,0,0,0.5)] flex flex-col md:flex-row gap-6">
<button onClick={() => setIsModalOpen(false)} className="absolute top-4 right-4 text-[var(--text-color)] hover:text-red-500"><X size={20}/></button>
{/* Левая колонка: Характеристики */}
<div className="flex-1 flex flex-col gap-4">
<h3 className="text-2xl font-black text-[var(--accent-color)] uppercase tracking-tighter mb-2">
{/* Левая колонка: характеристики */}
<div className="flex-1 flex flex-col gap-3">
<h3 className="text-xl font-bold text-[var(--accent-color)] uppercase tracking-tighter">
{formData.id ? 'Настройка хаба' : 'Новый хаб'}
</h3>
<form id="hub-form" onSubmit={handleSubmit} className="flex flex-col gap-4">
<form id="hub-form" onSubmit={handleSubmit} className="flex flex-col gap-3">
<div className="flex flex-col gap-1">
<label className="text-[10px] font-bold opacity-50 uppercase ml-1">Название хаба</label>
<input
className="bg-[var(--input-bg)] border border-[var(--glass-border)] p-3 rounded-xl text-[var(--text-color)] focus:border-[var(--accent-color)] focus:shadow-[0_0_15px_rgba(var(--accent-color),0.15)] outline-none transition-all"
placeholder="Например, Zigbee Шлюз v3"
className="bg-[var(--input-bg)] border border-[var(--glass-border)] p-2.5 rounded text-[var(--text-color)] focus:border-[var(--accent-color)] outline-none"
placeholder="Название хаба"
value={formData.name}
onChange={e=>setFormData({...formData, name:e.target.value})}
required
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="flex flex-col gap-1">
<div className="flex gap-2">
<div className="flex-1 flex flex-col gap-1">
<label className="text-[10px] font-bold opacity-50 uppercase ml-1">Цена (₽)</label>
<input
className="bg-[var(--input-bg)] border border-[var(--glass-border)] p-3 rounded-xl text-[var(--text-color)] focus:border-[var(--accent-color)] focus:shadow-[0_0_15px_rgba(var(--accent-color),0.15)] outline-none transition-all"
placeholder="Цена"
className="bg-[var(--input-bg)] border border-[var(--glass-border)] p-2.5 rounded text-[var(--text-color)] w-full focus:border-[var(--accent-color)] outline-none"
placeholder="Цена (₽)"
type="number"
value={formData.price}
onChange={e=>setFormData({...formData, price:e.target.value})}
required
/>
</div>
<div className="flex flex-col gap-1">
<div className="flex-1 flex flex-col gap-1">
<label className="text-[10px] font-bold opacity-50 uppercase ml-1">Артикул / SKU</label>
<input
className="bg-[var(--input-bg)] border border-[var(--glass-border)] p-3 rounded-xl text-[var(--text-color)] focus:border-[var(--accent-color)] focus:shadow-[0_0_15px_rgba(var(--accent-color),0.15)] outline-none transition-all"
className="bg-[var(--input-bg)] border border-[var(--glass-border)] p-2.5 rounded text-[var(--text-color)] w-full focus:border-[var(--accent-color)] outline-none"
placeholder="NX-HB-01"
type="text"
value={formData.sku || ''}
@@ -272,7 +271,7 @@ const HubsTable = ({ user }) => {
<div className="flex flex-col gap-1">
<label className="text-[10px] font-bold opacity-50 uppercase ml-1">Описание технических параметров</label>
<textarea
className="bg-[var(--input-bg)] border border-[var(--glass-border)] p-3 rounded-xl text-[var(--text-color)] h-24 focus:border-[var(--accent-color)] focus:shadow-[0_0_15px_rgba(var(--accent-color),0.15)] outline-none text-sm resize-none transition-all"
className="bg-[var(--input-bg)] border border-[var(--glass-border)] p-2.5 rounded text-[var(--text-color)] h-24 focus:border-[var(--accent-color)] outline-none text-sm resize-none"
placeholder="Техническое описание хаба..."
value={formData.description}
onChange={e=>setFormData({...formData, description:e.target.value})}
@@ -281,13 +280,13 @@ const HubsTable = ({ user }) => {
</form>
</div>
{/* Правая колонка: Загрузка фото с предпросмотром */}
<div className="w-full md:w-72 flex flex-col justify-between border-t md:border-t-0 md:border-l border-[var(--glass-border)] pt-6 md:pt-0 md:pl-8">
<div className="flex flex-col gap-4">
<h5 className="text-[10px] uppercase font-bold text-center bg-[var(--accent-color)]/10 p-3 rounded-xl text-[var(--accent-color)] border border-[var(--accent-color)]/20 tracking-widest">Медиа-Ядро</h5>
{/* Правая колонка: загрузка фото с предпросмотром */}
<div className="w-full md:w-60 flex flex-col justify-between border-t md:border-t-0 md:border-l border-[var(--glass-border)] pt-4 md:pt-0 md:pl-6">
<div className="flex flex-col gap-3">
<h5 className="text-[10px] uppercase font-bold text-center bg-[var(--accent-color)]/10 p-2 rounded text-[var(--accent-color)] border border-[var(--accent-color)]/20">Изображение</h5>
{/* Рамка предпросмотра */}
<div className="w-full h-48 bg-black/40 border-2 border-dashed border-[var(--glass-border)] rounded-2xl overflow-hidden flex items-center justify-center relative shadow-inner">
<div className="w-full h-44 bg-black/40 border-2 border-dashed border-[var(--glass-border)] rounded-2xl overflow-hidden flex items-center justify-center relative shadow-inner">
{formData.image ? (
<img
src={typeof formData.image === 'string' ? getImageUrl(formData.image) : URL.createObjectURL(formData.image)}
@@ -301,7 +300,7 @@ const HubsTable = ({ user }) => {
)}
</div>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<span className="text-[10px] opacity-50 uppercase ml-1 font-bold">Выберите файл</span>
<input
type="file"
@@ -316,9 +315,9 @@ const HubsTable = ({ user }) => {
</div>
</div>
<div className="pt-6 flex flex-col gap-3">
<button type="submit" form="hub-form" className="btn-neon w-full py-4 font-bold rounded-2xl uppercase tracking-widest text-xs shadow-[0_0_20px_rgba(var(--accent-color),0.25)]">СОХРАНИТЬ</button>
<button type="button" onClick={() => setIsModalOpen(false)} className="w-full py-3 text-xs font-semibold text-gray-500 hover:text-white transition-colors">Отмена</button>
<div className="pt-4 flex flex-col gap-2">
<button type="submit" form="hub-form" className="btn-neon w-full py-3.5 font-bold rounded-xl uppercase tracking-widest text-xs">СОХРАНИТЬ</button>
<button type="button" onClick={() => setIsModalOpen(false)} className="w-full py-2.5 text-xs font-semibold text-gray-500 hover:text-white transition-colors">Отмена</button>
</div>
</div>