doc：产品说明书1

packages/design-core/docs/产品说明书.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 隐藏当前活动栏