From f5552764ec029bc02808263919d486a02cf04126 Mon Sep 17 00:00:00 2001
From: STATICHIT <2394412110@qq.com>
Date: Tue, 8 Oct 2024 00:49:22 +0800
Subject: [PATCH] =?UTF-8?q?doc=EF=BC=9A=E4=BA=A7=E5=93=81=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E=E4=B9=A61?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...01\350\257\264\346\230\216\344\271\246.md" | 196 ++++++++++++++++++
 .../docs/\346\226\207\346\241\243.md"         |   1 -
 2 files changed, 196 insertions(+), 1 deletion(-)
 create mode 100644 "packages/design-core/docs/\344\272\247\345\223\201\350\257\264\346\230\216\344\271\246.md"
 delete mode 100644 "packages/design-core/docs/\346\226\207\346\241\243.md"

diff --git "a/packages/design-core/docs/\344\272\247\345\223\201\350\257\264\346\230\216\344\271\246.md" "b/packages/design-core/docs/\344\272\247\345\223\201\350\257\264\346\230\216\344\271\246.md"
new file mode 100644
index 000000000..d5a7ad27b
--- /dev/null
+++ "b/packages/design-core/docs/\344\272\247\345\223\201\350\257\264\346\230\216\344\271\246.md"
@@ -0,0 +1,196 @@
+# 使用说明书
+
+*Tiny-Engine插件灵活布局能力模块使用说明*
+
+## 一.功能背景
+
+TinyEngine使用插件架构，每个插件都是一个相对独立的功能，本赛题为插件提供灵活布局能力，可以实现插件在运行时，通过右键菜单控制插件显示隐藏、调整位置、插件切换左右侧显示，同时可以拖拽调整展开的插件面板宽度等。
+
+
+
+## 二.功能模块汇总
+
+1. 右侧菜单与插件面板重构；
+
+2. 全局布局重构并支持所有插件的固定面板功能；
+
+3. 支持用户拖拽自定义插件宽度；
+
+4. 支持用户拖拽移动左右侧或左侧上下菜单中插件的位置；
+
+5. 支持用户持久个性化插件配置；
+
+   - 1 插件宽度
+   - 2 固定状态
+   - 3 位置
+   - 4 显示状态
+   - 5 活动栏显示状态
+
+6. 方便的右键菜单与总布局管理；
+
+   - 1 隐藏当前插件
+
+   - 2 切换当前插件位置
+
+   - 3 管理该侧所有插件显示状态
+
+   - 4 隐藏当前活动栏
+
+
+
+## 三.右侧菜单与插件面板重构
+
+### 1.前后对比
+
+原本右侧菜单形式：![image-20241008000404727](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008000404727.png)
+
+> 右侧插件面板以tab形式固定展示属性、样式、高级三个插件。
+
+现在右侧菜单形式：
+
+![image-20241008000748977](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008000748977.png)
+
+> 右侧面板采取与左侧一致的icon菜单布局方式，统一了插件的渲染方式，也为后续左右侧插件位置的灵活布局奠定了基础。
+
+### 2.使用介绍
+
+插件面板基本配置为：左上角为插件名称，右上角为固定状态按钮和关闭按钮。
+
+用户可以点击右侧icon菜单切换右侧插件的展示与隐藏。操作方式与左侧插件菜单一致。
+
+
+
+## 四.全局布局重构并支持所有插件的固定面板功能
+
+### 1.全局布局重构的原因与实现方案
+
+原有的代码逻辑仅对左侧插件中【物料】和【大纲树】插件进行了固定状态的支持，且在主要的三个板块——左侧面板、画布和右侧面板中，原有的布局模式使得右侧面板与画布并列在同一标签下，且该标签再与左侧面板形成并列关系，这种布局不利于全插件固定面板功能的实现。因此对三大板块的布局进行了全局重构，将它们分离为相互独立的模块。通过使用以下的 Flex 布局，使右侧面板也能够动态切换 `is-fixed` 样式，从而实现固定状态的转换。这样重构后，各面板之间的关系更加清晰，有助于增强整体的用户体验。
+
+`.tiny-engine-left-wrap {
+    display: flex;
+    flex-flow: row nowrap;
+    z-index: 4;
+}
+
+.tiny-engine-content-wrap {
+    display: flex;
+    max-width: 100vw;
+    flex: 1;
+    position: relative;
+}
+
+.tiny-engine-right-wrap {
+    display: flex;
+    flex-flow: row nowrap;
+    z-index: 4;
+}
+
+&.is-fixed {
+    position: relative;
+    top: 0;
+    right: 0;
+}`
+
+### 2.支持所有插件的固定面板功能
+
+首先，对包裹组件进行了重构，将所有插件组件统一包裹在此组件中，以实现一致的渲染样式以及默认按钮代码逻辑。每个插件的左上角显示插件名称，右上角则包含固定状态按钮和关闭按钮。对于有其他需求的插件，可以通过插槽自定义添加额外的按钮，从而灵活满足不同的功能需求。
+
+### 2.前后对比
+
+原本支持固定状态切换的插件（仅物料和大纲树）：
+
+![image-20241008003823676](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008003823676.png)
+
+![image-20241008003835301](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008003835301.png)
+
+其它：
+
+![image-20241008003928410](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008003928410.png)	
+
+![image-20241008003939270](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008003939270.png)
+
+![image-20241008004008348](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004008348.png)
+
+![image-20241008004032230](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004032230.png)
+
+![image-20241008004043227](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004043227.png)
+
+现在所有插件均已包裹基本样式组件，支持基本固定状态切换功能（且不影响原本其他功能）：
+
+![image-20241008004235755](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004235755.png)
+
+![image-20241008004301568](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004301568.png)
+
+![image-20241008004312023](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004312023.png)
+
+![image-20241008004331278](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004331278.png)
+
+（这里不再全部列举）
+
+（包括右侧插件）
+
+![image-20241008004349535](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004349535.png)
+
+
+
+### 2.使用介绍
+
+用户点击固定面板按钮，将实现该插件面板的固定状态，且显示选中样式，再次点击，将取消固定面板功能。
+
+![image-20241008004545335](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004545335.png)
+
+![image-20241008004657279](C:\Users\STATICHIT\AppData\Roaming\Typora\typora-user-images\image-20241008004657279.png)
+
+
+
+## 五.支持用户拖拽自定义插件宽度
+
+
+
+### 1.前后对比
+
+### 2.使用介绍
+
+
+
+## 六.支持用户拖拽改变插件位置
+
+
+
+### 1.前后对比
+
+### 2.使用介绍
+
+
+
+## 七.支持用户持久个性化插件配置
+
+
+
+### 1.支持属性
+
+- 插件宽度
+- 固定状态
+- 位置
+- 显示状态
+- 活动栏显示状态
+
+### 2.功能介绍
+
+
+
+## 八.右键菜单与总布局管理
+
+
+
+### 1.前后对比
+
+### 2.使用介绍
+
+- 1 隐藏当前插件
+
+- 2 切换当前插件位置
+
+- 3 管理该侧所有插件显示状态
+
+- 4 隐藏当前活动栏
\ No newline at end of file
diff --git "a/packages/design-core/docs/\346\226\207\346\241\243.md" "b/packages/design-core/docs/\346\226\207\346\241\243.md"
deleted file mode 100644
index 7850a8f3d..000000000
--- "a/packages/design-core/docs/\346\226\207\346\241\243.md"
+++ /dev/null
@@ -1 +0,0 @@
-使用说明书
\ No newline at end of file