feat: enhanced status bar and recent projects history

yeahhe365 · yeahhe365 · commit 287401b438f5 · 2026-03-30T01:08:25.000+08:00
- Status bar now shows selected file name, UTF-8 encoding, and theme indicator
- Recent projects tracked in localStorage (last 5 entries)
- InitialPrompt shows recent projects with relative time labels
- timeAgo helper for human-readable timestamps
- Tailwind config: added light-hover and dark-hover color aliases
diff --git a/structure-insight/App.tsx b/structure-insight/App.tsx
@@ -47,10 +47,12 @@ const App: React.FC = () => {
             <MainContent logic={logic} codeViewRef={codeViewRef} leftPanelRef={leftPanelRef} />
 
             {state.processedData && (
-                <StatusBar 
-                    fileCount={state.stats.fileCount} 
-                    totalLines={state.stats.totalLines} 
-                    totalChars={state.stats.totalChars} 
+                <StatusBar
+                    fileCount={state.stats.fileCount}
+                    totalLines={state.stats.totalLines}
+                    totalChars={state.stats.totalChars}
+                    selectedFileName={state.selectedFile?.name}
+                    isDark={state.isDark}
                 />
             )}
             
diff --git a/structure-insight/components/InitialPrompt.tsx b/structure-insight/components/InitialPrompt.tsx
@@ -1,11 +1,26 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 
+interface RecentProject {
+    name: string;
+    openedAt: number;
+}
+
+function timeAgo(timestamp: number): string {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000);
+    if (seconds < 60) return "刚刚";
+    if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟前`;
+    if (seconds < 86400) return `${Math.floor(seconds / 3600)}小时前`;
+    if (seconds < 604800) return `${Math.floor(seconds / 86400)}天前`;
+    return new Date(timestamp).toLocaleDateString();
+}
+
 interface InitialPromptProps {
     onOpenFolder: () => void;
+    recentProjects?: RecentProject[];
 }
 
-const InitialPrompt: React.FC<InitialPromptProps> = ({ onOpenFolder }) => {
+const InitialPrompt: React.FC<InitialPromptProps> = ({ onOpenFolder, recentProjects = [] }) => {
     return (
         <div className="relative flex flex-col items-center justify-center h-full w-full overflow-hidden p-6 select-none bg-light-bg dark:bg-dark-bg">
             {/* Background Pattern */}
@@ -60,6 +75,30 @@ const InitialPrompt: React.FC<InitialPromptProps> = ({ onOpenFolder }) => {
                         </div>
                     </button>
                 </motion.div>
+
+                {/* Recent Projects */}
+                {recentProjects.length > 0 && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.5, delay: 0.4 }}
+                        className="w-full max-w-lg mb-16"
+                    >
+                        <p className="text-xs font-medium text-light-subtle-text dark:text-dark-subtle-text mb-3 uppercase tracking-wider">最近项目</p>
+                        <div className="grid grid-cols-1 gap-2">
+                            {recentProjects.map((project) => (
+                                <div
+                                    key={project.name + project.openedAt}
+                                    className="flex items-center gap-3 px-4 py-3 rounded-xl bg-light-panel dark:bg-dark-panel border border-light-border dark:border-dark-border cursor-default"
+                                >
+                                    <i className="fa-solid fa-folder text-sm text-primary"></i>
+                                    <span className="text-sm font-medium text-light-text dark:text-dark-text flex-1 truncate">{project.name}</span>
+                                    <span className="text-xs text-light-subtle-text dark:text-dark-subtle-text whitespace-nowrap">{timeAgo(project.openedAt)}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+                )}
             </div>
             
             {/* Footer Info */}
diff --git a/structure-insight/components/MainContent.tsx b/structure-insight/components/MainContent.tsx
@@ -169,7 +169,7 @@ const MainContent: React.FC<MainContentProps> = ({ logic, codeViewRef, leftPanel
                                          )}
                                     </div>
                                 ) : (
-                                    <div className="flex-1"><InitialPrompt onOpenFolder={handlers.handleFileSelect}/></div>
+                                    <div className="flex-1"><InitialPrompt onOpenFolder={handlers.handleFileSelect} recentProjects={state.recentProjects}/></div>
                                 )}
                             </motion.div>
                         )}
@@ -251,7 +251,7 @@ const MainContent: React.FC<MainContentProps> = ({ logic, codeViewRef, leftPanel
                                     <ScrollToTopButton targetRef={codeViewRef} />
                                 </div>
                             ) : (
-                                <InitialPrompt onOpenFolder={handlers.handleFileSelect}/>
+                                <InitialPrompt onOpenFolder={handlers.handleFileSelect} recentProjects={state.recentProjects}/>
                             )}
                         </div>
                     </div>
diff --git a/structure-insight/components/StatusBar.tsx b/structure-insight/components/StatusBar.tsx
@@ -4,6 +4,8 @@ interface StatusBarProps {
     fileCount: number;
     totalLines: number;
     totalChars: number;
+    selectedFileName?: string;
+    isDark?: boolean;
 }
 
 const StatusBarItem: React.FC<{icon: string, value: number, label: string}> = ({icon, value, label}) => (
@@ -13,9 +15,24 @@ const StatusBarItem: React.FC<{icon: string, value: number, label: string}> = ({
     </span>
 );
 
-const StatusBar: React.FC<StatusBarProps> = ({ fileCount, totalLines, totalChars }) => {
+const StatusBar: React.FC<StatusBarProps> = ({ fileCount, totalLines, totalChars, selectedFileName, isDark }) => {
     return (
-        <footer className="h-8 flex items-center justify-end px-4 space-x-6 bg-light-header dark:bg-dark-header border-t border-light-border dark:border-dark-border text-xs text-light-subtle-text dark:text-dark-subtle-text shrink-0">
+        <footer className="h-8 flex items-center px-4 space-x-6 bg-light-header dark:bg-dark-header border-t border-light-border dark:border-dark-border text-xs text-light-subtle-text dark:text-dark-subtle-text shrink-0">
+            {selectedFileName && (
+                <span className="flex items-center mr-auto" title="当前文件">
+                    <i className="fa-solid fa-file-code w-4 text-center mr-1.5"></i>
+                    {selectedFileName}
+                </span>
+            )}
+            {!selectedFileName && <span className="mr-auto" />}
+            <span className="flex items-center" title="编码">
+                <i className="fa-solid fa-text-width w-4 text-center mr-1.5"></i>
+                UTF-8
+            </span>
+            <span className="flex items-center" title={isDark ? '深色主题' : '浅色主题'}>
+                <i className={`fa-solid ${isDark ? 'fa-moon' : 'fa-sun'} w-4 text-center mr-1.5`}></i>
+                {isDark ? 'Dark' : 'Light'}
+            </span>
             <StatusBarItem icon="fa-file-lines" value={fileCount} label="文件" />
             <StatusBarItem icon="fa-align-left" value={totalLines} label="行数" />
             <StatusBarItem icon="fa-quote-left" value={totalChars} label="字符数" />
diff --git a/structure-insight/hooks/useAppLogic.ts b/structure-insight/hooks/useAppLogic.ts
@@ -41,6 +41,16 @@ export const useAppLogic = (
     const [mobileView, setMobileView] = React.useState<'tree' | 'editor'>('editor');
     const isMobile = React.useMemo(() => windowSize.width <= 768, [windowSize.width]);
 
+    // --- Recent Projects History ---
+    const [recentProjects, setRecentProjects] = usePersistentState<{name: string, openedAt: number}[]>('recentProjects', []);
+
+    const addToHistory = React.useCallback((name: string) => {
+        setRecentProjects(prev => {
+            const filtered = prev.filter(p => p.name !== name);
+            return [{ name, openedAt: Date.now() }, ...filtered].slice(0, 5);
+        });
+    }, [setRecentProjects]);
+
     const handleShowToast = React.useCallback((message: string) => {
         setToastMessage(message);
     }, []);
@@ -81,6 +91,13 @@ export const useAppLogic = (
         }
     }, [showCharCount, processedData?.treeData, processedData?.rootName]);
 
+    // Track recent projects when processedData changes
+    React.useEffect(() => {
+        if (processedData?.rootName) {
+            addToHistory(processedData.rootName);
+        }
+    }, [processedData?.rootName]);
+
     // --- Derived State ---
     const selectedFile = React.useMemo<FileContent | null>(() => {
         if (!selectedFilePath || !processedData?.fileContents) return null;
@@ -225,6 +242,7 @@ export const useAppLogic = (
             isSearchOpen, isFileRankOpen, isShortcutsOpen, searchResults, activeResultIndex, isMobile, isAiChatOpen,
             selectedFilePath, selectedFile, activeView,
             searchQuery, searchOptions, activeMatchIndexInFile,
+            recentProjects,
         },
         handlers: {
             setIsDragging, handleDrop: (e: React.DragEvent) => { setIsDragging(false); handleDrop(e, isLoading); },
diff --git a/structure-insight/index.html b/structure-insight/index.html
@@ -71,6 +71,8 @@
               'primary': '#3B82F6', // blue-500
               'primary-hover': '#2563EB', // blue-600
               'primary-disabled': '#93C5FD', // blue-300
+              'light-hover': '#F3F4F6', // gray-100
+              'dark-hover': '#374151', // gray-700
             },
             keyframes: {
                 'enter': {
