优化 UI 编辑器布局和组件溢出处理
调整样式以支持更好的内容适配，包括最小宽度限制和溢出隐藏设置，确保界面在复杂布局中表现一致。
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -81,7 +81,7 @@ export function InputSidebar({
|
||||
}, [editor.state.ui_trees]);
|
||||
|
||||
return (
|
||||
<aside className="h-full min-h-0 overflow-y-auto border-r border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) p-3">
|
||||
<aside className="h-full min-h-0 min-w-0 overflow-x-hidden 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"
|
||||
|
||||
+1
-1
@@ -153,7 +153,7 @@ export function InspectorSidebar({
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="flex h-full min-h-0 flex-col overflow-y-auto border-l border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) p-4">
|
||||
<aside className="flex h-full min-h-0 min-w-0 flex-col overflow-x-hidden overflow-y-auto border-l border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Boxes size={15} />
|
||||
<h2 className="m-0 text-sm font-semibold">
|
||||
|
||||
+5
-5
@@ -202,7 +202,7 @@ function VectorInputRow({
|
||||
onCommit: (axis: Axis, value: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="grid grid-cols-[6.5rem_minmax(0,1fr)_minmax(0,1fr)] items-center gap-2">
|
||||
<div className="grid min-w-0 grid-cols-[minmax(0,5rem)_minmax(0,1fr)_minmax(0,1fr)] items-center gap-2">
|
||||
<FieldLabel label={label} hint={hint} />
|
||||
{AXIS_LABELS.map((axisLabel, axis) => (
|
||||
<ScalarInput
|
||||
@@ -390,10 +390,10 @@ export function TransformEditor({
|
||||
return (
|
||||
<section
|
||||
aria-readonly={readOnly}
|
||||
className={`w-full min-w-72.5 max-w-none overflow-visible rounded-2xl border text-(--platform-text-strong) shadow-[0_16px_40px_rgb(91_62_45/10%)] ${readOnly ? 'border-slate-300 bg-slate-100/90' : 'border-(--platform-subpanel-border) bg-(--platform-subpanel-fill)'}`}
|
||||
className={`w-full min-w-0 max-w-full overflow-visible rounded-2xl border text-(--platform-text-strong) shadow-[0_16px_40px_rgb(91_62_45/10%)] ${readOnly ? 'border-slate-300 bg-slate-100/90' : 'border-(--platform-subpanel-border) bg-(--platform-subpanel-fill)'}`}
|
||||
>
|
||||
<header className="flex items-center justify-between border-b border-(--platform-subpanel-border) px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<header className="flex min-w-0 flex-wrap items-center justify-between gap-2 border-b border-(--platform-subpanel-border) px-4 py-3">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="grid size-8 place-items-center rounded-xl bg-orange-100 text-orange-600">
|
||||
<SlidersHorizontal size={15} aria-hidden="true" />
|
||||
</span>
|
||||
@@ -465,7 +465,7 @@ export function TransformEditor({
|
||||
4 × 4
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-[3.5rem_repeat(4,minmax(0,1fr))] gap-1.5">
|
||||
<div className="grid min-w-0 grid-cols-[minmax(0,3.5rem)_repeat(4,minmax(0,1fr))] gap-1.5">
|
||||
<span />
|
||||
{COLUMN_MODES.map((column) => (
|
||||
<span
|
||||
|
||||
@@ -27,7 +27,7 @@ export function WorkflowActionCard({
|
||||
|
||||
return (
|
||||
<section className="shrink-0 border-b border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-4 py-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex min-w-0 flex-wrap items-center justify-between gap-2">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<h2 className="m-0 text-sm font-semibold">{action.label}</h2>
|
||||
{status ? (
|
||||
@@ -36,7 +36,7 @@ export function WorkflowActionCard({
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="ml-auto flex shrink-0 items-center gap-2">
|
||||
<div className="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-lg bg-orange-600 px-3 py-1.5 text-xs font-semibold text-white disabled:cursor-wait disabled:opacity-60"
|
||||
|
||||
+3
-3
@@ -271,9 +271,9 @@ export function PreviewWorkspace({
|
||||
|
||||
return (
|
||||
<section className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-(--platform-body-fill)">
|
||||
<header className="flex h-12 shrink-0 items-center justify-between border-b border-(--platform-subpanel-border) px-4">
|
||||
<header className="flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-2 border-b border-(--platform-subpanel-border) px-4 py-2">
|
||||
<h1 className="m-0 text-sm font-semibold">UI布局编辑器</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex min-w-0 flex-wrap items-center justify-end gap-2">
|
||||
<div className="flex items-center rounded-lg border border-(--platform-subpanel-border) bg-white/70 p-0.5 text-[10px]">
|
||||
<button
|
||||
type="button"
|
||||
@@ -407,7 +407,7 @@ export function PreviewWorkspace({
|
||||
</ZoomControls>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-full min-h-0 flex-1 place-items-center overflow-auto p-8">
|
||||
<div className="grid h-full min-h-0 flex-1 place-items-center overflow-x-hidden overflow-y-auto p-8">
|
||||
<div className="w-full max-w-xl rounded-2xl border border-dashed border-(--platform-subpanel-border) bg-white/35 p-10 text-center">
|
||||
<ImageIcon
|
||||
size={30}
|
||||
|
||||
@@ -117,9 +117,9 @@ export default function UiEditorPage({
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex h-full min-h-0 min-w-5xl flex-col overflow-hidden bg-(--platform-body-fill) text-(--platform-text-strong)">
|
||||
<main className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-(--platform-body-fill) text-(--platform-text-strong)">
|
||||
{resourceId ? (
|
||||
<header className="flex shrink-0 items-center justify-between border-b border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-4 py-2">
|
||||
<header className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) px-4 py-2">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-lg px-2 py-1.5 text-sm hover:bg-black/4"
|
||||
@@ -151,9 +151,9 @@ export default function UiEditorPage({
|
||||
disabled={controller.isAiRunning}
|
||||
onChange={controller.requestStepChange}
|
||||
/>
|
||||
<div className="grid h-full min-h-0 flex-1 grid-cols-[300px_minmax(360px,1fr)_400px] overflow-hidden">
|
||||
<div className="grid min-h-0 min-w-0 flex-1 grid-cols-[minmax(0,24fr)_minmax(0,44fr)_minmax(0,32fr)] overflow-hidden">
|
||||
<InputSidebar controller={controller} />
|
||||
<div className="flex h-full min-h-0 min-w-0 flex-col">
|
||||
<div className="flex min-h-0 min-w-0 flex-col overflow-hidden">
|
||||
<WorkflowActionCard controller={controller} />
|
||||
<PreviewWorkspace controller={controller} />
|
||||
</div>
|
||||
@@ -172,7 +172,7 @@ export default function UiEditorPage({
|
||||
{saveError}
|
||||
</p>
|
||||
) : null}
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<div className="mt-5 flex flex-wrap justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-lg border border-(--platform-subpanel-border) px-3 py-2 text-xs"
|
||||
@@ -220,7 +220,7 @@ export default function UiEditorPage({
|
||||
title={`进入${stepLabel(controller.pendingWorkflowStepChange?.to)}`}
|
||||
issues={controller.pendingWorkflowStepChange?.enteringIssues ?? []}
|
||||
/>
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<div className="mt-5 flex flex-wrap justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-lg border border-(--platform-subpanel-border) px-3 py-2 text-xs"
|
||||
@@ -248,7 +248,7 @@ export default function UiEditorPage({
|
||||
title="保存当前编辑结果"
|
||||
issues={controller.postCheckIssuesForSave()}
|
||||
/>
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<div className="mt-5 flex flex-wrap justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-lg border border-(--platform-subpanel-border) px-3 py-2 text-xs"
|
||||
|
||||
@@ -7161,6 +7161,12 @@
|
||||
- HTTP 传输边界：根 H5 包不得依赖 Tauri guest 插件；AGC 独立包保留 `@tauri-apps/plugin-http`。Rust 插件显式关闭默认特性，只启用 `charset`、`cookies`、`http2` 和 `rustls-tls`，避免 `reqwest/system-proxy` 通过 Cargo feature union 把画布、Provider、Runtime 与本地回环夹具统一接入 OS 自动系统代理；如未来产品要求正式客户端继承系统代理，必须按各客户端明确设计并单独完成跨平台验证。
|
||||
- 运行决策：Godot 项目提交给 Project Supervisor 时使用 `standard` Run Profile，避免触发 Web 专用 `game/index.html`、HTTP preview 与自主 Web 完成门。Godot 编辑器启动和内嵌运行预览不在本切片范围。
|
||||
|
||||
## 2026-08-18 UI 编辑器进入工作台主区域并保持三栏
|
||||
|
||||
- 布局决策：打开 UI 编辑器时复用现有 `uiEditorRoute`，将编辑器提升到项目工作台的主内容层；不再嵌在 `game-workbench-stage` 与聊天栏的并排布局中，项目工作台的 Agent dock 也不占用编辑器空间。应用壳顶部 chrome 与左侧全局导航保持现状。
|
||||
- 三栏决策：Input / Preview / Inspector 永远同时存在，使用 Tailwind `minmax(0, 24fr) / minmax(0, 44fr) / minmax(0, 32fr)` 流式压缩；不得加入 JavaScript 窗口尺寸检测、设备分支或横向滚动。窄窗口下由 `min-w-0`、换行、纵向堆叠和各面板纵向滚动保持可操作性。
|
||||
- 内部约束：编辑器内表单、Transform 网格、操作区和预览标题必须允许收缩与换行；禁止重新引入 `min-w-5xl`、固定三栏像素下限或会撑开工作区的面板最小宽度。
|
||||
|
||||
## 2026-08-18 UI Editor 左侧节点树跨界面移动
|
||||
|
||||
- 决策：左侧 UI 节点树使用 UI-only 的虚拟超级节点统一承载现有 `ui_trees` 页面根节点；超级节点和页面根节点不可拖动，普通节点可以在不同页面根节点之间移动，整个子树随节点移动并保留原 `transform`。
|
||||
|
||||
Reference in New Issue
Block a user