路由更新

schoolNewsWeb/src/components/base/Breadcrumb.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="breadcrumb" v-if="items && items.length > 0">
+    <span v-for="(item, index) in items" :key="index" class="breadcrumb-wrapper">
+      <span class="breadcrumb-item">
+        <!-- 最后一个项目不可点击 -->
+        <template v-if="index === items.length - 1">
+          <span class="breadcrumb-text current">{{ item.title }}</span>
+        </template>
+        
+        <!-- 其他项目可点击 -->
+        <template v-else>
+          <router-link 
+            :to="item.path" 
+            class="breadcrumb-link"
+            v-if="item.path"
+          >
+            {{ item.title }}
+          </router-link>
+          <span class="breadcrumb-text" v-else>{{ item.title }}</span>
+        </template>
+      </span>
+      
+      <!-- 分隔符 -->
+      <span class="breadcrumb-separator" v-if="index < items.length - 1">
+        <i class="separator-icon"></i>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 面包屑项目接口
+interface BreadcrumbItem {
+  title: string;
+  path?: string;
+}
+
+// Props
+interface Props {
+  items: BreadcrumbItem[];
+  separator?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  separator: '/'
+});
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #666;
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumb-link {
+  color: #1890ff;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  
+  &:hover {
+    color: #40a9ff;
+  }
+}
+
+.breadcrumb-text {
+  color: inherit;
+  
+  &.current {
+    color: #333;
+    font-weight: 500;
+  }
+}
+
+.breadcrumb-separator {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 8px;
+  color: #ccc;
+}
+
+.separator-icon::before {
+  content: "/";
+  font-size: 12px;
+}
+</style>