From 8b4175dc7d58c4a9a976b94475bf7fc9b6af68d5 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Sun, 14 Jun 2026 00:26:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E9=A1=B9=E7=9B=AE=E9=A1=B5?=
 =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

项目页重命名改用 UnifiedModal 和 PlatformTextField

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

补充 TRACKING 组件复用记录
---
 TRACKING.md                                   |  1 +
 src/components/project/ProjectGalleryView.tsx | 55 ++++++++++---------
 src/index.css                                 | 49 -----------------
 3 files changed, 29 insertions(+), 76 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index 03cc05af..c30c12cc 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -74,3 +74,4 @@
 - 2026-06-13 小地图与背景色 smoke：`http://127.0.0.1:10003/editor` 可见左下角小地图、背景色按钮和小地图开关；切换暖灰后画布工作区 `background-color` 为 `rgb(243, 240, 234)`，`background-image` 仍为 `none`；截图留存于 `output/playwright/editor-minimap-background-warm.png`。
 - 2026-06-13 路由与数据归属修正：图片画布页面路由改为 `/editor/canvas`；新增 `editor_canvas` 表作为 project 下的画布数据表，当前工程创建时同步创建默认画布，保存 layout 时写入默认画布，API 响应同时返回 `project.canvas` 和兼容顶层 `viewport/layers`。
 - 2026-06-13 项目页修正：新增 `/project` 作为图片画布工程列表入口；从“我的”页进入项目页，项目卡片进入 `/editor/canvas?projectid=<projectId>`，并补齐项目列表、重命名、删除和批量删除 API。`GET /api/editor/projects` 在重启后的 api-server 上返回未登录 401，不再是旧进程的 405；`/project` 前端路由 smoke 可渲染项目页白底布局。
+- 2026-06-14 组件复用修正：项目页重命名弹窗改为复用 `UnifiedModal`、`PlatformTextField` 和 `PlatformActionButton`，删除项目页局部 modal / input 样式，避免同类弹窗和表单 chrome 重复实现。
diff --git a/src/components/project/ProjectGalleryView.tsx b/src/components/project/ProjectGalleryView.tsx
index a3b00e38..2cf14d0f 100644
--- a/src/components/project/ProjectGalleryView.tsx
+++ b/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="批量操作">
diff --git a/src/index.css b/src/index.css
index 766e7a6f..3aa5b1ce 100644
--- a/src/index.css
+++ b/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;