feat: Add double-click editing prompt text and optimize editable attribute line style

This commit is contained in:
choizhang
2025-04-12 14:33:40 +08:00
parent 58eeacda20
commit 272b101974
5 changed files with 36 additions and 59 deletions

View File

@@ -5,6 +5,7 @@ import Input from '@/components/ui/Input'
import { toast } from 'sonner'
import { updateEntity, updateRelation, checkEntityNameExists } from '@/api/lightrag'
import { useGraphStore } from '@/stores/graph'
import { PencilIcon } from 'lucide-react'
interface EditablePropertyRowProps {
name: string
@@ -222,9 +223,17 @@ const EditablePropertyRow = ({
return (
<div className="flex items-center gap-2">
<span className="text-primary/60 tracking-wide whitespace-nowrap">
<div className="flex items-center gap-1 text-primary/60 tracking-wide whitespace-nowrap">
{getPropertyNameTranslation(name)}
</span>:
{isEditableField && (
<div className="group relative">
<PencilIcon className="w-3 h-3 opacity-50 hover:opacity-100" />
<div className="absolute left-5 transform -translate-y-full -top-2 bg-primary/90 text-white text-xs px-3 py-1.5 rounded shadow-lg border border-primary/20 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-[100]">
{t('graphPanel.propertiesView.doubleClickToEdit')}
</div>
</div>
)}
</div>:
{isEditing ? (
<div className="flex-1">
<Input
@@ -238,20 +247,17 @@ const EditablePropertyRow = ({
/>
</div>
) : (
// Wrap Text component in a div to handle onDoubleClick
<div
className={`flex-1 overflow-hidden ${isEditableField ? 'cursor-text' : ''}`} // Apply cursor style to wrapper
className={`flex-1 overflow-hidden ${isEditableField ? 'cursor-text' : ''}`}
onDoubleClick={isEditableField ? handleDoubleClick : undefined}
>
<Text
className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis block w-full" // Ensure Text fills the div
className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis block w-full"
tooltipClassName="max-w-80"
// Ensure the text prop always receives a string representation
text={String(value)}
tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))}
side="left"
onClick={onClick}
// Removed onDoubleClick from Text component
/>
</div>
)}

View File

@@ -35,32 +35,6 @@
"common": {
"cancel": "إلغاء"
},
"graphPanel": {
"propertiesView": {
"errors": {
"duplicateName": "اسم العقدة موجود بالفعل",
"updateFailed": "فشل تحديث العقدة",
"tryAgainLater": "يرجى المحاولة مرة أخرى لاحقاً"
},
"success": {
"entityUpdated": "تم تحديث العقدة بنجاح",
"relationUpdated": "تم تحديث العلاقة بنجاح"
},
"node": {
"title": "عقدة",
"id": "المعرف",
"labels": "التسميات",
"degree": "الدرجة",
"properties": "الخصائص",
"relationships": "العلاقات (ضمن الرسم البياني الفرعي)",
"expandNode": "توسيع العقدة",
"pruneNode": "تقليم العقدة",
"deleteAllNodesError": "رفض حذف جميع العقد في الرسم البياني",
"nodesRemoved": "تم حذف {{count}} عقدة، بما في ذلك العقد اليتيمة",
"noNewNodes": "لم يتم العثور على عقد قابلة للتوسيع"
}
}
},
"documentPanel": {
"clearDocuments": {
"button": "مسح",
@@ -262,6 +236,16 @@
"vectorStorage": "تخزين المتجهات"
},
"propertiesView": {
"errors": {
"duplicateName": "اسم العقدة موجود بالفعل",
"updateFailed": "فشل تحديث العقدة",
"tryAgainLater": "يرجى المحاولة مرة أخرى لاحقًا"
},
"doubleClickToEdit": "انقر نقرًا مزدوجًا للتعديل",
"success": {
"entityUpdated": "تم تحديث العقدة بنجاح",
"relationUpdated": "تم تحديث العلاقة بنجاح"
},
"node": {
"title": "عقدة",
"id": "المعرف",

View File

@@ -240,6 +240,7 @@
"updateFailed": "Failed to update node",
"tryAgainLater": "Please try again later"
},
"doubleClickToEdit": "Double click to edit",
"success": {
"entityUpdated": "Node updated successfully",
"relationUpdated": "Relation updated successfully"

View File

@@ -35,32 +35,7 @@
"common": {
"cancel": "Annuler"
},
"graphPanel": {
"propertiesView": {
"errors": {
"duplicateName": "Le nom du nœud existe déjà",
"updateFailed": "Échec de la mise à jour du nœud",
"tryAgainLater": "Veuillez réessayer plus tard"
},
"success": {
"entityUpdated": "Nœud mis à jour avec succès",
"relationUpdated": "Relation mise à jour avec succès"
},
"node": {
"title": "Nœud",
"id": "ID",
"labels": "Étiquettes",
"degree": "Degré",
"properties": "Propriétés",
"relationships": "Relations(dans le sous-graphe)",
"expandNode": "Développer le nœud",
"pruneNode": "Élaguer le nœud",
"deleteAllNodesError": "Refus de supprimer tous les nœuds du graphe",
"nodesRemoved": "{{count}} nœuds supprimés, y compris les nœuds orphelins",
"noNewNodes": "Aucun nœud extensible trouvé"
}
}
},
"documentPanel": {
"clearDocuments": {
"button": "Effacer",
@@ -262,6 +237,16 @@
"vectorStorage": "Stockage vectoriel"
},
"propertiesView": {
"errors": {
"duplicateName": "Le nom du nœud existe déjà",
"updateFailed": "Échec de la mise à jour du nœud",
"tryAgainLater": "Veuillez réessayer plus tard"
},
"doubleClickToEdit": "Double-cliquez pour modifier",
"success": {
"entityUpdated": "Nœud mis à jour avec succès",
"relationUpdated": "Relation mise à jour avec succès"
},
"node": {
"title": "Nœud",
"id": "ID",

View File

@@ -241,6 +241,7 @@
"updateFailed": "更新节点失败",
"tryAgainLater": "请稍后重试"
},
"doubleClickToEdit": "双击编辑",
"success": {
"entityUpdated": "节点更新成功",
"relationUpdated": "关系更新成功"