first commit to gitck

2026-03-18 16:27:34 +08:00
parent 121d7f6024
commit bac3652cda
1362 changed files with 166577 additions and 387 deletions
--- a/sample_interface/src/app/components/views/HelpView.tsx
+++ b/sample_interface/src/app/components/views/HelpView.tsx
@@ -0,0 +1,74 @@
+import { useRef, useEffect } from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { components } from './MarkdownComponents';
+import helpContent from '../../../../HELP.md?raw';
+
+const tocItems = [
+  { id: 'overview', label: '1. Overview' },
+  { id: 'navigation', label: '2. Navigation' },
+  { id: 'main-sections', label: '3. Main Sections' },
+  { id: 'keyboard-shortcuts', label: '4. Keyboard Shortcuts' },
+  { id: 'display-modes', label: '5. Display Modes' },
+];
+
+export function HelpView() {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const scrollToSection = (id: string) => {
+    const element = document.getElementById(id);
+    const panel = document.getElementById("details-panel");
+    if (element && panel) {
+      const panelRect = panel.getBoundingClientRect();
+      const elementRect = element.getBoundingClientRect();
+      const offset = elementRect.top - panelRect.top + panel.scrollTop;
+      panel.scrollTop = offset;
+    }
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const panel = document.getElementById("details-panel");
+      if (!panel) return;
+      
+      if (e.key === 'PageUp' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        panel.scrollTop -= Math.max(200, panel.clientHeight);
+      } else if (e.key === 'PageDown' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        panel.scrollTop += Math.max(200, panel.clientHeight);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const contentWithoutToc = helpContent.replace(/^# Table of Contents[\s\S]*?^---$/m, '');
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="bg-gray-900 border border-gray-700 rounded-lg p-4 sticky top-0">
+          <h2 className="text-xl font-bold text-white mb-4">Table of Contents</h2>
+          <nav className="space-y-2">
+            {tocItems.map((item) => (
+              <button
+                key={item.id}
+                onClick={() => scrollToSection(item.id)}
+                className="block text-blue-400 hover:underline text-left w-full"
+              >
+                {item.label}
+              </button>
+            ))}
+          </nav>
+        </div>
+        <div id="details-panel" ref={contentRef} className="bg-gray-900 border border-gray-700 rounded-lg p-4 overflow-y-auto max-h-[calc(100vh-200px)]">
+          <div className="prose prose-invert max-w-none prose-sm prose-table:border-collapse prose-th:border prose-td:border prose-th:border-gray-600 prose-td:border-gray-600 prose-th:p-2 prose-td:p-2 prose-thead:bg-gray-800 prose-tr:hover:bg-gray-800">
+            <Markdown remarkPlugins={[remarkGfm]} components={components}>{contentWithoutToc}</Markdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}