复用项目页重命名弹窗组件

项目页重命名改用 UnifiedModal 和 PlatformTextField

删除项目页局部弹窗与输入框样式

补充 TRACKING 组件复用记录

src/components/project/ProjectGalleryView.tsx

@@ -6,7 +6,6 @@ import {
   Plus,
   Square,
   Trash2,
-  X,
 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -20,6 +19,8 @@ import {
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
 import { PlatformIconButton } from '../common/PlatformIconButton';
+import { PlatformTextField } from '../common/PlatformTextField';
+import { UnifiedModal } from '../common/UnifiedModal';
 
 type ProjectGalleryViewProps = {
   onOpenProject: (projectId: string) => void;
@@ -327,26 +328,36 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
         <section className="project-gallery__grid">{projectCards}</section>
       )}
 
-      {renameDraft ? (
-        <div className="project-gallery__modal-backdrop" role="presentation">
+      <UnifiedModal
+        open={Boolean(renameDraft)}
+        title="重命名"
+        size="sm"
+        closeLabel="关闭重命名"
+        onClose={() => setRenameDraft(null)}
+        footer={
+          <>
+            <PlatformActionButton
+              type="button"
+              tone="secondary"
+              onClick={() => setRenameDraft(null)}
+            >
+              取消
+            </PlatformActionButton>
+            <PlatformActionButton type="submit" form="project-gallery-rename-form">
+              保存
+            </PlatformActionButton>
+          </>
+        }
+      >
+        {renameDraft ? (
           <form
-            className="project-gallery__rename-dialog"
+            id="project-gallery-rename-form"
             onSubmit={(event) => {
               event.preventDefault();
               submitRename();
             }}
           >
-            <div className="project-gallery__rename-header">
-              <h2>重命名</h2>
-              <PlatformIconButton
-                label="关闭重命名"
-                icon={<X className="h-4 w-4" />}
-                variant="surfaceFloating"
-                className="h-8 w-8"
-                onClick={() => setRenameDraft(null)}
-              />
-            </div>
-            <input
+            <PlatformTextField
               aria-label="项目名称"
               value={renameDraft.title}
               onChange={(event) =>
@@ -358,19 +369,9 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
               }
               autoFocus
             />
-            <div className="project-gallery__rename-actions">
-              <PlatformActionButton
-                type="button"
-                tone="secondary"
-                onClick={() => setRenameDraft(null)}
-              >
-                取消
-              </PlatformActionButton>
-              <PlatformActionButton type="submit">保存</PlatformActionButton>
-            </div>
           </form>
-        </div>
-      ) : null}
+        ) : null}
+      </UnifiedModal>
 
       {isSelectionMode ? (
         <div className="project-gallery__batch-toolbar" role="toolbar" aria-label="批量操作">

src/index.css

@@ -3211,55 +3211,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   font-weight: 760;
 }
 
-.project-gallery__modal-backdrop {
-  position: absolute;
-  inset: 0;
-  z-index: 20;
-  display: grid;
-  place-items: center;
-  background: rgba(15, 23, 42, 0.18);
-}
-
-.project-gallery__rename-dialog {
-  display: grid;
-  width: min(24rem, calc(100% - 2rem));
-  gap: 0.9rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.75rem;
-  background: #ffffff;
-  padding: 1rem;
-  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
-}
-
-.project-gallery__rename-header,
-.project-gallery__rename-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.project-gallery__rename-header h2 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 900;
-}
-
-.project-gallery__rename-dialog input {
-  min-height: 2.65rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.5rem;
-  padding: 0 0.8rem;
-  color: #111827;
-  font-weight: 760;
-  outline: none;
-}
-
-.project-gallery__rename-dialog input:focus {
-  border-color: #4bb5aa;
-  box-shadow: 0 0 0 3px rgba(75, 181, 170, 0.16);
-}
-
 .image-canvas-editor {
   position: relative;
   display: flex;