doc：Cj doc edit使用说明书文档编写

packages/design-core/docs/产品说明书.md

@@ -0,0 +1,242 @@
+# 使用说明书
+
+*Tiny-Engine插件灵活布局能力模块使用说明*
+
+## 一.功能背景
+
+TinyEngine使用插件架构，每个插件都是一个相对独立的功能，本赛题为插件提供灵活布局能力，可以实现插件在运行时，通过右键菜单控制插件显示隐藏、调整位置、插件切换左右侧显示，同时可以拖拽调整展开的插件面板宽度等。
+
+
+
+## 二.功能模块汇总
+
+1. 右侧菜单与插件面板重构；
+
+2. 全局布局重构并支持所有插件的固定面板功能；
+
+3. 支持用户拖拽自定义插件宽度；
+
+4. 支持用户拖拽移动左右侧或左侧上下菜单中插件的位置；
+
+5. 支持用户持久个性化插件配置；
+
+   - 1 插件宽度
+   - 2 固定状态
+   - 3 位置
+   - 4 显示状态
+   - 5 活动栏显示状态
+
+6. 方便的右键菜单与总布局管理；
+
+   - 1 隐藏当前插件
+
+   - 2 切换当前插件位置
+
+   - 3 管理该侧所有插件显示状态
+
+   - 4 隐藏当前活动栏
+
+
+
+## 三.右侧菜单与插件面板重构
+
+### 1.前后对比
+
+原本右侧菜单形式：
+
+![image-20241008000404727](https://pic.imgdb.cn/item/670ea307d29ded1a8c7d0ba2.png)
+
+> 右侧插件面板以tab形式固定展示属性、样式、高级三个插件。
+
+现在右侧菜单形式：
+
+![image-20241008000748977](https://pic.imgdb.cn/item/670ea341d29ded1a8c7d3587.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](https://pic.imgdb.cn/item/670ea35dd29ded1a8c7d4bbd.png)
+
+![image-20241008003835301](https://pic.imgdb.cn/item/670ea368d29ded1a8c7d53c0.png)
+
+其它：
+
+![image-20241008003928410](https://pic.imgdb.cn/item/670ea373d29ded1a8c7d5a63.png)	
+
+![image-20241008003939270](https://pic.imgdb.cn/item/670ea380d29ded1a8c7d63f7.png)
+
+![image-20241008004008348](https://pic.imgdb.cn/item/670ea38cd29ded1a8c7d6c7f.png)
+
+![image-20241008004032230](https://pic.imgdb.cn/item/670ea397d29ded1a8c7d776b.png)
+
+![image-20241008004043227](https://pic.imgdb.cn/item/670ea3a0d29ded1a8c7d7e29.png)
+
+现在所有插件均已包裹基本样式组件，支持基本固定状态切换功能（且不影响原本其他功能）：
+
+![image-20241008004235755](https://pic.imgdb.cn/item/670ea3b5d29ded1a8c7d8ff8.png)
+
+![image-20241008004301568](https://pic.imgdb.cn/item/670ea3b5d29ded1a8c7d9012.png)
+
+![image-20241008004312023](https://pic.imgdb.cn/item/670ea3b5d29ded1a8c7d902c.png)
+
+![image-20241008004331278](https://pic.imgdb.cn/item/670ea3b5d29ded1a8c7d903d.png)
+
+（这里不再全部列举）
+
+（包括右侧插件）
+
+![image-20241008004349535](https://pic.imgdb.cn/item/670ea3b5d29ded1a8c7d904e.png)
+
+
+
+### 2.使用介绍
+
+用户点击固定面板按钮，将实现该插件面板的固定状态，且显示选中样式，再次点击，将取消固定面板功能。
+
+![image-20241008004545335](https://pic.imgdb.cn/item/670ea3ecd29ded1a8c7dbc5c.png)
+
+![image-20241008004657279](https://pic.imgdb.cn/item/670ea3ecd29ded1a8c7dbc86.png)
+
+
+
+## 五.支持用户拖拽自定义插件宽度
+
+### 1.前后对比
+
+原本插件宽度：每个插件的宽度是固定的，无法根据用户需求进行调整。
+
+目前插件宽度：用户现在可以通过拖拽的方式自定义每个插件的宽度，以满足个人使用习惯和界面布局的需求。
+
+### 2.使用介绍
+
+用户在鼠标悬停于插件外边缘时，将会显示一个可拖拽的提示边框。用户可以按住鼠标左键进行拖拽，插件的宽度会随之实时变化。松开鼠标时，插件宽度的调整将会停止。此功能使得用户能够轻松调整插件布局，提高界面的灵活性和个性化体验。
+
+![image-20241016004521454](https://pic.imgdb.cn/item/670ea3fcd29ded1a8c7dc9a4.png)
+
+![image-20241016004546533](https://pic.imgdb.cn/item/670ea3fcd29ded1a8c7dc9b9.png)
+
+
+
+## 六.支持用户拖拽改变插件位置
+
+使用vue-draggable-next，实现了插件位置的灵活拖拽功能。用户可以在左侧上部、左侧下部以及右侧活动栏之间自由调整插件的位置，以满足个人需求和界面布局。
+
+### 1.前后对比
+
+原本插件宽度：每个插件的位置是固定的，用户无法进行调整。
+
+目前插件宽度：用户现在可以通过拖拽的方式自定义每个插件的位置，增强了界面的灵活性和个性化体验。
+
+### 2.使用介绍
+
+用户只需将鼠标悬停在活动栏中插件的icon区域，即可激活拖拽功能。按住鼠标左键并拖动插件到所需位置，松开鼠标后，插件将自动固定在新位置。该功能提供了直观且便捷的操作方式，使用户能够根据自己的使用习惯和需求快速调整插件布局。
+
+## 七.支持用户持久个性化插件配置
+
+### 1.支持属性
+
+- 插件宽度
+
+用户可以根据自己的需求通过拖拽自定义插件的宽度，以适应不同的屏幕尺寸和布局。
+
+- 固定状态
+
+用户能够选择将插件设置为固定状态或浮动状态。
+
+- 位置
+
+用户可以通过拖拽自定义插件在界面中的位置，包括左侧上部、左侧下部、右侧活动栏。
+
+- 显示状态
+
+用户可以选择插件以及活动栏的显示状态。
+
+- 活动栏显示状态
+
+用户可以选择活动栏的显示状态。
+
+### 2.功能介绍
+
+以上五大属性均可由用户自定义，且保存在 local storage 中进行持久化，这意味着即使用户关闭浏览器或刷新页面，下次访问时依然可以恢复到之前的个性化设置，提供无缝的使用体验。
+
+## 八.右键菜单与总布局管理
+
+### 1.效果展示
+
+![image-20241016005358564](https://pic.imgdb.cn/item/670ea3fcd29ded1a8c7dc9d7.png)
+
+![image-20241016005402788](https://pic.imgdb.cn/item/670ea3fcd29ded1a8c7dc9f0.png)
+
+![image-20241016005405634](https://pic.imgdb.cn/item/670ea3fdd29ded1a8c7dca04.png)
+
+### 2.使用介绍
+
+用户可以通过右键操作来管理插件和活动栏的显示状态：
+
+#### 右击某个具体插件
+
+右击任意插件时，将弹出右键菜单，提供以下选项：
+
+1. **隐藏当前插件**
+    该选项将使当前插件隐藏，用户可根据需要选择。
+2. **切换当前插件位置**
+    一键将当前插件位置切换至对侧的顶部，方便用户快速调整布局。
+3. **管理该侧所有插件的显示状态**
+    菜单中会显示当前侧所有插件的状态。勾选项表示该插件当前可见。用户可以通过点击相应选项来切换插件的显示状态，勾选状态将随之更新。
+4. **隐藏当前活动栏**
+   此选项将隐藏当前侧的活动栏。用户可通过左上角的布局设置进行更细致的活动栏显示状态管理。菜单中同样会显示各活动栏的显示状态，勾选项为可见状态。用户可通过点击相应选项来切换活动栏的显示状态，勾选状态也会相应更新。
+
+#### 右击活动栏的空白区域
+
+右击活动栏的空白区域时，弹出菜单提供以下选项：
+
+- **管理当前侧所有插件的显示状态**
+   用户可以快速查看和管理当前侧的所有插件显示状态，便于进行整体布局调整。
+- **隐藏当前活动栏**
+   与在插件上右击时相同，允许用户隐藏活动栏并进行显示状态管理。