diff --git a/doc_workingArea/beginPaint.gif b/doc_workingArea/beginPaint.gif
new file mode 100644
index 0000000..f494a8d
Binary files /dev/null and b/doc_workingArea/beginPaint.gif differ
diff --git a/doc_workingArea/readme.md b/doc_workingArea/readme.md
new file mode 100644
index 0000000..3130bc9
--- /dev/null
+++ b/doc_workingArea/readme.md
@@ -0,0 +1,65 @@
+# 推荐使用Typora查看此文档
+
+### Angular组件中引用组件
+
+demo.component.html
+
+```html
+<app-working-area #workingArea></app-working-area>
+```
+
+demo.component.ts
+
+```tsx
+import {WorkingAreaComponent} from 'working-area/working-area.component'
+export class DemoComponent implements OnInit {
+	@ViewChild('workingArea')
+	private workingArea: WorkingAreaComponent;
+}
+```
+
+### 刷新背景图图片
+
+根据共享服务中当前选择的平面图/楼层数据，数据为null背景图会隐藏
+
+```tsx
+this.workingArea.refreshBackgroundImage();
+```
+
+### 开始绘制
+
+根据共享服务中当前选择的模板数据准备绘制图形
+
+```tsx
+this.workingArea.beginPaint();
+```
+
+![](beginPaint.gif)
+
+### 监听选中/取消选中
+
+当图标被选中/取消选中时触发
+
+```tsx
+// 监听workingArea组件选中素材事件
+this.workingArea.on("select",obj=>{
+    // 目前obj为选中的素材对象，后续会修改为选中对象共享服务中数据的id
+})
+// 监听workingArea组件取消选中素材事件
+this.workingArea.on("deselect  ",obj=>{
+    // 目前obj为取消选中的素材对象，后续会修改为选中对象共享服务中数据的id
+})
+```
+
+![](selected.gif)
+
+### 刷新工作区
+
+根据共享服务中数据绘制背景图/图标
+
+```tsx
+this.workingArea.refresh();
+```
+
+### 其他函数暂为私有，需要调用后续会封装开放并添加到文档中
+
diff --git a/doc_workingArea/selected.gif b/doc_workingArea/selected.gif
new file mode 100644
index 0000000..95e586b
Binary files /dev/null and b/doc_workingArea/selected.gif differ