feat: dark/light theme, i18n (zh/en), inline node params with IN/OUT, root node, custom node creation, minimap & light mode contrast fixes

src/components/Inspector.tsx

@@ -1,6 +1,6 @@
 import { AlertCircle, Braces, Plus, Trash2, X } from 'lucide-react'
-import { CATEGORY_LABELS } from '../lib/catalog'
-import type { BehaviorNode, BehaviorTreeDocument, ValidationIssue } from '../types'
+import { useI18n } from '../context/I18nContext'
+import type { BehaviorNode, BehaviorTreeDocument, PortDirection, ValidationIssue } from '../types'
 
 interface InspectorProps {
   document: BehaviorTreeDocument
@@ -13,6 +13,8 @@ interface InspectorProps {
 }
 
 export function Inspector({ document, selectedNode, issues, onUpdateDocument, onUpdateNode, onDeleteNode, onSelectIssue }: InspectorProps) {
+  const { t } = useI18n()
+
   const updatePort = (oldKey: string, key: string, value: string) => {
     if (!selectedNode) return
     const ports = { ...selectedNode.data.ports }
@@ -21,11 +23,27 @@ export function Inspector({ document, selectedNode, issues, onUpdateDocument, on
     onUpdateNode(selectedNode.id, { ports })
   }
 
+  const updatePortDirection = (key: string, direction: PortDirection | '') => {
+    if (!selectedNode) return
+    const portDirections = { ...(selectedNode.data.portDirections || {}) }
+    if (direction) {
+      portDirections[key] = direction
+    } else {
+      delete portDirections[key]
+    }
+    onUpdateNode(selectedNode.id, { portDirections: Object.keys(portDirections).length > 0 ? portDirections : undefined })
+  }
+
   const removePort = (key: string) => {
     if (!selectedNode) return
     const ports = { ...selectedNode.data.ports }
     delete ports[key]
-    onUpdateNode(selectedNode.id, { ports })
+    const portDirections = selectedNode.data.portDirections ? { ...selectedNode.data.portDirections } : {}
+    delete portDirections[key]
+    onUpdateNode(selectedNode.id, {
+      ports,
+      portDirections: Object.keys(portDirections).length > 0 ? portDirections : undefined,
+    })
   }
 
   const addPort = () => {
@@ -36,88 +54,106 @@ export function Inspector({ document, selectedNode, issues, onUpdateDocument, on
     onUpdateNode(selectedNode.id, { ports: { ...selectedNode.data.ports, [key]: '' } })
   }
 
+  const getPortDir = (key: string): PortDirection | '' => {
+    if (!selectedNode?.data.portDirections) return ''
+    return selectedNode.data.portDirections[key] || ''
+  }
+
   return (
     <aside className="right-panel">
       <div className="panel-heading">
         <div>
-          <span className="eyebrow">INSPECTOR</span>
-          <h2>{selectedNode ? '节点属性' : '行为树'}</h2>
+          <span className="eyebrow">{t('inspector.title')}</span>
+          <h2>{selectedNode ? t('inspector.nodeProps') : t('inspector.treeProps')}</h2>
         </div>
-        {selectedNode && <span className={`category-chip category-${selectedNode.data.category}`}>{CATEGORY_LABELS[selectedNode.data.category]}</span>}
+        {selectedNode && (
+          <span className={`category-chip category-${selectedNode.data.category}`}>
+            {t(`cat.${selectedNode.data.category}`)}
+          </span>
+        )}
       </div>
 
       <div className="inspector-scroll">
         {selectedNode ? (
           <>
             <div className="field-group">
-              <label htmlFor="node-label">显示名称</label>
+              <label htmlFor="node-label">{t('inspector.displayName')}</label>
               <input id="node-label" value={selectedNode.data.label} onChange={(event) => onUpdateNode(selectedNode.id, { label: event.target.value })} />
             </div>
             <div className="field-group">
-              <label htmlFor="registration-name">注册名称 / ID</label>
+              <label htmlFor="registration-name">{t('inspector.registrationName')}</label>
               <input id="registration-name" value={selectedNode.data.registrationName} onChange={(event) => onUpdateNode(selectedNode.id, { registrationName: event.target.value })} />
             </div>
             <div className="field-row">
               <div className="field-group">
-                <label>节点类型</label>
+                <label>{t('inspector.nodeType')}</label>
                 <div className="read-only-value">{selectedNode.data.nodeType}</div>
               </div>
               <div className="field-group">
-                <label>运行匹配 ID</label>
+                <label>{t('inspector.nodeId')}</label>
                 <div className="read-only-value mono" title={selectedNode.id}>{selectedNode.id}</div>
               </div>
             </div>
             <div className="section-divider" />
             <div className="section-title-row">
-              <div className="section-title"><Braces size={15} />端口与黑板</div>
-              <button className="icon-button compact" onClick={addPort} title="添加端口"><Plus size={15} /></button>
+              <div className="section-title"><Braces size={15} />{t('inspector.ports')}</div>
+              <button className="icon-button compact" onClick={addPort} title={t('inspector.addPort')}><Plus size={15} /></button>
             </div>
             <div className="ports-list">
               {Object.entries(selectedNode.data.ports).map(([key, value]) => (
                 <div className="port-row" key={key}>
-                  <input className="port-key" value={key} onChange={(event) => updatePort(key, event.target.value, value)} aria-label="端口名" />
-                  <input value={value} onChange={(event) => updatePort(key, key, event.target.value)} placeholder="值或 {blackboard}" aria-label={`${key} 的值`} />
-                  <button className="bare-icon danger-hover" onClick={() => removePort(key)} title="删除端口"><X size={14} /></button>
+                  <input className="port-key" value={key} onChange={(event) => updatePort(key, event.target.value, value)} aria-label={t('inspector.portKey')} />
+                  <select
+                    value={getPortDir(key)}
+                    onChange={(event) => updatePortDirection(key, event.target.value as PortDirection | '')}
+                    style={{ gridColumn: '1', gridRow: '2', height: 22, fontSize: 9, border: '1px solid var(--border-input)', borderRadius: 4, color: 'var(--text-primary)', background: 'var(--bg-input)' }}
+                  >
+                    <option value="">--</option>
+                    <option value="input">IN</option>
+                    <option value="output">OUT</option>
+                  </select>
+                  <input value={value} onChange={(event) => updatePort(key, key, event.target.value)} placeholder={t('inspector.portValue')} aria-label={`${key} ${t('inspector.portValue')}`} />
+                  <button className="bare-icon danger-hover" onClick={() => removePort(key)} title={t('inspector.deleteNode')}><X size={14} /></button>
                 </div>
               ))}
-              {!Object.keys(selectedNode.data.ports).length && <div className="inline-empty">暂无端口</div>}
+              {!Object.keys(selectedNode.data.ports).length && <div className="inline-empty">{t('inspector.noPorts')}</div>}
             </div>
             <div className="section-divider" />
             <label className="toggle-row">
-              <span><span className="toggle-title">断点</span><span className="toggle-description">运行到此节点时标记</span></span>
+              <span><span className="toggle-title">{t('inspector.breakpoint')}</span><span className="toggle-description">{t('inspector.breakpointDesc')}</span></span>
               <input type="checkbox" checked={selectedNode.data.breakpoint} onChange={(event) => onUpdateNode(selectedNode.id, { breakpoint: event.target.checked })} />
             </label>
             <div className="field-group notes-field">
-              <label htmlFor="node-notes">备注</label>
+              <label htmlFor="node-notes">{t('inspector.notes')}</label>
               <textarea id="node-notes" rows={4} value={selectedNode.data.notes} onChange={(event) => onUpdateNode(selectedNode.id, { notes: event.target.value })} />
             </div>
-            <button className="danger-button" onClick={() => onDeleteNode(selectedNode.id)}><Trash2 size={15} />删除节点</button>
+            <button className="danger-button" onClick={() => onDeleteNode(selectedNode.id)}><Trash2 size={15} />{t('inspector.deleteNode')}</button>
           </>
         ) : (
           <>
             <div className="field-group">
-              <label htmlFor="tree-title">工程名称</label>
+              <label htmlFor="tree-title">{t('inspector.projectName')}</label>
               <input id="tree-title" value={document.title} onChange={(event) => onUpdateDocument({ title: event.target.value })} />
             </div>
             <div className="field-group">
-              <label htmlFor="tree-id">主树 ID</label>
+              <label htmlFor="tree-id">{t('inspector.mainTreeId')}</label>
               <input id="tree-id" value={document.mainTreeId} onChange={(event) => onUpdateDocument({ mainTreeId: event.target.value })} />
             </div>
             <div className="tree-summary">
-              <div><strong>{document.nodes.length}</strong><span>节点</span></div>
-              <div><strong>{document.edges.length}</strong><span>连接</span></div>
-              <div><strong>{issues.filter((item) => item.severity === 'error').length}</strong><span>错误</span></div>
+              <div><strong>{document.nodes.length}</strong><span>{t('inspector.nodeCount')}</span></div>
+              <div><strong>{document.edges.length}</strong><span>{t('inspector.edgeCount')}</span></div>
+              <div><strong>{issues.filter((item) => item.severity === 'error').length}</strong><span>{t('inspector.errorCount')}</span></div>
             </div>
           </>
         )}
 
         <div className="section-divider" />
         <div className="section-title-row">
-          <div className="section-title"><AlertCircle size={15} />结构检查</div>
+          <div className="section-title"><AlertCircle size={15} />{t('inspector.structureCheck')}</div>
           <span className="count-label">{issues.length}</span>
         </div>
         <div className="issue-list">
-          {!issues.length && <div className="validation-ok">结构有效</div>}
+          {!issues.length && <div className="validation-ok">{t('validation.valid')}</div>}
           {issues.map((issue, index) => (
             <button key={`${issue.message}-${index}`} className={`issue-row ${issue.severity}`} onClick={() => issue.nodeId && onSelectIssue(issue.nodeId)} disabled={!issue.nodeId}>
               <span className="issue-dot" />