diff --git a/frontent/ops_vue/package-lock.json b/frontent/ops_vue/package-lock.json
index c2ac499..0c29b4c 100644
--- a/frontent/ops_vue/package-lock.json
+++ b/frontent/ops_vue/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@tabler/core": "^1.4.0",
         "@tabler/icons-vue": "^3.35.0",
+        "bootstrap": "^5.3.8",
         "pinia": "^3.0.3",
         "vue": "^3.5.22",
         "vue-i18n": "^9.14.5",
@@ -18,6 +19,7 @@
       "devDependencies": {
         "@playwright/test": "^1.55.1",
         "@tsconfig/node22": "^22.0.2",
+        "@types/bootstrap": "^5.2.10",
         "@types/jsdom": "^21.1.7",
         "@types/node": "^22.18.6",
         "@vitejs/plugin-vue": "^6.0.1",
@@ -1789,6 +1791,25 @@
         "url": "https://github.com/sponsors/codecalm"
       }
     },
+    "node_modules/@tabler/core/node_modules/bootstrap": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.7.tgz",
+      "integrity": "sha512-7KgiD8UHjfcPBHEpDNg+zGz8L3LqR3GVwqZiBRFX04a1BCArZOz1r2kjly2HQ0WokqTO0v1nF+QAt8dsW4lKlw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/@tabler/icons": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.35.0.tgz",
@@ -1821,6 +1842,16 @@
       "integrity": "sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA==",
       "dev": true
     },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/chai": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
@@ -2820,9 +2851,9 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "5.3.7",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.7.tgz",
-      "integrity": "sha512-7KgiD8UHjfcPBHEpDNg+zGz8L3LqR3GVwqZiBRFX04a1BCArZOz1r2kjly2HQ0WokqTO0v1nF+QAt8dsW4lKlw==",
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+      "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
       "funding": [
         {
           "type": "github",
diff --git a/frontent/ops_vue/package.json b/frontent/ops_vue/package.json
index e0dc585..4802648 100644
--- a/frontent/ops_vue/package.json
+++ b/frontent/ops_vue/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@tabler/core": "^1.4.0",
     "@tabler/icons-vue": "^3.35.0",
+    "bootstrap": "^5.3.8",
     "pinia": "^3.0.3",
     "vue": "^3.5.22",
     "vue-i18n": "^9.14.5",
@@ -28,6 +29,7 @@
   "devDependencies": {
     "@playwright/test": "^1.55.1",
     "@tsconfig/node22": "^22.0.2",
+    "@types/bootstrap": "^5.2.10",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.18.6",
     "@vitejs/plugin-vue": "^6.0.1",
diff --git a/frontent/ops_vue/src/App.vue b/frontent/ops_vue/src/App.vue
index e24b623..c8d9330 100644
--- a/frontent/ops_vue/src/App.vue
+++ b/frontent/ops_vue/src/App.vue
@@ -16,10 +16,8 @@ import FooterMain from './components/FooterMain.vue';
 
   <RouterView />
 
-
   <FooterMain />
 
-
   </div>
 
 
diff --git a/frontent/ops_vue/src/components/MyOffcanvas.vue b/frontent/ops_vue/src/components/MyOffcanvas.vue
new file mode 100644
index 0000000..873ae3c
--- /dev/null
+++ b/frontent/ops_vue/src/components/MyOffcanvas.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Offcanvas } from 'bootstrap'
+
+const offcanvasTop = ref(null)
+let ov: Offcanvas
+const alertType=ref() // 可选值：'success', 'warning', 'danger', 'info'
+const alertText=ref()
+onMounted(() => {
+  // 确保在组件挂载后初始化
+  if (offcanvasTop.value) {
+    ov = new Offcanvas(offcanvasTop.value)
+    //ov.show();
+    //console.log('Offcanvas initialized:', ov)
+  }
+})
+
+// function showOffcanvas() {
+//   if (ov) {
+//     ov.show()
+//   }
+// }
+
+function showAlert(type: string, text: string) {
+  alertType.value = type;
+  alertText.value = text;
+  if (ov) {
+    ov.show()
+  }
+}
+
+</script>
+
+<style scoped>
+.my_offcanvas_top {
+  position: fixed;
+
+  height: 45px;
+
+  top: 0;
+  right: 0;
+  left: 0;
+
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 20px;
+
+  max-height: 100%;
+  transform: translateY(-100%);
+}
+</style>
+
+<template>
+  <div
+    class="offcanvas alert alert-important alert-dismissible my_offcanvas_top"
+    :class="{
+      'alert-success': alertType === 'success',
+      'alert-warning': alertType === 'warning',
+      'alert-danger': alertType === 'danger',
+      'alert-info': alertType === 'info',
+    }"
+    role="alert"
+    tabindex="-1"
+    ref="offcanvasTop"
+  >
+    <div class="d-flex">
+      <div>
+        <!-- Download SVG icon from http://tabler-icons.io/i/check -->
+        <svg
+          v-if="alertType === 'success'"
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon alert-icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M5 12l5 5l10 -10"></path>
+        </svg>
+        <svg
+          v-if="alertType === 'warning'"
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon alert-icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path
+            d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z"
+          ></path>
+          <path d="M12 9v4"></path>
+          <path d="M12 17h.01"></path>
+        </svg>
+        <svg
+          v-if="alertType === 'danger'"
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon alert-icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
+          <path d="M12 8v4"></path>
+          <path d="M12 16h.01"></path>
+        </svg>
+        <svg
+          v-if="alertType === 'info'"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="icon icon-tabler icons-tabler-outline icon-tabler-brand-hipchat"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17.802 17.292s.077 -.055 .2 -.149c1.843 -1.425 3 -3.49 3 -5.789c0 -4.286 -4.03 -7.764 -9 -7.764c-4.97 0 -9 3.478 -9 7.764c0 4.288 4.03 7.646 9 7.646c.424 0 1.12 -.028 2.088 -.084c1.262 .82 3.104 1.493 4.716 1.493c.499 0 .734 -.41 .414 -.828c-.486 -.596 -1.156 -1.551 -1.416 -2.29z"
+          />
+          <path d="M7.5 13.5c2.5 2.5 6.5 2.5 9 0" />
+        </svg>
+      </div>
+      <div>
+        {{ alertText }}
+      </div>
+    </div>
+    <a class="btn-close" data-bs-dismiss="offcanvas" aria-label="close"></a>
+  </div>
+
+  <div>
+    <button @click="showAlert('success','success')">success</button>
+    <button @click="showAlert('warning','warning')">warning</button>
+    <button @click="showAlert('danger','danger')">danger</button>
+    <button @click="showAlert('info','info')">info</button>
+  </div>
+</template>
diff --git a/frontent/ops_vue/src/main.ts b/frontent/ops_vue/src/main.ts
index 44f9f7a..a3da7a0 100644
--- a/frontent/ops_vue/src/main.ts
+++ b/frontent/ops_vue/src/main.ts
@@ -11,6 +11,9 @@ import '@tabler/core/dist/css/tabler.min.css'
 import '@tabler/core/dist/css/tabler-vendors.min.css'
 import '@tabler/core/dist/js/tabler.min.js'
 
+// import 'bootstrap/dist/css/bootstrap.min.css'
+// import 'bootstrap/dist/js/bootstrap.bundle.min.js'
+
 
 const app = createApp(App)
 
diff --git a/frontent/ops_vue/src/views/HomeView.vue b/frontent/ops_vue/src/views/HomeView.vue
index 51ab4a9..dd197f1 100644
--- a/frontent/ops_vue/src/views/HomeView.vue
+++ b/frontent/ops_vue/src/views/HomeView.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
+  import MyOffcanvas from '@/components/MyOffcanvas.vue';
+  import { onMounted, ref } from 'vue';
+  const mos = ref<InstanceType<typeof MyOffcanvas> | null>(null);
+
+  onMounted(() => {
+    // 可以在这里调用mos.value的方法
+    console.log('HomeView mounted', mos);
+  });
+
 
 </script>
 
 <template>
 
-          <div class="container-xl">
-            <div class="row g-2 align-items-center">
-              <div class="col">
-                <h2 class="page-title">
-                  Empty page
-                </h2>
-              </div>
-            </div>
-          </div>
+<div>
+  <MyOffcanvas ref="mos"/>
+  <button >ttt</button>
+  111
+</div>
 
 </template>