feat: restore the breadcrumb display icon function

vben
1 parent a2c413a8
Showing 2 changed files with 24 additions and 2 deletions
CHANGELOG.zh_CN.md
src/layouts/default/LayoutBreadcrumb.tsx
@@ -4,6 +4,7 @@
  
 - 新增`pwa`功能，可在`.env.production`开启
 - Button 组件扩展 `preIcon`和`postIcon`属性用于在文本前后添加图标
+- 恢复面包屑显示图标功能
  
 ### 🎫 Chores
  
 import type { AppRouteRecordRaw } from '/@/router/types';
 import type { RouteLocationMatched } from 'vue-router';
+import type { PropType } from 'vue';
  
 import { defineComponent, TransitionGroup, unref, watch, ref } from 'vue';
 import Breadcrumb from '/@/components/Breadcrumb/Breadcrumb.vue';
@@ -10,10 +11,17 @@ import { PageEnum } from &#39;/@/enums/pageEnum&#39;;
 import { isBoolean } from '/@/utils/is';
  
 import { compile } from 'path-to-regexp';
+import Icon from '/@/components/Icon';
  
 export default defineComponent({
   name: 'BasicBreadcrumb',
-  setup() {
+  props: {
+    showIcon: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+  },
+  setup(props) {
     const itemList = ref<AppRouteRecordRaw[]>([]);
  
     const { currentRoute, push } = useRouter();
@@ -82,7 +90,20 @@ export default defineComponent({
                     isLink={isLink}
                     onClick={handleItemClick.bind(null, item)}
                   >
-                    {() => item.meta.title}
+                    {() => (
+                      <>
+                        {props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
+                          <Icon
+                            icon={item.meta.icon}
+                            class="icon mr-1 "
+                            style={{
+                              marginBottom: '2px',
+                            }}
+                          />
+                        )}
+                        {item.meta.title}
+                      </>
+                    )}
                   </BreadcrumbItem>
                 );
               });