feat: word wrap toggle and enhanced file tooltips

- New 'Code Display' settings section with word wrap toggle
- Code pre blocks now respect word wrap setting (off by default = horizontal scroll)
- File tree nodes show 'X 行 · Y 字符' in tooltip on hover
- wordWrap persisted via usePersistentState

Author: yeahhe365

structure-insight/App.tsx

@@ -118,6 +118,8 @@ const App: React.FC = () => {
                         onToggleShowCharCount={() => settings.setShowCharCount(!state.showCharCount)}
                         maxCharsThreshold={state.maxCharsThreshold}
                         onSetMaxCharsThreshold={settings.setMaxCharsThreshold}
+                        wordWrap={state.wordWrap}
+                        onToggleWordWrap={() => settings.setWordWrap(!state.wordWrap)}
                     />
                 )}
             </AnimatePresence>

structure-insight/components/CodeView.tsx

@@ -22,6 +22,7 @@ interface FileCardProps {
   searchOptions: SearchOptions;
   activeMatchIndexInFile: number | null;
   onCopyPath: (path: string) => void;
+  wordWrap?: boolean;
 }
 
 const IconButton: React.FC<{icon: string, title: string, onClick: () => void, disabled?: boolean, text?: string}> = ({icon, title, onClick, disabled, text}) => (
@@ -49,7 +50,7 @@ function buildSearchRegex(query: string, options: SearchOptions): RegExp | null
 const FileCard: React.FC<FileCardProps> = ({
     file, isEditing, onStartEdit, onSaveEdit, onCancelEdit,
     isMarkdown, isMarkdownPreview, onToggleMarkdownPreview, onShowToast, fontSize,
-    searchQuery, searchOptions, activeMatchIndexInFile, onCopyPath
+    searchQuery, searchOptions, activeMatchIndexInFile, onCopyPath, wordWrap
 }) => {
   const [editText, setEditText] = React.useState(file.content);
   const codeRef = React.useRef<HTMLElement>(null);
@@ -211,7 +212,7 @@ const FileCard: React.FC<FileCardProps> = ({
                 {lineNumbers}
             </pre>
             <div className="relative flex-1">
-                <pre className="py-3 pr-3 whitespace-pre-wrap break-words bg-light-bg dark:bg-dark-bg"><code 
+                <pre className={`py-3 pr-3 bg-light-bg dark:bg-dark-bg ${wordWrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre overflow-x-auto'}`}><code 
                     ref={codeRef}
                     className={`language-${file.language} hljs`} 
                 /></pre>
@@ -237,13 +238,14 @@ interface CodeViewProps {
   searchOptions: SearchOptions;
   activeMatchIndexInFile: number | null;
   onCopyPath: (path: string) => void;
+  wordWrap?: boolean;
 }
 
 const CodeView: React.FC<CodeViewProps> = (props) => {
   const { 
     selectedFile, editingPath, onStartEdit, onSaveEdit, onCancelEdit, 
     markdownPreviewPaths, onToggleMarkdownPreview, onShowToast, fontSize,
-    searchQuery, searchOptions, activeMatchIndexInFile, onCopyPath
+    searchQuery, searchOptions, activeMatchIndexInFile, onCopyPath, wordWrap
   } = props;
 
   if (!selectedFile) {
@@ -278,6 +280,7 @@ const CodeView: React.FC<CodeViewProps> = (props) => {
               searchOptions={searchOptions}
               activeMatchIndexInFile={activeMatchIndexInFile}
               onCopyPath={onCopyPath}
+              wordWrap={wordWrap}
             />
         </motion.div>
     </div>

structure-insight/components/FileTree.tsx

@@ -190,6 +190,11 @@ const FileTreeNode: React.FC<{
   let displayName = node.name;
   const isSelected = !node.isDirectory && node.path === selectedFilePath;
 
+  // Add stats to tooltip for processed files
+  if (!node.isDirectory && (node.status === 'processed' || !node.status) && node.lines && node.chars) {
+    title = `${node.path}\n${node.lines} 行 · ${node.chars} 字符`;
+  }
+
 
   if (node.status === 'skipped') {
       statusClass += ' opacity-60';

structure-insight/components/MainContent.tsx

@@ -133,6 +133,7 @@ const MainContent: React.FC<MainContentProps> = ({ logic, codeViewRef, leftPanel
                                     onFileSelect={handlers.handleFileTreeSelect}
                                     onDeleteFile={handlers.handleDeleteFile}
                                     onCopyPath={handlers.handleCopyPath}
+                                                wordWrap={state.wordWrap}
                                     onToggleExclude={handlers.handleToggleExclude}
                                     selectedFilePath={state.selectedFilePath}
                                     showCharCount={state.showCharCount}
@@ -174,6 +175,7 @@ const MainContent: React.FC<MainContentProps> = ({ logic, codeViewRef, leftPanel
                                                 searchOptions={state.searchOptions}
                                                 activeMatchIndexInFile={state.activeMatchIndexInFile}
                                                 onCopyPath={handlers.handleCopyPath}
+                                                wordWrap={state.wordWrap}
                                              />
                                          )}
                                     </div>
@@ -212,6 +214,7 @@ const MainContent: React.FC<MainContentProps> = ({ logic, codeViewRef, leftPanel
                                         onFileSelect={handlers.handleFileTreeSelect}
                                         onDeleteFile={handlers.handleDeleteFile}
                                         onCopyPath={handlers.handleCopyPath}
+                                                wordWrap={state.wordWrap}
                                         onToggleExclude={handlers.handleToggleExclude}
                                         selectedFilePath={state.selectedFilePath}
                                         showCharCount={state.showCharCount}
@@ -254,6 +257,7 @@ const MainContent: React.FC<MainContentProps> = ({ logic, codeViewRef, leftPanel
                                                 searchOptions={state.searchOptions}
                                                 activeMatchIndexInFile={state.activeMatchIndexInFile}
                                                 onCopyPath={handlers.handleCopyPath}
+                                                wordWrap={state.wordWrap}
                                             />
                                         </div>
                                         <div className={state.activeView === 'structure' ? 'block min-h-full' : 'hidden'}>

structure-insight/components/SettingsDialog.tsx

@@ -16,11 +16,13 @@ interface SettingsDialogProps {
     onToggleShowCharCount: () => void;
     maxCharsThreshold: number;
     onSetMaxCharsThreshold: (val: number) => void;
+    wordWrap: boolean;
+    onToggleWordWrap: () => void;
 }
 
 const SettingsDialog: React.FC<SettingsDialogProps> = ({
     isOpen, onClose, isDarkTheme, onToggleTheme, extractContent, onToggleExtractContent, fontSize, onSetFontSize, onClearCache,
-    showCharCount, onToggleShowCharCount, maxCharsThreshold, onSetMaxCharsThreshold
+    showCharCount, onToggleShowCharCount, maxCharsThreshold, onSetMaxCharsThreshold, wordWrap, onToggleWordWrap
 }) => {
     const dialogRef = React.useRef<HTMLDivElement>(null);
     const [stars, setStars] = React.useState<number | null>(null);
@@ -160,6 +162,27 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
                         </div>
                     </div>
 
+                    {/* Code Display Section */}
+                    <div>
+                        <SectionTitle>代码显示</SectionTitle>
+                        <div className="space-y-4">
+                            <div className="flex items-center justify-between p-2 rounded-lg hover:bg-light-bg dark:hover:bg-dark-bg/50 transition-colors -mx-2">
+                                <div className="flex items-center space-x-3">
+                                    <div className="w-9 h-9 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm">
+                                        <i className="fa-solid fa-text-width"></i>
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <label htmlFor="word-wrap-toggle" className="text-sm font-medium text-light-text dark:text-dark-text cursor-pointer select-none">
+                                            自动换行
+                                        </label>
+                                        <span className="text-xs text-light-subtle-text dark:text-dark-subtle-text">代码超出宽度时自动换行</span>
+                                    </div>
+                                </div>
+                                <Switch id="word-wrap-toggle" checked={wordWrap} onChange={onToggleWordWrap} />
+                            </div>
+                        </div>
+                    </div>
+
                     {/* General Section */}
                     <div>
                         <SectionTitle>通用</SectionTitle>

structure-insight/hooks/useAppLogic.ts

@@ -30,6 +30,7 @@ export const useAppLogic = (
     const [extractContent, setExtractContent] = usePersistentState('extractContent', true);
     const [fontSize, setFontSize] = usePersistentState('fontSize', 14);
     const [showCharCount, setShowCharCount] = usePersistentState('showCharCount', false);
+    const [wordWrap, setWordWrap] = usePersistentState('wordWrap', false);
     const [maxCharsThreshold, setMaxCharsThreshold] = usePersistentState('maxCharsThreshold', 1000000);
 
     // --- Core Data & Selection State ---
@@ -258,7 +259,7 @@ export const useAppLogic = (
         state: {
             processedData, isLoading, isDragging, progressMessage, isSettingsOpen, toastMessage,
             editingPath, markdownPreviewPaths, confirmation,
-            isDark, panelWidth, extractContent, fontSize, showCharCount, maxCharsThreshold,
+            isDark, panelWidth, extractContent, fontSize, showCharCount, maxCharsThreshold, wordWrap,
             lastProcessedFiles, mobileView, stats,
             isSearchOpen, isFileRankOpen, isShortcutsOpen, searchResults, activeResultIndex, isMobile, isAiChatOpen,
             selectedFilePath, selectedFile, activeView,
@@ -279,7 +280,7 @@ export const useAppLogic = (
             handleToggleExclude,
         },
         settings: {
-            setIsDark, setExtractContent, setFontSize, handleClearCache, setShowCharCount, setMaxCharsThreshold
+            setIsDark, setExtractContent, setFontSize, handleClearCache, setShowCharCount, setMaxCharsThreshold, setWordWrap
         },
     };
 };