root/protoc-frontend
1
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

точка и иконка ячеек

Browse Source
This commit is contained in:
Artem
2025-07-18 08:15:58 +03:00
parent 7cf319f25d
commit 7189266bdb
2 changed files with 46 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/TemplateManager/VisualLayoutEditor.tsx
View File

@@ -4,6 +4,7 @@ import {
Edit,
Eye,
EyeOff,
Grid,
Move,
Trash2
} from 'lucide-react';
@@ -181,12 +182,30 @@ const DraggableElement: React.FC<DraggableElementProps> = React.memo(({
<div className={`flex items-center justify-between mb-1 ${
isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-60'
}`}>
<div className="flex items-center gap-2">
<span className="font-medium text-xs text-gray-600 truncate">
{element.label || element.name || `${element.type} элемент`}
</span>
<div className="flex items-start gap-2">
<div className="flex items-center gap-1">
<span className="font-medium text-xs text-gray-600 truncate">
{element.label || element.name || `${element.type} элемент`}
</span>
{element.required && <span className="inline-block w-1 h-1 bg-red-500 rounded-full -mt-1.5" />}
</div>
</div>
<div className="flex items-center gap-1">
{/* Индикатор ячеек */}
{element.targetCells && element.targetCells.length > 0 && (
<div className="relative group/cells">
<Grid className="w-3 h-3 text-gray-500 opacity-60 hover:opacity-100 cursor-help transition-opacity" />
<div className="absolute top-full right-0 mt-2 p-2 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover/cells:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-50">
<div className="font-medium mb-1">Целевые ячейки:</div>
{element.targetCells.map((cell, i) => (
<div key={i} className="font-mono">
{cell.sheet}!{cell.cell}
{cell.displayName && <span className="text-gray-300 ml-1">({cell.displayName})</span>}
</div>
))}
</div>
</div>
)}
{onEdit && (
<Button
variant="ghost"
@@ -214,7 +233,6 @@ const DraggableElement: React.FC<DraggableElementProps> = React.memo(({
{element.label && (
<label className="block text-sm font-medium text-gray-900 pointer-events-none">
{element.label}
{element.required && <span className="text-red-500 ml-1">*</span>}
</label>
)}
{previewControl}
@@ -224,13 +242,7 @@ const DraggableElement: React.FC<DraggableElementProps> = React.memo(({
{/* Additional info (only visible on selection to preserve visual clarity & perf) */}
{isSelected && (
<div className="text-xs opacity-75 space-y-1 mt-1">
{element.targetCells && element.targetCells.length > 0 && (
<div className="font-mono truncate">
{element.targetCells.map((cell, i) => (
<span key={i} className="mr-1 px-1 py-0.5 bg-black/5 rounded text-xs">{cell.sheet}!{cell.cell}</span>
))}
</div>
)}
{/* Здесь можно добавить дополнительную информацию при необходимости */}
</div>
)}
</div>

45
src/pages/ProtocolCreation/ui/Page/Page.tsx
View File

@@ -1,4 +1,4 @@
import { ArrowLeft, Download, FileText, Plus, Save, Settings, Wrench } from 'lucide-react';
import { ArrowLeft, Download, FileText, Grid, Plus, Save, Settings, Wrench } from 'lucide-react';
import { FC, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { StandardsSelector } from '../../../../components/StandardsElement/StandardsSelector';
@@ -270,31 +270,30 @@ const FormElement: FC<FormElementProps> = ({ element, value, onChange }) => {
return (
<div className="space-y-3">
<div className="flex items-center gap-2">
<label className="text-sm font-medium text-gray-900">
{element.label}
</label>
{element.required && (
<Badge variant="destructive" className="text-xs">
!
</Badge>
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-1">
<label className="text-sm font-medium text-gray-900">
{element.label}
</label>
{element.required && <span className="inline-block w-1 h-1 bg-red-500 rounded-full -mt-1.5" />}
</div>
{/* Индикатор ячеек */}
{element.targetCells && element.targetCells.length > 0 && (
<div className="relative group/cells">
<Grid className="w-3 h-3 text-gray-500 opacity-60 hover:opacity-100 cursor-help transition-opacity" />
<div className="absolute top-full right-0 mt-2 p-2 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover/cells:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-50">
<div className="font-medium mb-1">Целевые ячейки:</div>
{element.targetCells.map((cell, i) => (
<div key={i} className="font-mono">
{cell.sheet}!{cell.cell}
{cell.displayName && <span className="text-gray-300 ml-1">({cell.displayName})</span>}
</div>
))}
</div>
</div>
)}
</div>
{renderInput()}
{element.targetCells && element.targetCells.length > 0 && (
<div className="flex flex-wrap gap-1.5">
{element.targetCells.map((target, index) => (
<Badge
key={index}
variant="secondary"
className="text-xs font-mono"
title={target.displayName}
>
{target.sheet}!{target.cell}
</Badge>
))}
</div>
)}
</div>
);
};