diff --git a/bj-rtss-message b/bj-rtss-message
index da65562..9945a20 160000
--- a/bj-rtss-message
+++ b/bj-rtss-message
@@ -1 +1 @@
-Subproject commit da65562e424bfc69981acba945214e17974e588d
+Subproject commit 9945a2001adc1d7ae83b8de722c33afd7cd6f1d7
diff --git a/scripts/proto.cjs b/scripts/proto.cjs
index 90b41ad..7cdf9e9 100644
--- a/scripts/proto.cjs
+++ b/scripts/proto.cjs
@@ -66,7 +66,7 @@ function main() {
     recursiveGenerate(f, [], prepareCmds);
   });
 
-  console.log(prepareCmds);
+  // console.log(prepareCmds);
 
   exec(
     prepareCmds.join(' && '),
diff --git a/src/components/draw-app/IbpDrawProperties.vue b/src/components/draw-app/IbpDrawProperties.vue
new file mode 100644
index 0000000..a0ba3ca
--- /dev/null
+++ b/src/components/draw-app/IbpDrawProperties.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useIBPDrawStore } from 'src/stores/ibp-draw-store';
+import CanvasIBPProperty from './properties/CanvasIBPProperty.vue';
+import IbpButtonProperty from './properties/IbpButtonProperty.vue';
+import { IBPButton } from 'src/graphics/IBPButton/IBPButton';
+
+const ibpDrawStore = useIBPDrawStore();
+</script>
+
+<template>
+  <div v-if="ibpDrawStore.selectedGraphics !== null">
+    <QCard flat>
+      <QCardSection>
+        <div class="text-h6">{{ ibpDrawStore.selectedObjName }}属性</div>
+      </QCardSection>
+      <QSeparator inset />
+      <template v-if="ibpDrawStore.selectedGraphics.length === 0">
+        <QCardSection>
+          <CanvasIBPProperty></CanvasIBPProperty>
+        </QCardSection>
+      </template>
+      <template v-else-if="ibpDrawStore.selectedGraphics.length === 1">
+        <QCardSection>
+          <IbpButtonProperty
+            v-if="ibpDrawStore.selectedGraphicType === IBPButton.Type"
+          />
+        </QCardSection>
+      </template>
+    </QCard>
+  </div>
+</template>
diff --git a/src/components/draw-app/properties/CanvasIBPProperty.vue b/src/components/draw-app/properties/CanvasIBPProperty.vue
new file mode 100644
index 0000000..0a90481
--- /dev/null
+++ b/src/components/draw-app/properties/CanvasIBPProperty.vue
@@ -0,0 +1,80 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      v-model.number="canvas.width"
+      @blur="onUpdate"
+      label="画布宽 *"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
+    />
+
+    <q-input
+      outlined
+      type="number"
+      v-model.number="canvas.height"
+      @blur="onUpdate"
+      label="画布高 *"
+      lazy-rules
+      :rules="[(val) => val > 0 || '画布高必须大于0']"
+    />
+
+    <q-input
+      outlined
+      v-model="canvas.backgroundColor"
+      @blur="onUpdate"
+      label="画布背景色 *"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '画布背景色必须设置']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              :model-value="canvas.backgroundColor"
+              @change="
+                (val) => {
+                  canvas.backgroundColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useIBPDrawStore } from 'src/stores/ibp-draw-store';
+import { onMounted, onUnmounted, reactive } from 'vue';
+const ibpDrawStore = useIBPDrawStore();
+
+const canvas = reactive({
+  width: 1920,
+  height: 1080,
+  backgroundColor: '#ffffff',
+});
+
+onMounted(() => {
+  // console.log('画布属性表单mounted');
+  const jc = ibpDrawStore.getJlCanvas();
+  canvas.width = jc.properties.width;
+  canvas.height = jc.properties.height;
+  canvas.backgroundColor = jc.properties.backgroundColor;
+});
+
+onUnmounted(() => {
+  // console.log('画布属性表单unmounted');
+});
+
+function onUpdate() {
+  // console.log('画布属性更新');
+  const app = ibpDrawStore.getDrawApp();
+  app.updateCanvasAndRecord({
+    ...canvas,
+    viewportTransform: app.canvas.properties.viewportTransform,
+  });
+}
+</script>
diff --git a/src/components/draw-app/properties/IbpButtonProperty.vue b/src/components/draw-app/properties/IbpButtonProperty.vue
new file mode 100644
index 0000000..55fde33
--- /dev/null
+++ b/src/components/draw-app/properties/IbpButtonProperty.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { IBPButtonData } from 'src/drawApp/graphics/IBPButtonInteraction';
+import { ibpGraphicData } from 'src/protos/ibpGraphics';
+import { useIBPDrawStore } from 'src/stores/ibp-draw-store';
+
+const { data: ibpButtonModel, onUpdate } = useFormData(
+  new IBPButtonData(),
+  useIBPDrawStore().getDrawApp()
+);
+
+const { IbpButtonColor } = ibpGraphicData.IBPButton;
+const colorOptions = [
+  { label: '灰色', value: IbpButtonColor.gray },
+  { label: '红色', value: IbpButtonColor.red },
+  { label: '黄色', value: IbpButtonColor.yellow },
+  { label: '蓝色', value: IbpButtonColor.blue },
+  { label: '绿色', value: IbpButtonColor.green },
+];
+</script>
+
+<template>
+  <QForm>
+    <QInput
+      outlined
+      readonly
+      v-model="ibpButtonModel.id"
+      label="id"
+      @blur="onUpdate"
+    />
+    <QInput
+      class="q-mt-sm"
+      outlined
+      v-model="ibpButtonModel.code"
+      @blur="onUpdate"
+      label="名称"
+    />
+    <QSelect
+      class="q-mt-sm"
+      emitValue
+      mapOptions
+      outlined
+      v-model="ibpButtonModel.color"
+      label="颜色"
+      :options="colorOptions"
+      @popupHide="onUpdate"
+    />
+  </QForm>
+</template>
+
+<style scoped></style>
diff --git a/src/drawApp/graphics/IBPButtonInteraction.ts b/src/drawApp/graphics/IBPButtonInteraction.ts
new file mode 100644
index 0000000..bdaa970
--- /dev/null
+++ b/src/drawApp/graphics/IBPButtonInteraction.ts
@@ -0,0 +1,48 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from './GraphicDataBase';
+import { IBPButton, IIBPButtonData } from 'src/graphics/IBPButton/IBPButton';
+import { ibpGraphicData } from 'src/protos/ibpGraphics';
+
+export class IBPButtonData extends GraphicDataBase implements IIBPButtonData {
+  constructor(data?: ibpGraphicData.IBPButton) {
+    let ibpButton;
+    if (data) {
+      ibpButton = data;
+    } else {
+      ibpButton = new ibpGraphicData.IBPButton({
+        common: GraphicDataBase.defaultCommonInfo(IBPButton.Type),
+      });
+    }
+    super(ibpButton);
+  }
+  public get data() {
+    return this.getData<ibpGraphicData.IBPButton>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get color(): ibpGraphicData.IBPButton.IbpButtonColor {
+    return this.data.color;
+  }
+  set color(v: ibpGraphicData.IBPButton.IbpButtonColor) {
+    this.data.color = v;
+  }
+  get isSelfReset(): boolean {
+    return this.data.isSelfReset;
+  }
+  set isSelfReset(v: boolean) {
+    this.data.isSelfReset = v;
+  }
+  clone() {
+    return new IBPButtonData(this.data.cloneMessage());
+  }
+  copyFrom(data: IBPButtonData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: IBPButtonData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
diff --git a/src/drawApp/ibpDrawApp.ts b/src/drawApp/ibpDrawApp.ts
new file mode 100644
index 0000000..f046072
--- /dev/null
+++ b/src/drawApp/ibpDrawApp.ts
@@ -0,0 +1,94 @@
+import { fromUint8Array, toUint8Array } from 'js-base64';
+import { getDraft, saveDraft } from 'src/api/DraftApi';
+import { GraphicData, IDrawApp, newDrawApp } from 'src/jl-graphic';
+import { ibpGraphicData } from 'src/protos/ibpGraphics';
+import { useIBPDrawStore } from 'src/stores/ibp-draw-store';
+import { IBPButtonData } from './graphics/IBPButtonInteraction';
+import { errorNotify, successNotify } from 'src/utils/CommonNotify';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { toStorageTransform } from './graphics/GraphicDataBase';
+import {
+  IBPButton,
+  IBPButtonTemplate,
+  IIBPButtonData,
+} from 'src/graphics/IBPButton/IBPButton';
+import { IBPButtonDrawAssistant } from 'src/graphics/IBPButton/IBPButtonDrawAssistant';
+
+let drawApp: IDrawApp | null = null;
+
+export function getIBPDrawApp(): IDrawApp | null {
+  return drawApp;
+}
+
+export function initIBPDrawApp() {
+  drawApp = newDrawApp({
+    dataLoader: IBPDrawDataLoader,
+  });
+
+  new IBPButtonDrawAssistant(
+    drawApp,
+    new IBPButtonTemplate(new IBPButtonData())
+  );
+
+  return drawApp;
+}
+
+export function saveIBPDrawToServer(app: IDrawApp) {
+  const base64 = saveIBPDrawDatas(app);
+  const ibpDrawStore = useIBPDrawStore();
+  const id = ibpDrawStore.draftId;
+  if (!id) {
+    return;
+  }
+  saveDraft(id as number, { proto: base64 })
+    .then(() => {
+      successNotify('保存数据成功！');
+    })
+    .catch((err) => {
+      errorNotify(err.message, err);
+    });
+}
+
+function saveIBPDrawDatas(app: IDrawApp) {
+  const storage = new ibpGraphicData.IBPGraphicStorage();
+  const canvasData = app.canvas.saveData();
+  storage.canvas = new graphicData.Canvas({
+    ...canvasData,
+    viewportTransform: toStorageTransform(canvasData.viewportTransform),
+  });
+
+  const graphics = app.queryStore.getAllGraphics();
+  graphics.forEach((g) => {
+    if (g instanceof IBPButton) {
+      storage.ibpButtons.push(g.saveData<IBPButtonData>().data);
+    }
+  });
+  const base64 = fromUint8Array(storage.serialize());
+  return base64;
+}
+
+async function IBPDrawDataLoader() {
+  const IBPDrawStore = useIBPDrawStore();
+  const id = IBPDrawStore.draftId;
+  if (!id) {
+    throw new Error('获取数据异常：未获取到草稿地图ID');
+  }
+  const { proto: base64 } = await getDraft(id);
+  if (base64) {
+    const storage = ibpGraphicData.IBPGraphicStorage.deserialize(
+      toUint8Array(base64)
+    );
+    const datas: GraphicData[] = [];
+    storage.ibpButtons.forEach((ibpButton) => {
+      datas.push(new IBPButtonData(ibpButton));
+    });
+    return {
+      canvasProperty: storage.canvas,
+      datas: datas,
+    };
+  } else {
+    return Promise.resolve({
+      datas: [],
+    });
+  }
+}
diff --git a/src/drawApp/pslApp.ts b/src/drawApp/pslApp.ts
index 6dfac7b..369dc73 100644
--- a/src/drawApp/pslApp.ts
+++ b/src/drawApp/pslApp.ts
@@ -215,10 +215,10 @@ export async function loadPslDrawDatas(): Promise<IGraphicStorage> {
     });
     console.log(datas);
     console.log(storage);
-    return Promise.resolve({
+    return {
       canvasProperty: storage.canvas,
       datas: datas,
-    });
+    };
   } else {
     return Promise.resolve({
       datas: [],
diff --git a/src/graphics/IBPButton/IBPButton.ts b/src/graphics/IBPButton/IBPButton.ts
new file mode 100644
index 0000000..d91a1a9
--- /dev/null
+++ b/src/graphics/IBPButton/IBPButton.ts
@@ -0,0 +1,144 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'src/jl-graphic';
+import { ibpGraphicData } from 'src/protos/ibpGraphics';
+import IPBButtonAssets from './ibpButton.png';
+import IBPButtonJSON from './ibpButton.json';
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+
+export interface IIBPButtonData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+  get color(): ibpGraphicData.IBPButton.IbpButtonColor;
+  set color(v: ibpGraphicData.IBPButton.IbpButtonColor);
+  get isSelfReset(): boolean;
+  set isSelfReset(v: boolean);
+}
+
+export class IBPButton extends JlGraphic {
+  static Type = 'IBPButton';
+  textures: IBPButtonTextures;
+  sprite: Sprite;
+
+  constructor(textures: IBPButtonTextures) {
+    super(IBPButton.Type);
+    this.textures = textures;
+    this.sprite = new Sprite();
+    this.sprite.texture = this.textures.get(
+      ibpGraphicData.IBPButton.IbpButtonColor.gray,
+      false,
+      false
+    );
+    this.sprite.anchor.set(0.5);
+    this.addChild(this.sprite);
+  }
+  get datas() {
+    return this.getDatas<IIBPButtonData>();
+  }
+
+  doRepaint(): void {
+    console.log(1);
+    this.sprite.texture = this.textures.get(this.datas.color, false, false);
+  }
+}
+
+interface IBPButtonTextures {
+  get(
+    color: ibpGraphicData.IBPButton.IbpButtonColor,
+    isPressed: boolean,
+    isOn: boolean
+  ): Texture;
+  textures: {
+    [key in ibpGraphicData.IBPButton.IbpButtonColor]: {
+      pressed: {
+        on: Texture;
+        off: Texture;
+      };
+      unPressed: {
+        on: Texture;
+        off: Texture;
+      };
+    };
+  };
+}
+
+export class IBPButtonTemplate extends JlGraphicTemplate<IBPButton> {
+  static Textures: IBPButtonTextures | null = null;
+  constructor(dataTemplate: IIBPButtonData) {
+    super(IBPButton.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): IBPButton {
+    if (IBPButtonTemplate.Textures === null) {
+      throw new Error('IBPButtonTemplate.Textures is null');
+    }
+    const g = new IBPButton(IBPButtonTemplate.Textures);
+    return g;
+  }
+  async loadAssets(): Promise<IBPButtonTextures> {
+    //FIXME 多次加载问题(异步)
+    if (IBPButtonTemplate.Textures === null) {
+      const texture = await Assets.load(IPBButtonAssets);
+      const IBPButtonSheet = new Spritesheet(texture, IBPButtonJSON);
+      const result = await IBPButtonSheet.parse();
+      IBPButtonTemplate.Textures = {
+        get(color, isPressed, isOn) {
+          return this.textures[color][isPressed ? 'pressed' : 'unPressed'][
+            isOn ? 'on' : 'off'
+          ];
+        },
+        textures: {
+          [ibpGraphicData.IBPButton.IbpButtonColor.red]: {
+            pressed: {
+              on: result['red_button_pressed_on.png'],
+              off: result['red_button_pressed.png'],
+            },
+            unPressed: {
+              on: result['red_button_on.png'],
+              off: result['red_button.png'],
+            },
+          },
+          [ibpGraphicData.IBPButton.IbpButtonColor.green]: {
+            pressed: {
+              on: result['green_button_pressed_on.png'],
+              off: result['green_button_pressed.png'],
+            },
+            unPressed: {
+              on: result['green_button_on.png'],
+              off: result['green_button.png'],
+            },
+          },
+          [ibpGraphicData.IBPButton.IbpButtonColor.blue]: {
+            pressed: {
+              on: result['blue_button_pressed_on.png'],
+              off: result['blue_button_pressed.png'],
+            },
+            unPressed: {
+              on: result['blue_button_on.png'],
+              off: result['blue_button.png'],
+            },
+          },
+          [ibpGraphicData.IBPButton.IbpButtonColor.yellow]: {
+            pressed: {
+              on: result['yellow_button_pressed_on.png'],
+              off: result['yellow_button_pressed.png'],
+            },
+            unPressed: {
+              on: result['yellow_button_on.png'],
+              off: result['yellow_button.png'],
+            },
+          },
+          [ibpGraphicData.IBPButton.IbpButtonColor.gray]: {
+            pressed: {
+              on: result['gray_button_pressed_on.png'],
+              off: result['gray_button_pressed.png'],
+            },
+            unPressed: {
+              on: result['gray_button_on.png'],
+              off: result['gray_button.png'],
+            },
+          },
+        },
+      };
+    }
+    return Promise.resolve(IBPButtonTemplate.Textures);
+  }
+}
diff --git a/src/graphics/IBPButton/IBPButtonDrawAssistant.ts b/src/graphics/IBPButton/IBPButtonDrawAssistant.ts
new file mode 100644
index 0000000..64b3d73
--- /dev/null
+++ b/src/graphics/IBPButton/IBPButtonDrawAssistant.ts
@@ -0,0 +1,39 @@
+import { GraphicDrawAssistant, IDrawApp } from 'src/jl-graphic';
+import { IBPButton, IBPButtonTemplate, IIBPButtonData } from './IBPButton';
+import { FederatedMouseEvent, Point } from 'pixi.js';
+
+export class IBPButtonDrawAssistant extends GraphicDrawAssistant<
+  IBPButtonTemplate,
+  IIBPButtonData
+> {
+  _ibpButton: IBPButton | null = null;
+  constructor(app: IDrawApp, template: IBPButtonTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../../drawIcon.svg#icon-psl-button',
+      'IBP按钮'
+    );
+  }
+  get ibpButton(): IBPButton {
+    if (!this._ibpButton) {
+      this._ibpButton = this.graphicTemplate.new();
+      this.container.addChild(this.ibpButton);
+    }
+    return this._ibpButton;
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.ibpButton.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+  onEsc(): void {
+    this.finish();
+  }
+  redraw(cp: Point): void {
+    this.ibpButton.position.copyFrom(cp);
+  }
+  prepareData(data: IIBPButtonData): boolean {
+    data.transform = this.ibpButton.saveTransform();
+    return true;
+  }
+}
diff --git a/src/graphics/IBPButton/ibpButton.json b/src/graphics/IBPButton/ibpButton.json
new file mode 100644
index 0000000..db18ca7
--- /dev/null
+++ b/src/graphics/IBPButton/ibpButton.json
@@ -0,0 +1,172 @@
+{"frames": {
+
+"blue_button.png":
+{
+	"frame": {"x":0,"y":0,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"blue_button_on.png":
+{
+	"frame": {"x":70,"y":0,"w":70,"h":81},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":81},
+	"sourceSize": {"w":70,"h":81}
+},
+"blue_button_pressed.png":
+{
+	"frame": {"x":140,"y":0,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"blue_button_pressed_on.png":
+{
+	"frame": {"x":210,"y":0,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"gray_button.png":
+{
+	"frame": {"x":280,"y":0,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"gray_button_on.png":
+{
+	"frame": {"x":350,"y":0,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"gray_button_pressed.png":
+{
+	"frame": {"x":420,"y":0,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"gray_button_pressed_on.png":
+{
+	"frame": {"x":0,"y":81,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"green_button.png":
+{
+	"frame": {"x":70,"y":81,"w":70,"h":81},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":81},
+	"sourceSize": {"w":70,"h":81}
+},
+"green_button_on.png":
+{
+	"frame": {"x":140,"y":81,"w":70,"h":79},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":79},
+	"sourceSize": {"w":70,"h":79}
+},
+"green_button_pressed.png":
+{
+	"frame": {"x":210,"y":81,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"green_button_pressed_on.png":
+{
+	"frame": {"x":280,"y":81,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"red_button.png":
+{
+	"frame": {"x":350,"y":81,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"red_button_on.png":
+{
+	"frame": {"x":420,"y":81,"w":70,"h":78},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":78},
+	"sourceSize": {"w":70,"h":78}
+},
+"red_button_pressed.png":
+{
+	"frame": {"x":0,"y":162,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"red_button_pressed_on.png":
+{
+	"frame": {"x":70,"y":162,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"yellow_button.png":
+{
+	"frame": {"x":140,"y":162,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"yellow_button_on.png":
+{
+	"frame": {"x":210,"y":162,"w":70,"h":81},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":81},
+	"sourceSize": {"w":70,"h":81}
+},
+"yellow_button_pressed.png":
+{
+	"frame": {"x":280,"y":162,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+},
+"yellow_button_pressed_on.png":
+{
+	"frame": {"x":350,"y":162,"w":70,"h":80},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":70,"h":80},
+	"sourceSize": {"w":70,"h":80}
+}},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.1",
+	"image": "ibpButton.png",
+	"format": "RGBA8888",
+	"size": {"w":490,"h":243},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:64855b0739789b4990f3f5a6ebb380e4:2e868bac59d1dfa40064527e00c49c2d:d64169bde96e532a4833ca4e2184b4e6$"
+}
+}
diff --git a/src/graphics/IBPButton/ibpButton.png b/src/graphics/IBPButton/ibpButton.png
new file mode 100644
index 0000000..9c2eee1
Binary files /dev/null and b/src/graphics/IBPButton/ibpButton.png differ
diff --git a/src/graphics/train/Train.ts b/src/graphics/train/Train.ts
index 0789ad3..3d9df6f 100644
--- a/src/graphics/train/Train.ts
+++ b/src/graphics/train/Train.ts
@@ -144,7 +144,12 @@ export class TrainHead extends Container {
       -marginX - pauseW / 2 - codeWidth / 2,
       codeHeight / 2,
     ];
-    if (states.runDirection) {
+    // 道岔时运行上下行决定箭头方向
+    // 区段时是否从A到B决定箭头方向
+    if (
+      (states.devicePort && states.runDirection) ||
+      (!states.devicePort && states.pointTo)
+    ) {
       const aP: Array<number> = [];
       arrowPoint.forEach((item, index) => {
         if (index % 2 == 1) {
@@ -155,7 +160,10 @@ export class TrainHead extends Container {
       });
       arrowPoint = aP;
     }
-    if (states.headDirection) {
+    if (
+      (states.devicePort && states.headDirection) ||
+      (!states.devicePort && states.pointTo)
+    ) {
       const pP: Array<number> = [];
       pausePoint.forEach((item, index) => {
         if (index % 2 == 1) {
diff --git a/src/layouts/IBPDrawLayout.vue b/src/layouts/IBPDrawLayout.vue
new file mode 100644
index 0000000..4ed2e19
--- /dev/null
+++ b/src/layouts/IBPDrawLayout.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import { useIBPDrawStore } from '../stores/ibp-draw-store';
+import { useRoute, useRouter } from 'vue-router';
+import { IBPButton } from 'src/graphics/IBPButton/IBPButton';
+import { getIBPDrawApp } from 'src/drawApp/ibpDrawApp';
+import IbpDrawProperties from 'src/components/draw-app/IbpDrawProperties.vue';
+
+const ibpDrawStore = useIBPDrawStore();
+const route = useRoute();
+const router = useRouter();
+
+const canvasWidth = ref(0);
+const canvasHeight = ref(0);
+const headerHeight = ref(0);
+const leftWidth = ref(0);
+const rightWidth = ref(0);
+function onHeaderResize(size: { height: number; width: number }) {
+  headerHeight.value = size.height;
+  onResize();
+}
+function onRightResize(size: { height: number; width: number }) {
+  rightWidth.value = size.width;
+  onResize();
+}
+const leftDrawerOpen = ref(false);
+const rightDrawerOpen = ref(false);
+function toggleRightDrawer() {
+  rightDrawerOpen.value = !rightDrawerOpen.value;
+  onResize();
+}
+
+const selectUtil = ref('');
+const utilsOption: ControlItem[] = reactive([]);
+const drawSelect = (item: string) => {
+  getIBPDrawApp()?.interactionPlugin(item).resume();
+};
+class ControlItem {
+  value: string;
+  slot: string;
+  icon: string;
+  tip: string;
+  show = true;
+
+  constructor(value: string, icon: string, tip: string, show?: boolean) {
+    this.value = value;
+    this.slot = value;
+    this.icon = icon;
+    this.tip = tip;
+    if (show != undefined) {
+      this.show = show;
+    }
+  }
+}
+
+onMounted(() => {
+  const dom = document.getElementById('draw-app-container');
+  if (dom) {
+    ibpDrawStore.setDraftId(Number(route.params.id));
+    const drawApp = ibpDrawStore.initDrawApp();
+    drawApp.bindDom(dom);
+    drawApp.reload();
+    onResize();
+  } else {
+    ibpDrawStore.setDraftId(null);
+  }
+  const drawAssistantsTypes = [IBPButton.Type];
+  drawAssistantsTypes.forEach((type) => {
+    const drawAssistant = getIBPDrawApp()?.getDrawAssistant(type);
+    if (drawAssistant) {
+      utilsOption.push(
+        new ControlItem(
+          drawAssistant.name,
+          drawAssistant.icon,
+          drawAssistant.description || drawAssistant.name
+        )
+      );
+    }
+  });
+});
+
+function onResize() {
+  const clientWidth = document.documentElement.clientWidth;
+  const clientHeight = document.documentElement.clientHeight;
+  canvasWidth.value =
+    clientWidth -
+    (leftDrawerOpen.value ? leftWidth.value : 0) -
+    (rightDrawerOpen.value ? rightWidth.value : 0);
+  canvasHeight.value = clientHeight - headerHeight.value;
+  const dom = document.getElementById('draw-app-container');
+  // console.log(dom);
+  console.log(canvasWidth.value);
+  console.log(canvasHeight.value);
+  if (dom) {
+    dom.style.width = canvasWidth.value + 'px';
+    dom.style.height = canvasHeight.value + 'px';
+  }
+}
+function backConfirm() {
+  router.go(-1);
+}
+</script>
+
+<template>
+  <QLayout view="hHh LpR fFf">
+    <QHeader class="bg-primary">
+      <QToolbar>
+        <QToolbarTitle>
+          <QBtn color="accent" label="功能菜单">
+            <QMenu>
+              <QList style="min-width: 100px">
+                <QItem clickable @click="console.log('保存')" v-close-popup>
+                  <QItemSection>保存</QItemSection>
+                </QItem>
+              </QList>
+            </QMenu>
+          </QBtn>
+          <QBtnToggle
+            v-model="selectUtil"
+            :options="utilsOption"
+            color="brown"
+            text-color="white"
+            toggle-color="orange"
+            toggle-text-color="black"
+            @update:model-value="drawSelect"
+          >
+            <template
+              v-for="(ctl, idx) in utilsOption"
+              :key="idx"
+              v-slot:[ctl.value]
+            >
+              <QTooltip>{{ ctl.tip }}</QTooltip>
+            </template></QBtnToggle
+          >
+        </QToolbarTitle>
+        <QBtn color="info" label="返回" @click="backConfirm" />
+        <QBtn dense flat round icon="menu" @click="toggleRightDrawer" />
+      </QToolbar>
+      <QResizeObserver @resize="onHeaderResize" />
+    </QHeader>
+    <QDrawer show-if-above bordered v-model="rightDrawerOpen" side="right">
+      <QResizeObserver @resize="onRightResize" />
+      <IbpDrawProperties />
+    </QDrawer>
+    <QPageContainer>
+      <div id="draw-app-container"></div>
+    </QPageContainer>
+  </QLayout>
+</template>
diff --git a/src/pages/DraftManage.vue b/src/pages/DraftManage.vue
index 7949320..edcb992 100644
--- a/src/pages/DraftManage.vue
+++ b/src/pages/DraftManage.vue
@@ -358,6 +358,7 @@ const pictureTypeList: { label: string; value: PictureType }[] = [
   { label: '信号布置图', value: PictureType.StationLayout },
   { label: 'PSL', value: PictureType.Psl },
   { label: '继电器柜布置图', value: PictureType.RelayCabinetLayout },
+  { label: 'IBP盘', value: PictureType.IBP },
 ];
 const categoryId = ref('');
 const pictureType = ref(PictureType.StationLayout);
@@ -382,10 +383,12 @@ function getTypeName(val?: number) {
 
 function goToPath(row: DraftItem) {
   let path = `/painting/${row.id}/${row.category}`;
-  if (row.type == PictureType.RelayCabinetLayout) {
+  if (row.type === PictureType.RelayCabinetLayout) {
     path = `/relayCabinet/${row.id}`;
   } else if (row.type === PictureType.Psl) {
     path = `/pslPainting/${row.id}`;
+  } else if (row.type === PictureType.IBP) {
+    path = `/ibpPainting/${row.id}`;
   }
   router.push({ path: path });
 }
diff --git a/src/protos/ibpGraphics.ts b/src/protos/ibpGraphics.ts
new file mode 100644
index 0000000..049c065
--- /dev/null
+++ b/src/protos/ibpGraphics.ts
@@ -0,0 +1,343 @@
+/**
+ * Generated by the protoc-gen-ts.  DO NOT EDIT!
+ * compiler version: 4.23.1
+ * source: ibpGraphics.proto
+ * git: https://github.com/thesayyn/protoc-gen-ts */
+import * as dependency_1 from "./stationLayoutGraphics";
+import * as pb_1 from "google-protobuf";
+export namespace ibpGraphicData {
+    export class IBPGraphicStorage extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            canvas?: dependency_1.graphicData.Canvas;
+            ibpButtons?: IBPButton[];
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("canvas" in data && data.canvas != undefined) {
+                    this.canvas = data.canvas;
+                }
+                if ("ibpButtons" in data && data.ibpButtons != undefined) {
+                    this.ibpButtons = data.ibpButtons;
+                }
+            }
+        }
+        get canvas() {
+            return pb_1.Message.getWrapperField(this, dependency_1.graphicData.Canvas, 1) as dependency_1.graphicData.Canvas;
+        }
+        set canvas(value: dependency_1.graphicData.Canvas) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_canvas() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get ibpButtons() {
+            return pb_1.Message.getRepeatedWrapperField(this, IBPButton, 2) as IBPButton[];
+        }
+        set ibpButtons(value: IBPButton[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 2, value);
+        }
+        static fromObject(data: {
+            canvas?: ReturnType<typeof dependency_1.graphicData.Canvas.prototype.toObject>;
+            ibpButtons?: ReturnType<typeof IBPButton.prototype.toObject>[];
+        }): IBPGraphicStorage {
+            const message = new IBPGraphicStorage({});
+            if (data.canvas != null) {
+                message.canvas = dependency_1.graphicData.Canvas.fromObject(data.canvas);
+            }
+            if (data.ibpButtons != null) {
+                message.ibpButtons = data.ibpButtons.map(item => IBPButton.fromObject(item));
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                canvas?: ReturnType<typeof dependency_1.graphicData.Canvas.prototype.toObject>;
+                ibpButtons?: ReturnType<typeof IBPButton.prototype.toObject>[];
+            } = {};
+            if (this.canvas != null) {
+                data.canvas = this.canvas.toObject();
+            }
+            if (this.ibpButtons != null) {
+                data.ibpButtons = this.ibpButtons.map((item: IBPButton) => item.toObject());
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_canvas)
+                writer.writeMessage(1, this.canvas, () => this.canvas.serialize(writer));
+            if (this.ibpButtons.length)
+                writer.writeRepeatedMessage(2, this.ibpButtons, (item: IBPButton) => item.serialize(writer));
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): IBPGraphicStorage {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new IBPGraphicStorage();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.canvas, () => message.canvas = dependency_1.graphicData.Canvas.deserialize(reader));
+                        break;
+                    case 2:
+                        reader.readMessage(message.ibpButtons, () => pb_1.Message.addToRepeatedWrapperField(message, 2, IBPButton.deserialize(reader), IBPButton));
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): IBPGraphicStorage {
+            return IBPGraphicStorage.deserialize(bytes);
+        }
+    }
+    export class IBPButton extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: dependency_1.graphicData.CommonInfo;
+            code?: string;
+            color?: IBPButton.IbpButtonColor;
+            isSelfReset?: boolean;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+                if ("color" in data && data.color != undefined) {
+                    this.color = data.color;
+                }
+                if ("isSelfReset" in data && data.isSelfReset != undefined) {
+                    this.isSelfReset = data.isSelfReset;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, dependency_1.graphicData.CommonInfo, 1) as dependency_1.graphicData.CommonInfo;
+        }
+        set common(value: dependency_1.graphicData.CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get color() {
+            return pb_1.Message.getFieldWithDefault(this, 3, IBPButton.IbpButtonColor.gray) as IBPButton.IbpButtonColor;
+        }
+        set color(value: IBPButton.IbpButtonColor) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get isSelfReset() {
+            return pb_1.Message.getFieldWithDefault(this, 4, false) as boolean;
+        }
+        set isSelfReset(value: boolean) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
+            code?: string;
+            color?: IBPButton.IbpButtonColor;
+            isSelfReset?: boolean;
+        }): IBPButton {
+            const message = new IBPButton({});
+            if (data.common != null) {
+                message.common = dependency_1.graphicData.CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.color != null) {
+                message.color = data.color;
+            }
+            if (data.isSelfReset != null) {
+                message.isSelfReset = data.isSelfReset;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
+                code?: string;
+                color?: IBPButton.IbpButtonColor;
+                isSelfReset?: boolean;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.color != null) {
+                data.color = this.color;
+            }
+            if (this.isSelfReset != null) {
+                data.isSelfReset = this.isSelfReset;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (this.color != IBPButton.IbpButtonColor.gray)
+                writer.writeEnum(3, this.color);
+            if (this.isSelfReset != false)
+                writer.writeBool(4, this.isSelfReset);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): IBPButton {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new IBPButton();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = dependency_1.graphicData.CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    case 3:
+                        message.color = reader.readEnum();
+                        break;
+                    case 4:
+                        message.isSelfReset = reader.readBool();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): IBPButton {
+            return IBPButton.deserialize(bytes);
+        }
+    }
+    export namespace IBPButton {
+        export enum IbpButtonColor {
+            gray = 0,
+            red = 1,
+            green = 2,
+            blue = 3,
+            yellow = 4
+        }
+    }
+    export class IBPText extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: dependency_1.graphicData.CommonInfo;
+            size?: number;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("size" in data && data.size != undefined) {
+                    this.size = data.size;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, dependency_1.graphicData.CommonInfo, 1) as dependency_1.graphicData.CommonInfo;
+        }
+        set common(value: dependency_1.graphicData.CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get size() {
+            return pb_1.Message.getFieldWithDefault(this, 2, 0) as number;
+        }
+        set size(value: number) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
+            size?: number;
+        }): IBPText {
+            const message = new IBPText({});
+            if (data.common != null) {
+                message.common = dependency_1.graphicData.CommonInfo.fromObject(data.common);
+            }
+            if (data.size != null) {
+                message.size = data.size;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
+                size?: number;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.size != null) {
+                data.size = this.size;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.size != 0)
+                writer.writeInt32(2, this.size);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): IBPText {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new IBPText();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = dependency_1.graphicData.CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.size = reader.readInt32();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): IBPText {
+            return IBPText.deserialize(bytes);
+        }
+    }
+}
diff --git a/src/protos/picture.ts b/src/protos/picture.ts
index 70c4790..ab60076 100644
--- a/src/protos/picture.ts
+++ b/src/protos/picture.ts
@@ -7,5 +7,6 @@ import * as pb_1 from "google-protobuf";
 export enum PictureType {
     StationLayout = 0,
     Psl = 1,
-    RelayCabinetLayout = 2
+    RelayCabinetLayout = 2,
+    IBP = 3
 }
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 88379cb..3ca9dbd 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -177,6 +177,14 @@ export const asyncRoutes: RouteRecordRaw[] = [
       hidden: true,
     },
   },
+  {
+    path: '/ibpPainting/:id',
+    name: 'ibpPainting',
+    component: () => import('src/layouts/IBPDrawLayout.vue'),
+    meta: {
+      hidden: true,
+    },
+  },
   {
     path: '/linemap',
     name: 'linemap',
diff --git a/src/stores/ibp-draw-store.ts b/src/stores/ibp-draw-store.ts
new file mode 100644
index 0000000..9169eee
--- /dev/null
+++ b/src/stores/ibp-draw-store.ts
@@ -0,0 +1,75 @@
+import { defineStore } from 'pinia';
+import { getIBPDrawApp, initIBPDrawApp } from 'src/drawApp/ibpDrawApp';
+import { DrawAssistant, IDrawApp, IJlCanvas, JlGraphic } from 'src/jl-graphic';
+
+export const useIBPDrawStore = defineStore('ibpDraw', {
+  state: () => ({
+    drawAssistant: null as DrawAssistant | null,
+    selectedGraphics: null as JlGraphic[] | null,
+    draftId: null as number | null,
+    draftType: 'IBP',
+  }),
+  getters: {
+    selectedObjName: (state) => {
+      if (state.selectedGraphics) {
+        if (state.selectedGraphics.length == 0) {
+          return '画布';
+        } else if (state.selectedGraphics.length == 1) {
+          return state.selectedGraphics[0].type;
+        }
+        return '多选';
+      }
+      return '';
+    },
+    selectedGraphicType: (state) => {
+      if (state.selectedGraphics) {
+        if (state.selectedGraphics.length === 1) {
+          return state.selectedGraphics[0].type;
+        }
+      }
+    },
+    selectedGraphic: (state) => {
+      if (state.selectedGraphics) {
+        if (state.selectedGraphics.length === 1) {
+          return state.selectedGraphics[0];
+        }
+      }
+      return null;
+    },
+  },
+  actions: {
+    getDrawApp(): IDrawApp {
+      const app = getIBPDrawApp();
+      if (app == null) {
+        throw new Error('未初始化app');
+      }
+      return app;
+    },
+    getJlCanvas(): IJlCanvas {
+      return this.getDrawApp().canvas;
+    },
+    initDrawApp() {
+      const app = initIBPDrawApp();
+      app.on('interaction-plugin-resume', (plugin) => {
+        if (plugin.isAppPlugin()) {
+          if (Object.hasOwn(plugin, '__GraphicDrawAssistant')) {
+            this.drawAssistant = plugin as DrawAssistant;
+          } else {
+            this.drawAssistant = null;
+          }
+        }
+      });
+      app.on('graphicselectedchange', () => {
+        this.selectedGraphics = app.selectedGraphics;
+      });
+      this.selectedGraphics = [];
+      return app;
+    },
+    setDraftId(id: number | null) {
+      this.draftId = id;
+    },
+    setDraftType(type: string) {
+      this.draftType = type;
+    },
+  },
+});