feat(studio): unify resource detail layouts (#1037)

Author: evanlowe

frontend/src/cronjobs/CronJobs.tsx

@@ -433,18 +433,14 @@ function Drawer({
 
 function JobList({
   jobs,
-  busyAction,
   canCreate,
   onCreate,
   onSelect,
-  onRun,
 }: {
   jobs: CronJob[];
-  busyAction: string;
   canCreate: boolean;
   onCreate: () => void;
   onSelect: (job: CronJob) => void;
-  onRun: (job: CronJob) => void;
 }) {
   return (
     <ResourceGrid>
@@ -457,8 +453,6 @@ function JobList({
         创建定时任务
       </ResourceCreateCard>
       {jobs.map((job) => {
-        const running = cronJobIsRunning(job);
-        const busy = busyAction.includes(job.jobId);
         const schedule = describeCronJobSchedule(job.schedule);
         return (
           <LibraryResourceCard
@@ -468,16 +462,8 @@ function JobList({
             status={<Badge color={job.enabled ? "success" : "secondary"} variant="soft" size="sm" pill>{job.enabled ? "已启用" : "已暂停"}</Badge>}
             description={job.prompt}
             metadata={[
-              { label: "Runtime", value: job.runtimeName || job.agentName, title: `${job.runtimeName} / ${job.agentName}` },
               { label: "执行计划", value: schedule, title: schedule },
-              { label: "下次执行", value: job.enabled ? formatCronJobDate(job.nextRunAt) : "已暂停" },
             ]}
-            action={{
-              label: "立即执行",
-              disabled: busy || running || !job.enabled,
-              title: running ? "已有执行正在进行" : !job.enabled ? "请先启用任务" : "立即执行",
-              onClick: () => onRun(job),
-            }}
             detailAction={{ label: "查看详情", onClick: () => onSelect(job) }}
           />
         );
@@ -751,7 +737,7 @@ export function CronJobs({ cloudProvider }: CronJobsProps) {
       </ResourceToolbar>
       {notice ? <div className="cronjobs-banner" role="status"><Alert color="info" variant="soft" description={notice} /></div> : null}
       <ResourceResults aria-label="定时任务列表">
-        {loading && jobs.length === 0 ? <ResourceLoadingState /> : error ? <EmptyMessage className="cronjobs-state" fill="none"><EmptyMessage.Icon color="danger"><Clock /></EmptyMessage.Icon><EmptyMessage.Title color="danger">无法加载定时任务</EmptyMessage.Title><EmptyMessage.Description>{error}</EmptyMessage.Description><EmptyMessage.ActionRow><Button type="button" color="secondary" variant="outline" size="lg" pill={false} onClick={() => void load()}><ArrowRotateCw />重试</Button></EmptyMessage.ActionRow></EmptyMessage> : <JobList jobs={visibleJobs} busyAction={busyAction} canCreate={!loading && runtimes.length > 0} onCreate={() => setDrawerJob(null)} onSelect={(job) => setSelectedId(job.jobId)} onRun={runNow} />}
+        {loading && jobs.length === 0 ? <ResourceLoadingState /> : error ? <EmptyMessage className="cronjobs-state" fill="none"><EmptyMessage.Icon color="danger"><Clock /></EmptyMessage.Icon><EmptyMessage.Title color="danger">无法加载定时任务</EmptyMessage.Title><EmptyMessage.Description>{error}</EmptyMessage.Description><EmptyMessage.ActionRow><Button type="button" color="secondary" variant="outline" size="lg" pill={false} onClick={() => void load()}><ArrowRotateCw />重试</Button></EmptyMessage.ActionRow></EmptyMessage> : <JobList jobs={visibleJobs} canCreate={!loading && runtimes.length > 0} onCreate={() => setDrawerJob(null)} onSelect={(job) => setSelectedId(job.jobId)} />}
       </ResourceResults>
       {drawerJob !== undefined ? <Drawer job={drawerJob} runtimes={runtimes} cloudProvider={cloudProvider} busy={busyAction.endsWith(":save")} onClose={() => setDrawerJob(undefined)} onSubmit={submitDrawer} /> : null}
     </ResourcePageShell>

frontend/src/ui/AgentWorkspace.css

@@ -682,59 +682,13 @@
   gap: 8px;
 }
 
-.aw-head-delete {
-  min-height: 34px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0 12px;
-  border: 1px solid hsl(var(--destructive) / 0.24);
+.aw-agent-meta {
+  flex: 0 0 auto;
+  padding: 2px 7px;
   border-radius: 999px;
-  background: hsl(var(--destructive) / 0.07);
-  color: hsl(var(--destructive));
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 620;
-}
-
-.aw-head-delete:hover:not(:disabled) {
-  background: hsl(var(--destructive) / 0.12);
-}
-
-.aw-head-delete:disabled {
-  cursor: default;
-  opacity: 0.46;
-}
-
-.aw-head-delete svg {
-  width: 14px;
-  height: 14px;
-}
-
-.aw-head-delete--draft {
-  border-color: hsl(var(--border));
-  background: transparent;
-  color: hsl(var(--foreground));
-}
-
-.aw-head-delete--draft:hover:not(:disabled) {
-  background: hsl(var(--secondary) / 0.54);
-}
-
-.aw-head-delete.studio-update-action {
-  border: 1px solid hsl(var(--destructive) / 0.34);
-  background: rgba(255, 255, 255, 0.76);
-  color: hsl(var(--destructive));
-  -webkit-backdrop-filter: blur(7px);
-  backdrop-filter: blur(7px);
-}
-
-.aw-head-delete.studio-update-action:hover:not(:disabled) {
-  border: 1px solid hsl(var(--destructive));
-  background: hsl(var(--destructive));
-  color: #fff;
+  background: hsl(var(--secondary));
+  color: hsl(var(--muted-foreground));
+  font-size: 10.5px;
 }
 
 .aw-agent-title-row {
@@ -889,6 +843,18 @@
   padding: 0 24px 80px;
 }
 
+.aw-agent-detail__body .aw-content {
+  min-width: 0;
+  overflow: visible;
+  margin-top: 0;
+  padding: 0;
+}
+
+.aw-agent-detail__body .aw-detail-deployment {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .aw-basic-stack {
   display: flex;
   flex-direction: column;

frontend/src/ui/AgentWorkspace.tsx

@@ -20,6 +20,7 @@ import {
   Search,
   Trash2,
 } from "lucide-react";
+import { Button } from "@openai/apps-sdk-ui/components/Button";
 import {
   deleteAgentFeedbackCases,
   createGithubDeliveryRollbackPr,
@@ -74,7 +75,7 @@ import { BUILTIN_TOOLS } from "../create/veadkCatalog";
 import type { DeploymentTaskUpdate } from "./ProjectPreview";
 import { DeploymentErrorMessage } from "./DeploymentErrorMessage";
 import { Markdown } from "./Markdown";
-import { PageBackButton } from "./PageBackButton";
+import { ResourceDetailLayout } from "./ResourceCollection";
 import { StudioConfirmDialog } from "./StudioConfirmDialog";
 import { TextShimmer } from "./text-shimmer/TextShimmer";
 import "./AgentWorkspace.css";
@@ -2779,7 +2780,7 @@ export function AgentWorkspace({
             <p>未选择智能体</p>
           </main>
         ) : (
-          <main className={`aw-main${deploymentInProgress ? " is-deploying" : ""}`}>
+          <main className={`aw-main${deploymentInProgress ? " is-deploying" : ""}${detailOnly ? " resource-page" : ""}`}>
             {selectedAgent && !selectedAgentInfo && loadingAgentInfo && (
               <div className="aw-detail-loading" role="status" aria-live="polite">
                 <div className="aw-detail-loading-card">
@@ -2802,32 +2803,34 @@ export function AgentWorkspace({
                 </div>
               </div>
             )}
-            <div className="aw-agent-head">
-              <div className="aw-agent-heading">
-                {detailOnly && onBack ? (
-                  <PageBackButton label="返回智能体列表" onClick={onBack} />
-                ) : null}
-                <div className="aw-agent-heading-copy">
-                  <div className="aw-agent-title-row">
-                    <h2>{selectedName}</h2>
-                    {displayCurrentVersion != null && (
-                      <span>v{displayCurrentVersion}</span>
-                    )}
-                    {selectedDraft && <span>草稿</span>}
-                    {selectedAgentUpdateDraft && <span>待更新</span>}
-                    {!selectedAgent && !selectedDraft && selectedPendingTask && (
-                      <span>{selectedPendingTask.label}</span>
-                    )}
-                  </div>
-                  <p>{draft.description || (loadingAgentInfo || (detailOnly && !detailAgentInfoResolved) ? "正在读取智能体信息…" : "暂无描述")}</p>
-                </div>
-              </div>
-              {(selectedDraft || selectedAgentUpdateDraft || selectedAgent?.canDelete) && (
-                <div className="aw-head-actions">
+            <ResourceDetailLayout
+              className="aw-agent-detail"
+              title={selectedName}
+              description={draft.description || (loadingAgentInfo || (detailOnly && !detailAgentInfoResolved) ? "正在读取智能体信息…" : "暂无描述")}
+              identitySeed={selectedName}
+              backLabel="返回智能体列表"
+              onBack={detailOnly ? onBack : undefined}
+              meta={(
+                <>
+                  {displayCurrentVersion != null && <span className="aw-agent-meta">v{displayCurrentVersion}</span>}
+                  {selectedDraft && <span className="aw-agent-meta">草稿</span>}
+                  {selectedAgentUpdateDraft && <span className="aw-agent-meta">待更新</span>}
+                  {!selectedAgent && !selectedDraft && selectedPendingTask && (
+                    <span className="aw-agent-meta">{selectedPendingTask.label}</span>
+                  )}
+                </>
+              )}
+              actionsClassName="aw-head-actions"
+              bodyClassName="aw-agent-detail__body"
+              actions={(selectedDraft || selectedAgentUpdateDraft || selectedAgent?.canDelete) ? (
+                <>
                   {(selectedDraft || selectedAgentUpdateDraft) && (
-                    <button
+                    <Button
                       type="button"
-                      className="aw-head-delete aw-head-delete--draft"
+                      color="danger"
+                      variant="soft"
+                      size="lg"
+                      pill={false}
                       onClick={() => {
                         const draftToDelete = selectedDraft ?? selectedAgentUpdateDraft;
                         if (draftToDelete) deleteSingleDraft(draftToDelete);
@@ -2838,24 +2841,32 @@ export function AgentWorkspace({
                     >
                       <Trash2 aria-hidden />
                       <span>删除草稿</span>
-                    </button>
+                    </Button>
                   )}
                   {selectedAgent?.canDelete && (
-                    <button
+                    <Button
                       type="button"
-                      className="aw-head-delete"
+                      color="danger"
+                      variant="soft"
+                      size="lg"
+                      pill={false}
                       onClick={() => void deleteSingleAgent(selectedAgent)}
                       disabled={deletingAgents}
                       aria-label="删除 Agent"
                       title="删除 Agent"
                     >
                       <Trash2 aria-hidden />
                       <span>{deletingAgents ? "删除中…" : "删除 Agent"}</span>
-                    </button>
+                    </Button>
                   )}
-                </div>
-              )}
-            </div>
+                </>
+              ) : undefined}
+              sections={visibleAgentSections.map((item) => ({
+                key: item.id,
+                label: item.label,
+                disabled: deploymentInProgress,
+                content: item.id === section ? (
+                  <>
             {deploymentTask && shouldShowDeploymentTask && (
               <div
                 className={`aw-detail-deployment${deploymentInProgress ? " is-running" : ""}`}
@@ -2868,50 +2879,7 @@ export function AgentWorkspace({
                 />
               </div>
             )}
-            <nav
-              className="aw-agent-tabs"
-              aria-label="智能体详情"
-              role="tablist"
-            >
-              {visibleAgentSections.map((item) => (
-                <button
-                  type="button"
-                  key={item.id}
-                  id={`agent-${item.id}-tab`}
-                  className={section === item.id ? "is-active" : ""}
-                  role="tab"
-                  aria-selected={section === item.id}
-                  aria-controls={`agent-${item.id}-panel`}
-                  tabIndex={section === item.id ? 0 : -1}
-                  onClick={() => setSection(item.id)}
-                  onKeyDown={(event) => {
-                    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
-                    event.preventDefault();
-                    const currentIndex = visibleAgentSections.findIndex(
-                      (sectionItem) => sectionItem.id === item.id,
-                    );
-                    const nextIndex = event.key === "Home"
-                      ? 0
-                      : event.key === "End"
-                        ? visibleAgentSections.length - 1
-                        : (currentIndex + (event.key === "ArrowRight" ? 1 : -1) + visibleAgentSections.length)
-                          % visibleAgentSections.length;
-                    const nextSection = visibleAgentSections[nextIndex];
-                    setSection(nextSection.id);
-                    document.getElementById(`agent-${nextSection.id}-tab`)?.focus();
-                  }}
-                >
-                  {item.label}
-                </button>
-              ))}
-            </nav>
-
-            <div
-              className="aw-content"
-              id={`agent-${section}-panel`}
-              role="tabpanel"
-              aria-labelledby={`agent-${section}-tab`}
-            >
+            <div className="aw-content">
               {section === "basic" && (
                 <div className="aw-basic-stack">
                   {(detailAgentInfoError || runtimeDetailError) && (
@@ -3746,6 +3714,13 @@ export function AgentWorkspace({
                 </span>
               </div>
             )}
+                  </>
+                ) : null,
+              }))}
+              activeSectionKey={section}
+              navigationLabel="智能体详情"
+              onSectionChange={setSection}
+            />
           </main>
         )}
         </div>