@allbluecn/web-app 0.5.0 → 0.6.0

package/src/components/story/detail/story-detail-body.tsx

@@ -15,7 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
+import React, { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ChevronsDownUp,
@@ -45,7 +45,7 @@ import { EmojiPicker } from "./emoji-picker";
 import { StoryAiToolbar } from "../ai/story-ai-toolbar";
 import { useStoryAiModel } from "../ai/use-story-ai-model";
 import { StateEditor, PriorityEditor, AssigneeEditor, DateEditor, LabelsEditor, ParentStoryEditor } from "../inline-editors";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import type { Editor } from "@tiptap/react";
 import { StoryProperties } from "./story-properties";
 import { StoryDetailToolbar } from "./story-detail-toolbar";
@@ -76,12 +76,15 @@ export function StoryDetailBody({
   labels,
   stories,
   projects,
+  iterations,
   relationsData,
   onRelationsUpdate,
   onAppendActivities,
   onAppendComment,
   onRemoveComment,
   onStoryUpdate,
+  onNavigateInPanel,
+  breadcrumbItems,
 }: {
   story: StoryDetail;
   users: UserBrief[];
@@ -97,8 +100,10 @@ export function StoryDetailBody({
   labels?: { id: string; name: string; color: string }[];
   /** 所有需求列表（用于父需求选择） */
   stories?: { id: string; identifier: string; name: string; state: StoryState; projectId?: string }[];
-  /** 所有项目列表（用于父需求选择） */
-  projects?: { id: string; name: string; icon: string; displayId?: string | null }[];
+   /** 所有项目列表（用于父需求选择） */
+   projects?: { id: string; name: string; icon: string; displayId?: string | null }[];
+   /** 迭代列表（用于迭代选择器） */
+   iterations?: import("@/server/serverFns/iteration/schemas").IterationSummary[];
   /** 关联数据（从路由 loader 预加载） */
   relationsData?: RelationsData;
   onRelationsUpdate?: (next: RelationsData | ((prev: RelationsData) => RelationsData)) => void;
@@ -106,6 +111,9 @@ export function StoryDetailBody({
   onAppendComment?: (comment: CommentWithReplies) => void;
   onRemoveComment?: (commentId: string) => void;
   onStoryUpdate?: (s: StoryDetail) => void;
+  onNavigateInPanel?: (targetId: string, targetIdentifier?: string, relationKind?: "child" | "dependency") => void;
+  /** 内嵌面板导航面包屑（在面板内跳转时替代单层 identifier 显示） */
+  breadcrumbItems?: Array<{ identifier?: string; projectId?: string; label: string; onClick?: () => void }>;
 }) {
   const { t } = useTranslation("story");
   const [name, setName] = useState(story.name);
@@ -125,6 +133,12 @@ export function StoryDetailBody({
   const [expanded, setExpanded] = useState(false);
   const [needsTruncation, setNeedsTruncation] = useState(false);
   const [isEditorFocused, setIsEditorFocused] = useState(false);
+  // 描述是否为空（跟随编辑器 onChange 实时更新）。不能用 descContent.markdown 判断——
+  // 编辑会话期间 onChange 只进 pendingDescRef（防抖保存），descContent 不更新，
+  // 否则输入文字后失焦仍会显示「点击添加需求描述」占位并与文字重合
+  const [isDescEmpty, setIsDescEmpty] = useState(
+    !(parsedDesc.markdown ?? "").trim(),
+  );
   const [reactions, setReactions] = useState<ReactionGroup[]>([]);
   const pendingReactionsRef = useRef<Set<string>>(new Set());
   useEffect(() => {
@@ -291,6 +305,7 @@ export function StoryDetailBody({
   // 兜底防抖避免用户长时间不操作也最终落盘（防崩溃丢数据）。
   const handleDescriptionChange = useCallback((content: { html: string; markdown: string }) => {
     pendingDescRef.current = content;
+    setIsDescEmpty(!content.markdown.trim());
     if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
     saveTimerRef.current = setTimeout(
       () => flushDescriptionRef.current(),
@@ -317,6 +332,7 @@ export function StoryDetailBody({
     }
     const newContent = { html: newMarkdown, markdown: newMarkdown };
     setDescContent(newContent);
+    setIsDescEmpty(!newMarkdown.trim());
     const json = serializeStoryDescription(newMarkdown, newMarkdown);
     lastPersistedRef.current = json;
     updateField("description", json);
@@ -345,38 +361,62 @@ export function StoryDetailBody({
       <div className="flex items-start justify-between gap-4 px-6">
         <div className="flex-1 space-y-4">
           <div className="flex items-center gap-2">
-            {project && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="flex cursor-default items-center">
-                    <ProjectIconDisplay name={project.icon} size={16} className="shrink-0 text-muted-foreground" />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="flex flex-col">
-                    <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{t("detail.belongsTo")}</span>
-                    <span>{project.name}</span>
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            )}
-            {identifier && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      navigator.clipboard.writeText(identifier)
-                        .then(() => toast.success(t("detail.copied", { identifier })))
-                        .catch(() => toast.error(t("detail.copyFailed")));
-                    }}
-                    className="text-sm font-mono text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-                  >
-                    {identifier}
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>{t("detail.clickToCopy")}</TooltipContent>
-              </Tooltip>
+            {breadcrumbItems && breadcrumbItems.length > 0 ? (
+              <div className="flex items-center gap-1.5 text-sm font-mono text-muted-foreground">
+                {breadcrumbItems.map((item, i) => (
+                  <React.Fragment key={i}>
+                    {i > 0 && <span className="text-muted-foreground/40 px-1">/</span>}
+                    <button
+                      type="button"
+                      onClick={item.onClick}
+                      className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer"
+                    >
+                      <LucideIconByName
+                        name={projects?.find((p) => p.id === item.projectId)?.icon ?? project?.icon}
+                        size={16}
+                        className="shrink-0 text-muted-foreground"
+                      />
+                      {item.identifier}
+                    </button>
+                  </React.Fragment>
+                ))}
+              </div>
+            ) : (
+              <>
+                {project && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="flex cursor-default items-center">
+                        <LucideIconByName name={project.icon} size={16} className="shrink-0 text-muted-foreground" />
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex flex-col">
+                        <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{t("detail.belongsTo")}</span>
+                        <span>{project.name}</span>
+                      </div>
+                    </TooltipContent>
+                  </Tooltip>
+                )}
+                {identifier && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          navigator.clipboard.writeText(identifier)
+                            .then(() => toast.success(t("detail.copied", { identifier })))
+                            .catch(() => toast.error(t("detail.copyFailed")));
+                        }}
+                        className="text-sm font-mono text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+                      >
+                        {identifier}
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("detail.clickToCopy")}</TooltipContent>
+                  </Tooltip>
+                )}
+              </>
             )}
           </div>
           {/* {saving && <span className="text-xs text-muted-foreground">保存中...</span>} */}
@@ -389,7 +429,7 @@ export function StoryDetailBody({
         </div>
       </div>
       {metaBar}
-      <div ref={editorContainerRef} className={`relative notion-full-width${!isEditorFocused && !(descContent.markdown ?? "").trim() ? " story-editor-no-placeholder" : ""}`} style={{ "--notion-content-width": "1fr", "--notion-margin-width": "0px" } as React.CSSProperties} onPointerDown={onEditorPointerDown}>
+      <div ref={editorContainerRef} className={`relative notion-full-width${!isEditorFocused && isDescEmpty ? " story-editor-no-placeholder" : ""}`} style={{ "--notion-content-width": "1fr", "--notion-margin-width": "0px" } as React.CSSProperties} onPointerDown={onEditorPointerDown}>
         <div className={!expanded && needsTruncation ? "max-h-[90px] overflow-hidden" : ""}>
           <Suspense fallback={
             <div className="flex flex-col space-y-2 p-3 min-h-24">
@@ -411,7 +451,7 @@ export function StoryDetailBody({
             />
           </Suspense>
         </div>
-        {!isEditorFocused && !(descContent.markdown ?? "").trim() && (
+                {!isEditorFocused && isDescEmpty && (
           <div className="pointer-events-none absolute top-3 left-6 text-sm text-muted-foreground select-none">
             {t("create.addDescription")}
           </div>
@@ -545,9 +585,11 @@ export function StoryDetailBody({
             projectId={story.projectId}
             data={relationsData}
             onRefresh={onRelationsUpdate ?? (() => { })}
+            onAppendActivities={onAppendActivities}
             users={users}
             projects={projects?.map((p) => ({ ...p, displayId: p.displayId ?? null }))}
             labels={labels}
+            onNavigateInPanel={onNavigateInPanel}
           />
         </div>
       )}
@@ -555,15 +597,25 @@ export function StoryDetailBody({
       <StoryProperties
         story={{
           id: story.id,
+          name: story.name,
+          description: story.description,
           parentId: story.parentId,
           parent: story.parent,
           labels: story.labels,
           projectId: story.projectId,
+          iteration: story.iteration ?? null,
         }}
         labels={labels}
         projects={projects}
+        iterations={iterations}
         onParentChange={updateParent}
         onLabelsChange={updateLabels}
+        onIterationChange={(it) => {
+          if (onStoryUpdate) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onStoryUpdate({ ...story, iteration: it } as any);
+          }
+        }}
         onActivities={onAppendActivities}
       />