标题 面包屑组件封装

+export { default as BreadcrumbIot } from './index.vue';

+<template>
+  <div class="layout">
+    <a-breadcrumb>
+      <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+        <a v-if="index < breadcrumbList.length - 1" @click="handleBreadcrumbClick(item.query)">{{
+          item.title
+        }}</a>
+        <span v-else>{{ item.title }}</span>
+      </a-breadcrumb-item>
+    </a-breadcrumb>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useRouter, useRoute } from 'vue-router';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { defineProps } from 'vue';
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const route = useRoute();
+
+  // 定义接收父组件传递的面包屑数据的 props
+  const props = defineProps({
+    breadcrumbList: {
+      type: Array as () => Array<{ title: string; query?: string }>,
+      default: () => [],
+    },
+  });
+
+  // 处理面包屑点击事件
+  const handleBreadcrumbClick = (query?: string) => {
+    if (query) {
+      router.push({
+        path: route.path,
+        query: { type: query },
+      });
+    } else {
+      router.go(-1);
+    }
+  };
+</script>
+
+<style scoped lang="less">
+  .layout {
+    padding: 6px 10px 6px 10px;
+    margin-bottom: 16px;
+    background-color: #fff;
+    font-size: 14px;
+    .ant-breadcrumb {
+      height: 46px;
+      line-height: 46px;
+    }
+  }
+</style>

+export { default as ModuleTitle } from './index.vue';

+<template>
+  <div class="title">{{ title }}</div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps } from 'vue';
+  // 定义接收父组件传递的标题属性
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '默认标题',
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  .title {
+    height: 50px;
+    line-height: 50px;
+    border-bottom: 1px solid #d9d9d9;
+    font-size: 16px;
+    padding-left: 15px;
+    margin-bottom: 15px;
+  }
+</style>