From 092d71bdf310d3b7ad54aa25e137a9c3f3dccaf5 Mon Sep 17 00:00:00 2001
From: huyan <huyanxius@Gmail.com>
Date: Sat, 19 Sep 2026 00:53:31 +0800
Subject: [PATCH 1/4] feat(character): lay four-way masters out on the
 nine-cell direction grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

四向原本排成 2×2 方阵,读不出方位。改成和八向同一张九宫格:北在上中、南在下中、西在左中、东在右中,四角与中心留空。
---
 frontend/src/entities/character/directions.test.ts | 4 ++--
 frontend/src/entities/character/directions.ts      | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/entities/character/directions.test.ts b/frontend/src/entities/character/directions.test.ts
index f9e5086c..03dc6306 100644
--- a/frontend/src/entities/character/directions.test.ts
+++ b/frontend/src/entities/character/directions.test.ts
@@ -11,8 +11,8 @@ describe('direction grid layouts', () => {
   it('maps single, four-way, and eight-way assets to their display grids', () => {
     expect(getDirectionGridLayout('single')).toEqual({ columns: 1, cells: ['east'] })
     expect(getDirectionGridLayout('four-way')).toEqual({
-      columns: 2,
-      cells: ['north', 'south', 'west', 'east'],
+      columns: 3,
+      cells: [null, 'north', null, 'west', null, 'east', null, 'south', null],
     })
     expect(getDirectionGridLayout('eight-way')).toEqual({
       columns: 3,
diff --git a/frontend/src/entities/character/directions.ts b/frontend/src/entities/character/directions.ts
index 402591ef..a77f605d 100644
--- a/frontend/src/entities/character/directions.ts
+++ b/frontend/src/entities/character/directions.ts
@@ -59,9 +59,10 @@ const DIRECTION_PROFILES: Record<DirectionalMovement, DirectionProfile> = {
 
 const DIRECTION_GRID_LAYOUTS: Record<DirectionalMovement, DirectionGridLayout> = {
   single: { columns: 1, cells: ['east'] },
+  /** 四向也走九宫格:方位落在它本来的位置上,四角和中心空着,不挤成 2×2 方阵。 */
   'four-way': {
-    columns: 2,
-    cells: ['north', 'south', 'west', 'east'],
+    columns: 3,
+    cells: [null, 'north', null, 'west', null, 'east', null, 'south', null],
   },
   'eight-way': {
     columns: 3,

From 7796d98b99419c96ee5e7626be9a3007fe27717d Mon Sep 17 00:00:00 2001
From: huyan <huyanxius@Gmail.com>
Date: Sat, 19 Sep 2026 00:53:42 +0800
Subject: [PATCH 2/4] fix(quick-start): keep the first-frame pad readable on
 the nine-cell grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

四向改九宫格后空位从 0 个变成 5 个,原来每个空位画一个虚线框,盘面会碎成一片。空位改为不画边框、不进可访问树。
---
 frontend/src/pages/quick-start/index.test.tsx | 7 ++++---
 frontend/src/pages/quick-start/index.tsx      | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/quick-start/index.test.tsx b/frontend/src/pages/quick-start/index.test.tsx
index 6e1b605c..17bf94ea 100644
--- a/frontend/src/pages/quick-start/index.test.tsx
+++ b/frontend/src/pages/quick-start/index.test.tsx
@@ -2877,8 +2877,9 @@ describe('QuickStartPage', () => {
 
     const grid = await screen.findByRole('group', { name: '四向首帧集合' })
     expect(within(grid).getAllByRole('img')).toHaveLength(4)
-    expect(grid.className).toContain('grid-cols-2')
-    expect(within(grid).queryByLabelText('中心留空')).toBeNull()
+    // 四向也按方位排在九宫格上:上北下南左西右东,四角与中心空着。
+    expect(grid.className).toContain('grid-cols-3')
+    expect(grid.children).toHaveLength(9)
   })
 
   it('动作首帧确认完成后仍显示八张独立图片和空中心', async () => {
@@ -2922,7 +2923,7 @@ describe('QuickStartPage', () => {
 
     const grid = await screen.findByRole('group', { name: '八向首帧集合' })
     expect(within(grid).getAllByRole('img')).toHaveLength(8)
-    expect(within(grid).getByLabelText('中心留空')).toBeTruthy()
+    expect(grid.children).toHaveLength(9)
   })
 
   it('keeps the natural-language creation entry visible when no run is selected', () => {
diff --git a/frontend/src/pages/quick-start/index.tsx b/frontend/src/pages/quick-start/index.tsx
index 6f5afe88..c19a7626 100644
--- a/frontend/src/pages/quick-start/index.tsx
+++ b/frontend/src/pages/quick-start/index.tsx
@@ -2453,11 +2453,12 @@ function DirectionFirstFrameGrid({
     >
       {layout.cells.map((direction, cellIndex) => {
         if (!direction) {
+          // 宫格占位只是盘面的一部分,不进可访问树,也不画成一个个虚线空框。
           return (
             <div
-              key={`center-${cellIndex}`}
-              aria-label="中心留空"
-              className="rounded-xl border border-dashed border-app-line/40 bg-app-canvas/20"
+              key={`empty-${cellIndex}`}
+              aria-hidden="true"
+              className="rounded-app-control bg-app-canvas/20"
             />
           )
         }

From 89ef797c997980b6ef12fabe41ba060c5db2d675 Mon Sep 17 00:00:00 2001
From: huyan <huyanxius@Gmail.com>
Date: Sat, 19 Sep 2026 00:53:42 +0800
Subject: [PATCH 3/4] refactor(export): collapse the export entries into a menu
 and drop hardcoded colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

三个导出入口原本竖排,嵌进调用方的横排按钮组后会错落成三行。新增 layout="menu",只露一个「导出」按钮,资产包与 Cocos 两条路径进二级菜单,每项都带图标。

Cocos 按钮与导入反馈的 sky/amber/emerald/rose 硬编码色改用 app-* token,一套值同时覆盖明暗主题,不再需要 dark: 分支。

基础类不再输出 padding、边框色和非 pill 圆角:它们和调用方 className 里的同类 utility 撞车,谁生效取决于 CSS 产出顺序而不是拼接顺序。playtest 工具栏同步补上尺寸。
---
 frontend/src/app/playtest-export-page.tsx     |   2 +-
 .../features/export-package/export-panel.tsx  | 299 +++++++++++++++---
 2 files changed, 258 insertions(+), 43 deletions(-)

diff --git a/frontend/src/app/playtest-export-page.tsx b/frontend/src/app/playtest-export-page.tsx
index 8cec2141..e45cc488 100644
--- a/frontend/src/app/playtest-export-page.tsx
+++ b/frontend/src/app/playtest-export-page.tsx
@@ -20,7 +20,7 @@ const renderToolbar: NonNullable<PlaytestPageProps['renderToolbar']> = ({
       <ExportButton
         model={model}
         enableCocosExport
-        className="border-app-accent bg-app-accent text-app-on-accent hover:bg-app-accent-hover"
+        className="min-h-10 rounded-app-control bg-app-accent px-3 py-2 text-xs font-semibold text-app-on-accent hover:bg-app-accent-hover"
       />
     )
   } catch {
diff --git a/frontend/src/features/export-package/export-panel.tsx b/frontend/src/features/export-package/export-panel.tsx
index 1fcb3587..57cc922d 100644
--- a/frontend/src/features/export-package/export-panel.tsx
+++ b/frontend/src/features/export-package/export-panel.tsx
@@ -1,5 +1,13 @@
 import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
-import { ArrowClockwise, Check, CircleNotch, DownloadSimple } from '@phosphor-icons/react'
+import {
+  ArrowClockwise,
+  ArrowSquareIn,
+  CaretDown,
+  Check,
+  CircleNotch,
+  DownloadSimple,
+  FileArrowDown,
+} from '@phosphor-icons/react'
 
 import {
   productMenuItemClass,
@@ -53,6 +61,11 @@ export interface ExportButtonProps {
   cocosImporter?: CocosImporter
   cocosPairer?: CocosPairer
   enableCocosExport?: boolean
+  /**
+   * stack 竖排(卡片内默认);menu 只露一个「导出」按钮,把资产包和 Cocos 两条路径
+   * 收进二级菜单 —— 页面顶部的操作行放不下三个同级导出入口。
+   */
+  layout?: 'stack' | 'menu'
 }
 
 type ExportState =
@@ -87,6 +100,18 @@ const STAGE_LABELS: Readonly<Record<ExportPackageModel['stage'], string>> = {
   playtest: 'Playtest 运行包',
 }
 
+/**
+ * 导出入口共用的结构类。这里刻意不写 padding、min-height、边框色和字号:
+ * 它们由调用方的 className 给,基础类再写一份会和调用方的同类 utility 撞车,
+ * 谁生效取决于 CSS 产出顺序而不是拼接顺序。
+ */
+function exportActionClass(pill: boolean, className: string): string {
+  return `${pill ? 'rounded-full' : ''} inline-flex items-center justify-center gap-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent disabled:cursor-not-allowed disabled:opacity-50 ${className}`
+}
+
+const EXPORT_ALERT_CLASS =
+  'rounded-app-compact border border-app-danger-line bg-app-danger-soft px-3 py-2 text-[11px] font-medium leading-4 text-app-danger'
+
 const defaultExporter: AssetExporter = (model, onPhase) => exportGameAssets(model, { onPhase })
 const defaultCocosExporter: AssetExporter = (model, onPhase) =>
   exportGameAssets(model, { targets: [cocosCreatorTarget], onPhase })
@@ -221,12 +246,20 @@ function useCocosImportAction(
   return { state, working, pairingCode, setPairingCode, startImport, pairAndImport }
 }
 
-function CocosImportFeedback({ action }: { action: ReturnType<typeof useCocosImportAction> }) {
+function CocosImportFeedback({
+  action,
+  inline = false,
+}: {
+  action: ReturnType<typeof useCocosImportAction>
+  inline?: boolean
+}) {
+  // inline 时反馈块独占一行,不跟按钮抢同一行的横向空间。
+  const block = inline ? 'basis-full' : ''
   if (action.state.status === 'working') {
     return (
       <p
         role="status"
-        className="rounded-lg bg-sky-50 dark:bg-app-accent-muted px-3 py-2 text-xs text-sky-800 dark:text-app-ink-soft"
+        className={`rounded-app-compact border border-app-line bg-app-surface-muted px-3 py-2 text-xs text-app-ink-soft ${block}`}
       >
         {COCOS_PHASE_LABELS[action.state.phase]}
       </p>
@@ -234,11 +267,13 @@ function CocosImportFeedback({ action }: { action: ReturnType<typeof useCocosImp
   }
   if (action.state.status === 'pairing') {
     return (
-      <div className="space-y-2 rounded-lg bg-sky-50 dark:bg-app-accent-muted p-2">
-        <p role="alert" className="text-xs text-sky-900 dark:text-app-ink">
+      <div
+        className={`space-y-2 rounded-app-compact border border-app-line bg-app-surface-muted p-2 ${block}`}
+      >
+        <p role="alert" className="text-xs text-app-ink-soft">
           {action.state.message}
         </p>
-        <label className="block text-[11px] font-medium text-sky-900 dark:text-app-ink">
+        <label className="block text-[11px] font-medium text-app-ink-soft">
           Creator 连接码
           <input
             aria-label="Creator 连接码"
@@ -246,13 +281,13 @@ function CocosImportFeedback({ action }: { action: ReturnType<typeof useCocosImp
             maxLength={6}
             value={action.pairingCode}
             onChange={(event) => action.setPairingCode(event.target.value.replace(/\D/g, ''))}
-            className="mt-1 w-full rounded border border-sky-200 dark:border-app-line bg-white dark:bg-app-surface-raised px-2 py-1 text-xs"
+            className="mt-1 w-full rounded border border-app-line bg-app-surface-raised px-2 py-1 text-xs text-app-ink"
           />
         </label>
         <button
           type="button"
           onClick={() => void action.pairAndImport()}
-          className="w-full rounded bg-sky-700 dark:bg-app-accent px-2 py-1 text-xs font-semibold text-white dark:text-app-on-accent"
+          className="w-full rounded bg-app-accent px-2 py-1 text-xs font-semibold text-app-on-accent transition-colors hover:bg-app-accent-hover"
         >
           连接并导入
         </button>
@@ -261,7 +296,10 @@ function CocosImportFeedback({ action }: { action: ReturnType<typeof useCocosImp
   }
   if (action.state.status === 'failure') {
     return (
-      <div role="alert" className="rounded-lg bg-rose-50 px-3 py-2 text-xs text-rose-800">
+      <div
+        role="alert"
+        className={`rounded-app-compact border border-app-danger-line bg-app-danger-soft px-3 py-2 text-xs text-app-danger ${block}`}
+      >
         <p>导入失败：{action.state.message}</p>
         {action.state.jobCode ? (
           <p className="mt-1 text-[11px]">
@@ -279,7 +317,9 @@ function CocosImportFeedback({ action }: { action: ReturnType<typeof useCocosImp
   }
   if (action.state.status === 'success') {
     return (
-      <div className="rounded-lg bg-emerald-50 px-3 py-2 text-xs text-emerald-800">
+      <div
+        className={`rounded-app-compact border border-app-accent-soft bg-app-accent-muted px-3 py-2 text-xs text-app-accent ${block}`}
+      >
         <p className="font-semibold">已导入到当前 Cocos 工程</p>
         <p className="mt-1">
           {action.state.result.projectName} · {action.state.result.animationCount} 个动作，
@@ -605,6 +645,7 @@ export function ExportButton({
   pill = false,
   iconOnly = false,
   enableCocosExport = false,
+  layout = 'stack',
 }: ExportButtonProps) {
   const { state, working, startExport } = useExportAction(model, exporter)
   const tooltipId = useId()
@@ -612,7 +653,8 @@ export function ExportButton({
   const cocosImport = useCocosImportAction(model, cocosImporter, cocosPairer)
   const showCocosExport =
     enableCocosExport || Boolean(cocosExporter || cocosImporter || cocosPairer)
-  const label =
+  const busy = working || cocos.working || cocosImport.working
+  const packageLabel =
     state.status === 'working'
       ? PHASE_LABELS[state.phase]
       : state.status === 'failure'
@@ -620,39 +662,76 @@ export function ExportButton({
         : state.status === 'success'
           ? '下载完成'
           : (idleLabel ?? `导出${STAGE_LABELS[model.stage]}`)
+  const cocosPackageLabel =
+    cocos.state.status === 'working'
+      ? PHASE_LABELS[cocos.state.phase]
+      : cocos.state.status === 'failure'
+        ? '重新导出 Cocos 包'
+        : cocos.state.status === 'success'
+          ? 'Cocos 包下载完成'
+          : '下载 Cocos 包'
+  const cocosImportLabel =
+    cocosImport.state.status === 'failure' ? '重新导入 Cocos' : '一键导入 Cocos'
+
+  if (layout === 'menu' && showCocosExport && !iconOnly) {
+    return (
+      <ExportMenuButton
+        busy={busy}
+        className={className}
+        pill={pill}
+        packageLabel={packageLabel}
+        packageState={state.status}
+        onExportPackage={() => void startExport()}
+        cocosImportLabel={cocosImportLabel}
+        onImportCocos={() => void cocosImport.startImport()}
+        cocosPackageLabel={cocosPackageLabel}
+        cocosPackageTitle={
+          cocos.state.status === 'failure' ? cocos.state.message : '插件不可用时下载 Cocos 适配包'
+        }
+        onExportCocosPackage={() => void cocos.startExport()}
+        feedback={
+          <>
+            {state.status === 'failure' ? (
+              <span role="alert" className={EXPORT_ALERT_CLASS}>
+                导出失败：{state.message}
+              </span>
+            ) : null}
+            <CocosImportFeedback action={cocosImport} />
+            {cocos.state.status === 'failure' ? (
+              <span role="alert" className={EXPORT_ALERT_CLASS}>
+                Cocos 导出失败：{cocos.state.message}
+              </span>
+            ) : null}
+          </>
+        }
+      />
+    )
+  }
 
   return (
     <div className="grid min-w-0 gap-1">
       <button
         type="button"
-        disabled={working || cocos.working || cocosImport.working}
-        aria-label={iconOnly ? label : undefined}
+        disabled={busy}
+        aria-label={iconOnly ? packageLabel : undefined}
         aria-describedby={iconOnly ? tooltipId : undefined}
         title={state.status === 'failure' ? state.message : undefined}
         onClick={() => void startExport()}
         className={
           iconOnly
             ? `group/export-action relative grid size-10 shrink-0 place-items-center rounded-lg transition focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent disabled:cursor-not-allowed disabled:opacity-50 ${className}`
-            : `${pill ? 'rounded-full' : 'rounded-lg'} inline-flex min-h-10 items-center justify-center gap-2 border border-current px-3 py-2 text-xs font-semibold disabled:opacity-50 ${className}`
+            : exportActionClass(pill, className)
         }
       >
         {iconOnly ? (
           <>
-            {state.status === 'working' ? (
-              <CircleNotch aria-hidden="true" size={18} weight="bold" className="animate-spin" />
-            ) : state.status === 'success' ? (
-              <Check aria-hidden="true" size={18} weight="bold" />
-            ) : state.status === 'failure' ? (
-              <ArrowClockwise aria-hidden="true" size={18} weight="bold" />
-            ) : (
-              <DownloadSimple aria-hidden="true" size={18} weight="bold" />
-            )}
+            <ExportStateIcon status={state.status} size={18} />
             <span
               id={tooltipId}
               role="tooltip"
               className="pointer-events-none invisible absolute top-full left-1/2 z-20 mt-2 -translate-x-1/2 whitespace-nowrap rounded-md bg-app-ink px-2 py-1 text-[11px] font-medium text-app-canvas opacity-0 shadow-app-card transition group-hover/export-action:visible group-hover/export-action:opacity-100 group-focus-within/export-action:visible group-focus-within/export-action:opacity-100"
             >
-              {label}
+              {packageLabel}
             </span>
           </>
         ) : (
@@ -662,12 +741,12 @@ export function ExportButton({
                 {icon}
               </span>
             ) : null}
-            <span>{label}</span>
+            <span>{packageLabel}</span>
           </>
         )}
       </button>
       {state.status === 'failure' ? (
-        <span role="alert" className="max-w-64 text-[11px] font-medium leading-4 text-app-danger">
+        <span role="alert" className={EXPORT_ALERT_CLASS}>
           导出失败：{state.message}
         </span>
       ) : null}
@@ -675,37 +754,28 @@ export function ExportButton({
         <>
           <button
             type="button"
-            disabled={working || cocos.working || cocosImport.working}
+            disabled={busy}
             onClick={() => void cocosImport.startImport()}
-            className={`${pill ? 'rounded-full' : 'rounded-lg'} border border-sky-500 px-3 py-2 text-xs font-semibold text-sky-800 dark:text-app-ink-soft disabled:opacity-50 ${className}`}
+            className={exportActionClass(pill, className)}
           >
-            {cocosImport.state.status === 'failure' ? '重新导入 Cocos' : '一键导入 Cocos'}
+            {cocosImportLabel}
           </button>
           <CocosImportFeedback action={cocosImport} />
           <button
             type="button"
-            disabled={working || cocos.working || cocosImport.working}
+            disabled={busy}
             title={
               cocos.state.status === 'failure'
                 ? cocos.state.message
                 : '插件不可用时下载 Cocos 适配包'
             }
             onClick={() => void cocos.startExport()}
-            className={`${pill ? 'rounded-full' : 'rounded-lg'} border border-amber-400 dark:border-app-warning-line px-3 py-2 text-xs font-semibold text-amber-800 dark:text-app-warning disabled:opacity-50 ${className}`}
+            className={exportActionClass(pill, className)}
           >
-            {cocos.state.status === 'working'
-              ? PHASE_LABELS[cocos.state.phase]
-              : cocos.state.status === 'failure'
-                ? '重新导出 Cocos 包'
-                : cocos.state.status === 'success'
-                  ? 'Cocos 包下载完成'
-                  : '下载 Cocos 包'}
+            {cocosPackageLabel}
           </button>
           {cocos.state.status === 'failure' ? (
-            <span
-              role="alert"
-              className="max-w-64 text-[11px] font-medium leading-4 text-app-danger"
-            >
+            <span role="alert" className={EXPORT_ALERT_CLASS}>
               Cocos 导出失败：{cocos.state.message}
             </span>
           ) : null}
@@ -714,3 +784,148 @@ export function ExportButton({
     </div>
   )
 }
+
+function ExportStateIcon({ status, size }: { status: ExportState['status']; size: number }) {
+  if (status === 'working') {
+    return <CircleNotch aria-hidden="true" size={size} weight="bold" className="animate-spin" />
+  }
+  if (status === 'success') return <Check aria-hidden="true" size={size} weight="bold" />
+  if (status === 'failure') return <ArrowClockwise aria-hidden="true" size={size} weight="bold" />
+  return <DownloadSimple aria-hidden="true" size={size} weight="bold" />
+}
+
+/**
+ * 顶部操作行里的导出入口:按钮只占一格,资产包与 Cocos 两条路径都在菜单里,
+ * 每一项都是「图标 + 文案」,不让同一行出现有图标和纯文字两种按钮。
+ */
+function ExportMenuButton({
+  busy,
+  className,
+  pill,
+  packageLabel,
+  packageState,
+  onExportPackage,
+  cocosImportLabel,
+  onImportCocos,
+  cocosPackageLabel,
+  cocosPackageTitle,
+  onExportCocosPackage,
+  feedback,
+}: {
+  busy: boolean
+  className: string
+  pill: boolean
+  packageLabel: string
+  packageState: ExportState['status']
+  onExportPackage: () => void
+  cocosImportLabel: string
+  onImportCocos: () => void
+  cocosPackageLabel: string
+  cocosPackageTitle: string
+  onExportCocosPackage: () => void
+  feedback: ReactNode
+}) {
+  const menu = useProductPopoverMotion()
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const menuId = useId()
+
+  useEffect(() => {
+    if (!menu.expanded) return
+    menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]')?.focus()
+    const closeFromOutside = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) menu.close()
+    }
+    const closeFromKeyboard = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        menu.close()
+        triggerRef.current?.focus()
+      }
+    }
+    document.addEventListener('pointerdown', closeFromOutside)
+    document.addEventListener('keydown', closeFromKeyboard)
+    return () => {
+      document.removeEventListener('pointerdown', closeFromOutside)
+      document.removeEventListener('keydown', closeFromKeyboard)
+    }
+  }, [menu])
+
+  const choose = (run: () => void) => {
+    menu.close()
+    triggerRef.current?.focus()
+    run()
+  }
+
+  return (
+    <div ref={rootRef} className="relative">
+      <button
+        ref={triggerRef}
+        type="button"
+        disabled={busy}
+        aria-haspopup="menu"
+        aria-expanded={menu.expanded}
+        aria-controls={menu.mounted ? menuId : undefined}
+        onClick={menu.toggle}
+        className={exportActionClass(pill, className)}
+      >
+        <ExportStateIcon status={packageState} size={15} />
+        导出
+        <CaretDown aria-hidden="true" size={12} weight="bold" />
+      </button>
+
+      {menu.mounted ? (
+        <div
+          ref={menuRef}
+          id={menuId}
+          data-state={menu.state}
+          data-motion="scale-fade"
+          role="menu"
+          aria-label="导出方式"
+          aria-hidden={menu.expanded ? undefined : true}
+          inert={!menu.expanded}
+          onAnimationEnd={menu.finish}
+          className={`${productPopoverClass} absolute top-[calc(100%+0.4rem)] right-0 z-30 grid min-w-52 gap-0.5 overflow-hidden p-1.5 ${productPopoverMotionClass(menu.state)}`}
+        >
+          <button
+            type="button"
+            role="menuitem"
+            disabled={busy}
+            onClick={() => choose(onExportPackage)}
+            className={`${productMenuItemClass} gap-2.5 text-left text-app-ink-soft disabled:opacity-50`}
+          >
+            <DownloadSimple aria-hidden="true" size={15} weight="bold" />
+            {packageLabel}
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            disabled={busy}
+            onClick={() => choose(onImportCocos)}
+            className={`${productMenuItemClass} gap-2.5 text-left text-app-ink-soft disabled:opacity-50`}
+          >
+            <ArrowSquareIn aria-hidden="true" size={15} weight="bold" />
+            {cocosImportLabel}
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            disabled={busy}
+            title={cocosPackageTitle}
+            onClick={() => choose(onExportCocosPackage)}
+            className={`${productMenuItemClass} gap-2.5 text-left text-app-muted disabled:opacity-50`}
+          >
+            <FileArrowDown aria-hidden="true" size={15} weight="bold" />
+            {cocosPackageLabel}
+          </button>
+        </div>
+      ) : null}
+
+      {feedback ? (
+        <div className="absolute top-[calc(100%+0.4rem)] right-0 z-20 grid w-72 gap-1">
+          {feedback}
+        </div>
+      ) : null}
+    </div>
+  )
+}

From 8676e9dd444dca42fb2e279bbc5e1735ed5b360a Mon Sep 17 00:00:00 2001
From: huyan <huyanxius@Gmail.com>
Date: Sat, 19 Sep 2026 00:53:53 +0800
Subject: [PATCH 4/4] feat(character-detail): rebuild the asset page layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

母版与规格转为左栏,动作列表进右栏并留在首屏;原来母版按视口平分整行,每格接近 900px。

标题缩略图从 absolute 悬空收回正常流,header 随之去掉 overflow-hidden —— 那个属性会裁掉 header 内的任何浮层,导出菜单第一项就被它切掉。

顶部操作行统一成设计系统的控件:次级操作用 chrome 变体,重量只留给「在预览台打开」。承载块统一为同一种底色与圆角,不再各挑各的。

删掉重复信息:方位盘已经画出几向,规格里不再重复「4 个方位」「4/4 已备齐」,母版齐备时不占行,只在缺方向时点名。
---
 .../src/pages/character-detail/index.test.tsx |  36 +++-
 frontend/src/pages/character-detail/index.tsx | 154 +++++++++++-------
 2 files changed, 125 insertions(+), 65 deletions(-)

diff --git a/frontend/src/pages/character-detail/index.test.tsx b/frontend/src/pages/character-detail/index.test.tsx
index a899ca2b..72a27c9e 100644
--- a/frontend/src/pages/character-detail/index.test.tsx
+++ b/frontend/src/pages/character-detail/index.test.tsx
@@ -55,8 +55,7 @@ describe('CharacterDetailPage', () => {
     expect(screen.queryByText('GIF')).toBeNull()
     expect(screen.getByRole('button', { name: '增加动作' }).hasAttribute('disabled')).toBe(false)
     const assetActions = screen.getByRole('group', { name: '角色资产操作' })
-    const exportEntry = within(assetActions).getByRole('button', { name: '导出资产包' })
-    expect(exportEntry.className).toContain('rounded-full')
+    const exportEntry = within(assetActions).getByRole('button', { name: /^导出/ })
     const pixelPerfectEntry = within(assetActions).getByRole('button', { name: '完美像素化' })
     const playtestEntry = within(assetActions).getByRole('link', {
       name: '在预览台打开当前造型',
@@ -64,7 +63,7 @@ describe('CharacterDetailPage', () => {
     for (const action of [exportEntry, pixelPerfectEntry, playtestEntry]) {
       expect(action.querySelector('svg')).toBeTruthy()
       expect(action.className).toContain('min-h-10')
-      expect(action.className).toContain('rounded-full')
+      expect(action.className).toContain('rounded-app-control')
     }
     expect(screen.queryByRole('button', { name: '完美像素画' })).toBeNull()
     expect(screen.queryByText('当前阶段')).toBeNull()
@@ -76,6 +75,31 @@ describe('CharacterDetailPage', () => {
     expect(playtestEntry.parentElement?.className).toContain('items-center')
   })
 
+  it('collects both export paths into one menu with icon-labelled items', async () => {
+    renderCharacter('51')
+    await screen.findByRole('heading', { name: '轻装信使' })
+
+    const trigger = within(screen.getByRole('group', { name: '角色资产操作' })).getByRole(
+      'button',
+      {
+        name: /^导出/,
+      },
+    )
+    expect(trigger.getAttribute('aria-expanded')).toBe('false')
+    expect(screen.queryByRole('menu', { name: '导出方式' })).toBeNull()
+
+    fireEvent.click(trigger)
+
+    const menu = screen.getByRole('menu', { name: '导出方式' })
+    const items = within(menu).getAllByRole('menuitem')
+    expect(items.map((item) => item.textContent)).toEqual([
+      '导出资产包',
+      '一键导入 Cocos',
+      '下载 Cocos 包',
+    ])
+    for (const item of items) expect(item.querySelector('svg')).toBeTruthy()
+  })
+
   it('routes both add-action choices to the character existing WorkflowRun', async () => {
     const create = vi.spyOn(workflowRunApis, 'create')
     renderCharacter('51')
@@ -301,9 +325,9 @@ describe('CharacterDetailPage', () => {
 
     expect(await screen.findByRole('heading', { name: '轻装信使' })).toBeTruthy()
     const templates = screen.getByRole('region', { name: '角色母版方向' })
-    expect(templates.className).toContain('grid-cols-3')
-    expect(templates.children).toHaveLength(9)
-    expect(within(templates).getByLabelText('八向宫格中心留空')).toBeTruthy()
+    const grid = templates.querySelector('[data-direction-grid]')
+    expect(grid?.className).toContain('grid-cols-[repeat(3,6rem)]')
+    expect(grid?.children).toHaveLength(9)
     expect(
       within(templates)
         .getAllByRole('img')
diff --git a/frontend/src/pages/character-detail/index.tsx b/frontend/src/pages/character-detail/index.tsx
index 65f52f88..284f5b74 100644
--- a/frontend/src/pages/character-detail/index.tsx
+++ b/frontend/src/pages/character-detail/index.tsx
@@ -4,6 +4,8 @@ import { Link, useOutletContext, useParams } from 'react-router'
 
 import {
   ACTION_DIRECTIONS,
+  ART_STYLE,
+  CHARACTER_PERSPECTIVE,
   characterTemplateImages,
   characterApis,
   getDirectionGridLayout,
@@ -20,6 +22,7 @@ import {
 } from '@/entities'
 import { createCharacterExportModel, ExportButton } from '@/features/export-package'
 import { PixelPerfectWorkbench } from '@/features/pixel-perfect'
+import { productControlClass } from '@/shared/ui'
 
 const ACTION_TYPE_LABELS: Record<string, string> = {
   walk: '行走',
@@ -28,8 +31,15 @@ const ACTION_TYPE_LABELS: Record<string, string> = {
   custom: '自定义',
 }
 
-const ASSET_ACTION_SECONDARY =
-  'inline-flex min-h-10 items-center justify-center gap-2 rounded-full border border-app-line bg-app-surface-raised px-5 text-xs font-semibold text-app-ink-soft transition-colors hover:border-app-line-strong hover:bg-app-surface-muted hover:text-app-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent'
+const ASSET_ACTION_SECONDARY = productControlClass('chrome')
+
+const ASSET_ACTION_PRIMARY =
+  'inline-flex min-h-10 items-center gap-2 rounded-app-control bg-app-accent px-4 text-xs font-semibold text-app-on-accent transition-colors hover:bg-app-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent'
+
+/** 方位标签压在格角,不占一条独立的 caption 行。 */
+const SECTION_LABEL = 'text-xs font-medium text-app-muted'
+
+const DIRECTION_TAG = 'absolute left-1.5 top-1 text-[0.6rem] leading-none text-app-faint'
 
 const DIRECTION_LABELS: Record<ActionDirection, string> = {
   east: '东',
@@ -153,21 +163,15 @@ export function CharacterDetailPage() {
 
   return (
     <section aria-labelledby="character-title" className="p-4 lg:px-6 lg:py-5">
-      <header className="relative overflow-hidden border-b border-app-line pb-5">
+      <header className="relative border-b border-app-line pb-4">
         <Link
           to={`/projects/${projectId}/assets`}
           className="text-xs text-app-muted transition-colors hover:text-app-accent"
         >
           ← 返回资产库
         </Link>
-        <div className="mt-5 flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
-          <div className="relative z-10 min-w-0 shrink-0">
-            <h2
-              id="character-title"
-              className="font-serif text-3xl font-medium tracking-[-0.04em] text-app-ink"
-            >
-              {name}
-            </h2>
+        <div className="mt-4 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex min-w-0 items-center gap-4">
             {selectedOutfit && titlePreviewUrl ? (
               <img
                 src={titlePreviewUrl}
@@ -175,14 +179,25 @@ export function CharacterDetailPage() {
                 loading="eager"
                 decoding="async"
                 fetchPriority="high"
-                className="pointer-events-none absolute bottom-[-4.5rem] left-[calc(100%+0.5rem)] hidden h-44 w-44 max-w-none object-contain opacity-85 sm:block [image-rendering:pixelated]"
+                className="size-16 shrink-0 rounded-app-control bg-app-surface-muted object-contain p-1.5 [image-rendering:pixelated]"
               />
             ) : null}
+            <div className="min-w-0">
+              <h2
+                id="character-title"
+                className="truncate font-serif text-3xl font-medium tracking-[-0.04em] text-app-ink"
+              >
+                {name}
+              </h2>
+              {selectedOutfit ? (
+                <p className="mt-1 truncate text-xs text-app-muted">{selectedOutfit.name}</p>
+              ) : null}
+            </div>
           </div>
           <div
             role="group"
             aria-label="角色资产操作"
-            className="relative z-10 flex flex-wrap items-center gap-2 sm:justify-end"
+            className="flex flex-wrap items-center gap-1 lg:shrink-0 lg:justify-end"
           >
             {selectedOutfit ? (
               <CharacterExport project={project} character={character} outfit={selectedOutfit} />
@@ -203,7 +218,7 @@ export function CharacterDetailPage() {
               <Link
                 to={`/playtest/${character.id}/${selectedOutfit.id}`}
                 aria-label="在预览台打开当前造型"
-                className="inline-flex min-h-10 items-center gap-2 rounded-full border border-app-accent bg-app-accent px-5 text-xs font-semibold text-app-on-accent transition-colors hover:border-app-accent-hover hover:bg-app-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
+                className={ASSET_ACTION_PRIMARY}
               >
                 <Play size={15} weight="fill" aria-hidden="true" />
                 在预览台打开
@@ -219,14 +234,13 @@ export function CharacterDetailPage() {
         </div>
       ) : (
         <>
-          <CharacterTemplateDirections
-            character={character}
-            movement={project.directionalMovement}
-          />
           {pixelPerfectOpen ? (
             <PixelPerfectWorkbench id="pixel-perfect-workbench" actions={selectedOutfit.actions} />
           ) : null}
-          <ActionList key={selectedOutfit.id} character={character} outfit={selectedOutfit} />
+          <div className="mt-5 grid items-start gap-x-10 gap-y-6 lg:grid-cols-[19rem_minmax(0,1fr)]">
+            <CharacterTemplateDirections character={character} project={project} />
+            <ActionList key={selectedOutfit.id} character={character} outfit={selectedOutfit} />
+          </div>
         </>
       )}
     </section>
@@ -271,6 +285,7 @@ function CharacterExport({
       icon={<DownloadSimple size={15} weight="bold" />}
       pill
       enableCocosExport
+      layout="menu"
       className={ASSET_ACTION_SECONDARY}
     />
   )
@@ -278,50 +293,57 @@ function CharacterExport({
 
 function CharacterTemplateDirections({
   character,
-  movement,
+  project,
 }: {
   character: Character
-  movement: Project['directionalMovement']
+  project: Project
 }) {
   const name = characterName(character)
   const directionalTemplates = resolvedCharacterTemplates(character.templates)
   if (directionalTemplates.length === 0) return null
+  const movement = project.directionalMovement
   const layout = movement === 'single' ? null : getDirectionGridLayout(movement)
   const templatesByDirection = new Map(
     directionalTemplates.map((template) => [template.direction, template]),
   )
   const cells = layout?.cells ?? directionalTemplates.map((template) => template.direction)
-  const columnClass =
-    layout?.columns === 3
-      ? 'grid-cols-3'
-      : layout?.columns === 2
-        ? 'grid-cols-2'
-        : 'grid-cols-2 sm:grid-cols-4 lg:grid-cols-8'
+  const expected = getDirectionProfile(movement).logicalDirections
+  const missing = expected.filter((direction) => !templatesByDirection.has(direction))
+
   return (
-    <section aria-label="角色母版方向" className={`mt-4 grid ${columnClass} gap-2`}>
-      {cells.map((direction, index) => {
-        if (!direction) {
-          return <div key={`empty-${index}`} aria-label="八向宫格中心留空" />
-        }
-        const template = templatesByDirection.get(direction)
-        if (!template) {
+    <section aria-label="角色母版方向" className="min-w-0">
+      <h3 className={SECTION_LABEL}>角色母版</h3>
+      {/*
+       * 方位盘只靠格子自己的位置说话:盘面内不再画格线,空位就是空的,
+       * 方位标签压在格角而不是各挂一条 caption。
+       */}
+      <div
+        data-direction-grid
+        className={`mt-2 grid w-fit gap-1.5 ${
+          layout === null ? 'grid-cols-[repeat(auto-fill,6rem)]' : 'grid-cols-[repeat(3,6rem)]'
+        }`}
+      >
+        {cells.map((direction, index) => {
+          if (!direction) return <div key={`empty-${index}`} aria-hidden="true" />
+          const template = templatesByDirection.get(direction)
+          if (!template) {
+            return (
+              <div
+                key={direction}
+                role="status"
+                aria-label={`${DIRECTION_LABELS[direction]}方向角色母版缺失`}
+                className="relative grid aspect-square place-items-center rounded-app-control bg-app-surface-muted text-[0.65rem] text-app-muted"
+              >
+                <span className={DIRECTION_TAG}>{DIRECTION_LABELS[direction]}</span>
+                缺失
+              </div>
+            )
+          }
           return (
-            <div
-              key={direction}
-              role="status"
-              aria-label={`${DIRECTION_LABELS[direction]}方向角色母版缺失`}
-              className="grid aspect-square place-items-center rounded-xl border border-dashed border-app-line bg-app-surface-muted text-xs text-app-muted"
+            <figure
+              key={template.direction}
+              className="relative aspect-square rounded-app-control bg-app-surface-muted p-1.5"
             >
-              {DIRECTION_LABELS[direction]}方向缺失
-            </div>
-          )
-        }
-        return (
-          <figure
-            key={template.direction}
-            className="overflow-hidden rounded-xl border border-app-line bg-app-surface-raised"
-          >
-            <div className="aspect-square bg-app-surface-muted p-2">
               <img
                 src={template.imageUrl}
                 alt={`${name}${DIRECTION_LABELS[template.direction]}方向母版`}
@@ -330,13 +352,26 @@ function CharacterTemplateDirections({
                 fetchPriority={index === 0 ? 'high' : 'auto'}
                 className={`h-full w-full object-contain [image-rendering:pixelated] ${template.mirrorX ? '-scale-x-100' : ''}`}
               />
-            </div>
-            <figcaption className="border-t border-app-line px-2 py-1.5 text-center text-[0.68rem] font-semibold text-app-muted">
-              {DIRECTION_LABELS[template.direction]}
-            </figcaption>
-          </figure>
-        )
-      })}
+              <figcaption className={DIRECTION_TAG}>
+                {DIRECTION_LABELS[template.direction]}
+              </figcaption>
+            </figure>
+          )
+        })}
+      </div>
+
+      <p className="mt-4 text-xs text-app-muted">
+        {[
+          CHARACTER_PERSPECTIVE[project.perspective],
+          `${project.spriteSize.width} × ${project.spriteSize.height}`,
+          ART_STYLE[project.gameStyle],
+        ].join(' · ')}
+      </p>
+      {missing.length > 0 ? (
+        <p className="mt-1.5 text-xs text-app-danger">
+          缺 {missing.map((direction) => DIRECTION_LABELS[direction]).join('、')} 方向母版
+        </p>
+      ) : null}
     </section>
   )
 }
@@ -360,8 +395,9 @@ function ActionList({ character, outfit }: { character: Character; outfit: Outfi
   const workflowEditorPath = `/workflow-editor/${encodeURIComponent(character.workflowRunId)}`
 
   return (
-    <section aria-label="角色动作" className="mt-3">
-      <div className="flex justify-end">
+    <section aria-label="角色动作" className="min-w-0">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h3 className={SECTION_LABEL}>动作</h3>
         <div className="flex items-center gap-3">
           <span className="text-[0.7rem] text-app-faint">点击卡片展开完整帧</span>
           <button
@@ -467,7 +503,7 @@ function ActionList({ character, outfit }: { character: Character; outfit: Outfi
                 <article
                   key={action.id}
                   aria-label={`动作 ${action.name}`}
-                  className={`group relative shrink-0 overflow-hidden rounded-[1.35rem] border-[1.5px] bg-app-surface-muted transition-[width,transform,margin,border-color] duration-500 ease-[cubic-bezier(.2,.9,.25,1)] motion-reduce:transition-none ${rendersFramePanel ? 'grid grid-cols-1 sm:grid-cols-[11rem_minmax(0,1fr)] lg:grid-cols-[13rem_minmax(0,1fr)]' : ''} ${expanded ? 'order-first w-full -translate-y-1 rotate-0 border-app-accent' : `w-44 border-app-line hover:border-app-line-strong lg:w-52 ${selectedAction ? 'order-last' : ''} ${stackIndex > 0 ? '-ml-4 lg:-ml-8' : ''} ${actionIndex % 2 ? 'translate-y-1 rotate-[1.2deg]' : 'rotate-[-1.2deg]'}`}`}
+                  className={`group relative shrink-0 overflow-hidden rounded-[1.35rem] border bg-app-surface-muted transition-[width,transform,margin,border-color] duration-500 ease-[cubic-bezier(.2,.9,.25,1)] motion-reduce:transition-none ${rendersFramePanel ? 'grid grid-cols-1 sm:grid-cols-[11rem_minmax(0,1fr)] lg:grid-cols-[13rem_minmax(0,1fr)]' : ''} ${expanded ? 'order-first w-full -translate-y-1 rotate-0 border-app-accent' : `w-44 border-app-line hover:border-app-line-strong lg:w-52 ${selectedAction ? 'order-last' : ''} ${stackIndex > 0 ? '-ml-4 lg:-ml-8' : ''} ${actionIndex % 2 ? 'translate-y-1 rotate-[1.2deg]' : 'rotate-[-1.2deg]'}`}`}
                   style={{ zIndex: expanded ? displayedActions.length + 1 : actionIndex + 1 }}
                 >
                   <button