前端增加插件化示例

web/src/components/warningBar/warningBar.vue

@@ -1,6 +1,8 @@
 <template>
   <div
     class="warning-bar"
+    :class="href&&'can-click'"
+    @click="open"
   >
     <el-icon>
       <warning-filled />
@@ -12,12 +14,22 @@
 </template>
 <script setup>
 import { WarningFilled } from '@element-plus/icons-vue'
-defineProps({
+const prop = defineProps({
   title: {
     type: String,
     default: ''
   },
+  href: {
+    type: String,
+    default: ''
+  }
 })
+
+const open = () => {
+  if (prop.href) {
+    window.open(prop.href)
+  }
+}
 </script>
 <style lang="scss" scoped>
 .warning-bar{
@@ -38,4 +50,7 @@ defineProps({
         margin-left: 8px;
     }
 }
+.can-click{
+  cursor: pointer;
+}
 </style>