恢复 UI 编辑器左侧调试按钮

恢复检查前置数据、绑定组件、合并 UI 树、识别 UI 结构和识别参考图语义按钮

在左侧输入面板显示对应操作状态
This commit is contained in:
2026-08-18 11:53:07 +08:00
parent 0b2c08472c
commit fa24335791
@@ -1,4 +1,4 @@
import { Image as ImageIcon, Plus } from 'lucide-react'; import { Image as ImageIcon, Plus, ScanSearch } from 'lucide-react';
import type { UiEditorPageController } from '../useUiEditorPage'; import type { UiEditorPageController } from '../useUiEditorPage';
import { ImportOverview } from './ImportOverview'; import { ImportOverview } from './ImportOverview';
@@ -26,6 +26,75 @@ export function InputSidebar({
return ( return (
<aside className="min-h-0 overflow-y-auto border-r border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) p-3"> <aside className="min-h-0 overflow-y-auto border-r border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) p-3">
<div className="mb-3 grid gap-2">
<button
type="button"
className="inline-flex items-center gap-1.5 rounded-lg bg-orange-500 px-3 py-2 text-left text-xs font-semibold text-white"
onClick={controller.checkPrerequisites}
>
<ScanSearch size={14} />
</button>
<button
type="button"
className="rounded-lg bg-emerald-600 px-3 py-2 text-left text-xs font-semibold text-white disabled:cursor-wait disabled:opacity-60"
onClick={() => void controller.bindComponents()}
disabled={controller.isBinding || controller.editor.isLocked}
title="调试:绑定组件"
>
{controller.isBinding ? '组件绑定中…' : '绑定组件'}
</button>
<button
type="button"
className="rounded-lg bg-violet-600 px-3 py-2 text-left text-xs font-semibold text-white disabled:cursor-wait disabled:opacity-60"
onClick={() => void controller.mergeUi()}
disabled={
controller.isMerging ||
controller.editor.isLocked ||
controller.editor.state.ui_trees.length === 0
}
title="调试:合并 UI 树"
>
{controller.isMerging ? '界面树合并中…' : '合并 UI 树'}
</button>
<button
type="button"
className="rounded-lg bg-blue-600 px-3 py-2 text-left text-xs font-semibold text-white disabled:cursor-wait disabled:opacity-60"
onClick={() => void controller.recognizeUi()}
disabled={controller.isRecognizing || controller.editor.isLocked}
title="调试:识别 UI 结构"
>
{controller.isRecognizing ? '结构识别中…' : '识别 UI 结构'}
</button>
<button
type="button"
className="rounded-lg bg-orange-500 px-3 py-2 text-left text-xs font-semibold text-white disabled:cursor-wait disabled:opacity-60"
onClick={() => void controller.suggestUiDesignSemantics()}
disabled={controller.isSuggesting || controller.editor.isLocked}
title="调试:识别参考图语义"
>
{controller.isSuggesting ? '识别中…' : '识别参考图语义'}
</button>
{controller.mergeStatus ? (
<p className="m-0 rounded-lg border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-3 py-2 text-xs">
{controller.mergeStatus}
</p>
) : null}
{controller.recognitionStatus ? (
<p className="m-0 rounded-lg border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-3 py-2 text-xs">
{controller.recognitionStatus}
</p>
) : null}
{controller.suggestionStatus ? (
<p className="m-0 rounded-lg border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-3 py-2 text-xs">
{controller.suggestionStatus}
</p>
) : null}
{controller.bindingStatus ? (
<p className="m-0 rounded-lg border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-3 py-2 text-xs">
{controller.bindingStatus}
</p>
) : null}
</div>
<section className="rounded-xl border border-(--platform-subpanel-border) bg-white/35 p-3"> <section className="rounded-xl border border-(--platform-subpanel-border) bg-white/35 p-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>