feat: 支持通过URL打开项目并改进附件排序

JoeyLearnsToCode · JoeyLearnsToCode · commit 2d43e7f81abe · 2025-12-23T17:47:27.000+08:00
- 实现通过URL hash (#/project/{projectId}) 打开指定项目
- 支持项目不存在时的错误提示和URL重置
- 附件画廊按ID降序排序，较新的附件排在前面
- 优化代码质量：关闭编辑器occurrencesHighlight
- 更新国际化文本：添加项目不存在错误提示
diff --git a/src/components/AppInitializer.tsx b/src/components/AppInitializer.tsx
@@ -3,22 +3,37 @@
  * 负责初始化示例数据并自动加载到UI
  */
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import { initializeSampleData } from '@/services/initializeSampleData';
 import { useProjectStore } from '@/store/projectStore';
 import { useVersionStore } from '@/store/versionStore';
 import { useSettingsStore } from '@/store/settingsStore';
+import { useTranslation } from '@/i18n/I18nContext';
 import { storage, STORAGE_KEYS } from '@/utils/storage';
+import { db } from '@/db/schema';
 
 interface AppInitializerProps {
   children: React.ReactNode;
 }
 
+/**
+ * 从 URL hash 中解析项目 ID
+ * 格式: #/project/{projectId}
+ */
+const getProjectIdFromUrl = (): string | null => {
+  const hash = window.location.hash;
+  if (!hash) return null;
+
+  const match = hash.match(/^#\/project\/(.+)$/);
+  return match ? match[1] : null;
+};
+
 export const AppInitializer: React.FC<AppInitializerProps> = ({ children }) => {
   const [isInitialized, setIsInitialized] = useState(false);
-  const { loadProjects, setCurrentProject, loadFolders } = useProjectStore();
+  const { loadProjects, setCurrentProject, loadFolders, expandFolderPathToProject } = useProjectStore();
   const { loadVersions } = useVersionStore();
   const { theme } = useSettingsStore();
+  const t = useTranslation();
 
   // 使用 ref 确保初始化只执行一次（防止 React 18 严格模式下的双重调用）
   const hasInitialized = useRef(false);
@@ -37,6 +52,13 @@ export const AppInitializer: React.FC<AppInitializerProps> = ({ children }) => {
     applyTheme(theme === 'dark');
   }, [theme]);
 
+  // 处理从 URL 打开项目的函数
+  const handleOpenProjectFromUrl = useCallback(async (projectId: string) => {
+    setCurrentProject(projectId);
+    await expandFolderPathToProject(projectId);
+    await loadVersions(projectId);
+  }, [setCurrentProject, expandFolderPathToProject, loadVersions]);
+
   useEffect(() => {
     // 如果已经初始化过，直接返回
     if (hasInitialized.current) {
@@ -48,10 +70,26 @@ export const AppInitializer: React.FC<AppInitializerProps> = ({ children }) => {
       // 初始化示例数据
       const sampleProjectId = await initializeSampleData();
 
-      // 如果创建了示例项目，自动加载和选择它
-      if (sampleProjectId) {
-        await loadFolders();
-        await loadProjects();
+      // 加载文件夹和项目
+      await loadFolders();
+      await loadProjects();
+
+      // 检查 URL 中是否有项目 ID 参数
+      const urlProjectId = getProjectIdFromUrl();
+
+      if (urlProjectId) {
+        // 验证项目是否存在
+        const project = await db.projects.get(urlProjectId);
+        if (project) {
+          // 项目存在，打开它
+          await handleOpenProjectFromUrl(urlProjectId);
+        } else {
+          // 项目不存在，提示用户并重置 URL
+          alert(t('errors.projectNotFound'));
+          window.open('/', '_self');
+        }
+      } else if (sampleProjectId) {
+        // 如果创建了示例项目，自动加载和选择它
         setCurrentProject(sampleProjectId);
         await loadVersions(sampleProjectId);
       }
@@ -65,7 +103,7 @@ export const AppInitializer: React.FC<AppInitializerProps> = ({ children }) => {
     };
 
     initialize();
-  }, [loadProjects, loadFolders, setCurrentProject, loadVersions]);
+  }, [loadProjects, loadFolders, setCurrentProject, loadVersions, handleOpenProjectFromUrl, t]);
 
   // 在初始化完成前，可以显示一个简单的加载提示
   if (!isInitialized) {
diff --git a/src/components/editor/PromptEditor.tsx b/src/components/editor/PromptEditor.tsx
@@ -231,6 +231,7 @@ const PromptEditor = forwardRef<PromptEditorRef, PromptEditorProps>(
             },
             overviewRulerLanes: 0,
             overviewRulerBorder: false,
+            occurrencesHighlight: 'off',
           }}
         />
         {isTouchDevice && (
diff --git a/src/components/layout/FolderTree.tsx b/src/components/layout/FolderTree.tsx
@@ -267,15 +267,20 @@ const ProjectItemConnected: React.FC<{
   onCloseAllMenus?: () => void;
   onContextMenu: (e: React.MouseEvent, item: Folder | Project) => void;
 }> = ({ project, level, onCloseAllMenus, onContextMenu }) => {
-  const { currentProjectId, selectProject } = useProjectStore();
+  const { currentProjectId, selectProject, expandFolderPathToProject } = useProjectStore();
+
+  const handleSelect = async (projectId: string) => {
+    selectProject(projectId, { updateUrl: true });
+    await expandFolderPathToProject(projectId);
+  };
 
   return (
     <ProjectItem
       project={project}
       level={level}
       onContextMenu={(e, p) => onContextMenu(e, p)}
       isSelected={currentProjectId === project.id}
-      onSelect={selectProject}
+      onSelect={handleSelect}
       onCloseAllMenus={onCloseAllMenus}
     />
   );
@@ -439,7 +444,7 @@ export const FolderTree: React.FC<FolderTreeProps> = ({ onProjectSelect: _onProj
           if (projectName && projectName.trim()) {
             const projectId = await createProject(projectName.trim(), folderContextMenu.folder.id);
             await loadProjects();
-            selectProject(projectId);
+            selectProject(projectId, { updateUrl: true });
             expandFolder(folderContextMenu.folder.id);
           }
         }
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
@@ -32,7 +32,7 @@ export const Sidebar: React.FC = () => {
       await loadFolders();
       const projectId = await createProject(projectName.trim(), rootFolderId);
       await loadProjects();
-      selectProject(projectId);
+      selectProject(projectId, { updateUrl: true });
     }
   };
 
diff --git a/src/components/version/AttachmentGallery.tsx b/src/components/version/AttachmentGallery.tsx
@@ -37,9 +37,10 @@ export const AttachmentGallery: React.FC<AttachmentGalleryProps> = ({
   const notes = currentVersion?.notes || '';
 
   // 过滤出可预览的图片
-  const previewableAttachments = attachments.filter(
-    (att) => !att.isMissing && att.fileType.startsWith('image/')
-  );
+  const previewableAttachments = attachments
+    .filter((att) => !att.isMissing && att.fileType.startsWith('image/'))
+    // 按 ID 降序排序，较新的附件排在前面
+    .sort((a, b) => b.id.localeCompare(a.id));
 
   // 当前正在预览的附件对象
   const currentPreviewAttachment =
@@ -180,9 +181,11 @@ export const AttachmentGallery: React.FC<AttachmentGalleryProps> = ({
         {/* Version Meta Card - now integrated */}
         <VersionMetaCard versionId={versionId} score={score} notes={notes} readonly={readonly} />
 
-        {/* Attachment Items */}
+        {/* Attachment Items - 按 ID 降序排序，较新的附件排在前面 */}
         <AnimatePresence>
-          {attachments.map((attachment) => (
+          {attachments
+            .sort((a, b) => b.id.localeCompare(a.id))
+            .map((attachment) => (
             <motion.div
               key={attachment.id}
               initial={{ opacity: 0, scale: 0.9 }}
@@ -247,7 +250,7 @@ export const AttachmentGallery: React.FC<AttachmentGalleryProps> = ({
                         e.stopPropagation();
                         handlePreview(attachment);
                       }}
-                      className="p-1.5 bg-surface-containerHighest text-surface-onSurface rounded-md shadow-sm "
+                      className="p-1.5 !backdrop-blur-3xl !bg-surface-containerHighest/60 text-surface-onSurface rounded-md shadow-sm "
                       title={t('components.attachmentGallery.preview')}
                     >
                       <Icons.Eye size={12} />
@@ -259,7 +262,7 @@ export const AttachmentGallery: React.FC<AttachmentGalleryProps> = ({
                       e.stopPropagation();
                       handleDownload(attachment);
                     }}
-                    className="p-1.5 bg-surface-containerHighest text-surface-onSurface rounded-md shadow-sm "
+                    className="p-1.5 !backdrop-blur-3xl !bg-surface-containerHighest/60 text-surface-onSurface rounded-md shadow-sm "
                     title={t('components.attachmentGallery.download')}
                   >
                     <Icons.Download size={12} />
@@ -271,7 +274,7 @@ export const AttachmentGallery: React.FC<AttachmentGalleryProps> = ({
                         e.stopPropagation();
                         handleDelete(attachment.id);
                       }}
-                      className="p-1.5 bg-surface-containerHighest hover:bg-surface-containerHighest"
+                      className="p-1.5 !backdrop-blur-3xl"
                       title={t('common.delete')}
                     >
                       <Icons.Trash size={12} />
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
@@ -236,5 +236,6 @@ export const enUS: TranslationData = {
     deleteFailed: 'Delete failed',
     exportFailed: 'Export failed',
     importFailed: 'Import failed',
+    projectNotFound: 'Project not found or has been deleted',
   },
 };
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
@@ -231,5 +231,6 @@ export const zhCN: TranslationData = {
     deleteFailed: '删除失败',
     exportFailed: '导出失败',
     importFailed: '导入失败',
+    projectNotFound: '项目不存在或已被删除',
   },
 };
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
@@ -289,5 +289,6 @@ export interface TranslationData {
     deleteFailed: string;
     exportFailed: string;
     importFailed: string;
+    projectNotFound: string;
   };
 }
diff --git a/src/router.tsx b/src/router.tsx
@@ -7,6 +7,10 @@ export const router = createHashRouter([
     path: '/',
     element: <MainView />,
   },
+  {
+    path: '/project/:projectId',
+    element: <MainView />,
+  },
   {
     path: '/settings',
     element: <Settings />,
diff --git a/src/services/attachmentManager.ts b/src/services/attachmentManager.ts
@@ -7,6 +7,15 @@ import type { Attachment } from '@/models/Attachment';
 import { nanoid } from 'nanoid';
 
 export class AttachmentManager {
+  /**
+   * 生成带时间戳前缀的附件 ID
+   * 使用秒级时间戳作为前缀，便于排序
+   */
+  private generateAttachmentId(): string {
+    const timestamp = Math.floor(Date.now() / 1000);
+    return `${timestamp}_${nanoid()}`;
+  }
+
   /**
    * 上传附件
    */
@@ -15,7 +24,7 @@ export class AttachmentManager {
     const blob = new Blob([buffer], { type: file.type });
 
     const attachment: Attachment = {
-      id: nanoid(),
+      id: this.generateAttachmentId(),
       versionId,
       fileName: file.name,
       fileType: file.type,
diff --git a/src/store/projectStore.ts b/src/store/projectStore.ts
@@ -2,6 +2,7 @@ import { create } from 'zustand';
 import { db } from '@/db/schema';
 import type { Folder } from '@/models/Folder';
 import type { Project } from '@/models/Project';
+import { useUiStore } from '@/store/uiStore';
 
 interface ProjectState {
   // State
@@ -19,9 +20,10 @@ interface ProjectState {
   renameProject: (id: string, newName: string) => Promise<void>;
   updateProjectTags: (id: string, tags: Project['tags']) => Promise<void>;
   deleteProject: (id: string) => Promise<void>;
-  selectProject: (id: string) => void;
+  selectProject: (id: string, options?: { updateUrl?: boolean }) => void;
   setCurrentProject: (id: string | null) => void;
   moveProject: (projectId: string, folderId: string) => Promise<void>;
+  expandFolderPathToProject: (projectId: string) => Promise<void>;
 }
 
 export const useProjectStore = create<ProjectState>((set, get) => ({
@@ -147,8 +149,17 @@ export const useProjectStore = create<ProjectState>((set, get) => ({
     }));
   },
 
-  selectProject: (id) => {
+  selectProject: (id: string, options?: { updateUrl?: boolean }) => {
     set({ currentProjectId: id });
+    // 可选：更新 URL
+    if (options?.updateUrl !== false) {
+      const hashRouter = window.location.hash.replace(/^#\/?|\/?$/g, '');
+      if (hashRouter === `project/${id}` || hashRouter === `/#project/${id}`) {
+        // 已经在正确的 URL，无需更新
+      } else {
+        window.location.hash = `#/project/${id}`;
+      }
+    }
   },
 
   setCurrentProject: (id) => {
@@ -165,4 +176,29 @@ export const useProjectStore = create<ProjectState>((set, get) => ({
       ),
     }));
   },
+
+  expandFolderPathToProject: async (projectId) => {
+    const project = await db.projects.get(projectId);
+    if (!project || !project.folderId) return;
+
+    // 获取所有父文件夹 ID
+    const parentFolderIds: string[] = [];
+    let currentFolderId: string | null = project.folderId;
+
+    while (currentFolderId) {
+      const folder: Folder | undefined = await db.folders.get(currentFolderId);
+      if (folder) {
+        parentFolderIds.unshift(folder.id);
+        currentFolderId = folder.parentId;
+      } else {
+        break;
+      }
+    }
+
+    // 使用 useUiStore 的 expandFolder 展开所有父文件夹
+    const { expandFolder } = useUiStore.getState();
+    for (const folderId of parentFolderIds) {
+      expandFolder(folderId);
+    }
+  },
 }));

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export const Sidebar: React.FC = () => {`
`32`	`32`	`await loadFolders();`
`33`	`33`	`const projectId = await createProject(projectName.trim(), rootFolderId);`
`34`	`34`	`await loadProjects();`
`35`		`- selectProject(projectId);`
	`35`	`+ selectProject(projectId, { updateUrl: true });`
`36`	`36`	`}`
`37`	`37`	`};`
`38`	`38`
Original file line number	Diff line number	Diff line change
`@@ -289,5 +289,6 @@ export interface TranslationData {`
`289`	`289`	`deleteFailed: string;`
`290`	`290`	`exportFailed: string;`
`291`	`291`	`importFailed: string;`
	`292`	`+ projectNotFound: string;`
`292`	`293`	`};`
`293`	`294`	`}`