From 0c0cc86fa8dddd517d5de95e1d5a370386448dde Mon Sep 17 00:00:00 2001
From: Jz0ojiang <0ojixueseno0@gmail.com>
Date: Sat, 5 Sep 2026 02:19:40 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=8F=B3=E6=A0=8F=E6=8B=86?=
 =?UTF-8?q?=E6=88=90=E5=B1=9E=E6=80=A7=E5=8C=BA=E4=B8=8E=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E4=B8=A4=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

改成 Figma 布局后旧的四个面板没有挂载点，功能在界面上不可达。
右栏上半给选中对象的属性，下半给背景/滤镜/文字/导出，
两条开发线各占一个文件，互不重叠。
---
 src/App.vue                   | 24 +++++++++++++++++++++++-
 src/components/Inspector.vue  |  3 ---
 src/components/ToolPanels.vue | 30 ++++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ToolPanels.vue

diff --git a/src/App.vue b/src/App.vue
index e3fd8a8..c5f130d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import TopBar from "./components/TopBar.vue";
 import LayersPanel from "./components/LayersPanel.vue";
 import Workspace from "./components/Workspace.vue";
 import Inspector from "./components/Inspector.vue";
+import ToolPanels from "./components/ToolPanels.vue";
 import BottomDock from "./components/BottomDock.vue";
 import SelectionMenu from "./components/SelectionMenu.vue";
 import ContextMenu from "./components/ContextMenu.vue";
@@ -32,7 +33,12 @@ useShortcuts();
       <ContextMenu />
     </div>
 
-    <Inspector class="area-right" />
+    <!-- 右栏分两层：上半是选中对象的属性（T8），下半是背景 / 滤镜 / 文字 / 导出
+         这些工具面板（T10）。分开是为了让两条开发线各占一个文件，互不干扰。 -->
+    <div class="area-right">
+      <Inspector class="right-top" />
+      <ToolPanels class="right-bottom" />
+    </div>
   </div>
 </template>
 
@@ -56,6 +62,22 @@ useShortcuts();
 }
 .area-right {
   grid-area: right;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-left: 1px solid var(--line);
+  background: var(--bg2);
+}
+
+/* 属性区按内容高度，工具面板吃掉剩下的并自己滚动。 */
+.right-top {
+  flex: 0 0 auto;
+}
+.right-bottom {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  border-top: 1px solid var(--line);
 }
 
 /* 画布区是浮层的定位上下文：选中菜单、底部胶囊、右键菜单都绝对定位在它里面。 */
diff --git a/src/components/Inspector.vue b/src/components/Inspector.vue
index 14434ff..9b4bc3c 100644
--- a/src/components/Inspector.vue
+++ b/src/components/Inspector.vue
@@ -25,9 +25,6 @@
 
 <style scoped>
 .inspector {
-  border-left: 1px solid var(--line);
-  background: var(--bg2);
-  overflow-y: auto;
   padding: 10px 0;
 }
 .inspector h2 {
diff --git a/src/components/ToolPanels.vue b/src/components/ToolPanels.vue
new file mode 100644
index 0000000..dddf4b8
--- /dev/null
+++ b/src/components/ToolPanels.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+/**
+ * 【T10 待实现 — 工具面板的重新安置】
+ *
+ * 旧版把所有东西塞在一个右侧栏里。改成 Figma 式布局之后，那四个面板
+ * （背景 / 滤镜 / 文字 / 导出与模板）需要重新安置，它们的功能都还在，
+ * 只是现在没有任何地方挂载它们——**改造之后这些功能在界面上不可达**，
+ * 这条线就是来补上的。
+ *
+ * 现有实现在 `components/panels/`：SourcePanel / FilterPanel / TextPanel /
+ * ExportPanel / CanvasPanel。逻辑是好的，验收过，**不要重写**，只搬和收。
+ */
+</script>
+
+<template>
+  <div class="tool-panels">
+    <p class="todo">T10 待实现：背景 / 滤镜 / 文字 / 导出与模板</p>
+  </div>
+</template>
+
+<style scoped>
+.tool-panels {
+  padding: 10px 0;
+}
+.todo {
+  color: var(--fg-dim);
+  margin: 0 12px;
+  line-height: 1.6;
+}
+</style>