feat(breadcrumb): support showIcon (#48)

Co-authored-by: FuckDoctors <zhbchwin@163.com>

Author: FuckDoctors

src/layouts/default/LayoutBreadcrumb.tsx

@@ -10,10 +10,17 @@ import { PageEnum } from '/@/enums/pageEnum';
 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,
+      default: false,
+    },
+  },
+  setup(props) {
     const itemList = ref<AppRouteRecordRaw[]>([]);
     const { currentRoute, push } = useRouter();
 
@@ -78,7 +85,14 @@ 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 mb-1" />
+                            )}
+                            {item.meta.title}
+                          </>
+                        )}
                       </BreadcrumbItem>
                     );
                   });

src/layouts/default/LayoutHeader.tsx

@@ -94,6 +94,7 @@ export default defineComponent({
         },
         menuSetting: { mode, type: menuType, split: splitMenu, topMenuAlign },
         showBreadCrumb,
+        showBreadCrumbIcon,
       } = getProjectConfig;
 
       const isSidebarType = menuType === MenuTypeEnum.SIDEBAR;
@@ -106,7 +107,7 @@ export default defineComponent({
                 {showLogo && !isSidebarType && <Logo class={`layout-header__logo`} />}
 
                 {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
-                  <LayoutBreadcrumb />
+                  <LayoutBreadcrumb showIcon={showBreadCrumbIcon} />
                 )}
                 {unref(showTopMenu) && (
                   <div

src/layouts/default/setting/SettingDrawer.tsx

@@ -343,6 +343,7 @@ export default defineComponent({
         menuSetting: { show: showMenu },
         multiTabsSetting: { show: showMultiple, showQuick, showIcon: showTabIcon },
         showBreadCrumb,
+        showBreadCrumbIcon,
       } = unref(getProjectConfigRef);
       return [
         renderSwitchItem('面包屑', {
@@ -352,6 +353,13 @@ export default defineComponent({
           def: showBreadCrumb,
           disabled: !unref(getShowHeaderRef),
         }),
+        renderSwitchItem('面包屑图标', {
+          handler: (e) => {
+            baseHandler('showBreadCrumbIcon', e);
+          },
+          def: showBreadCrumbIcon,
+          disabled: !unref(getShowHeaderRef),
+        }),
         renderSwitchItem('标签页', {
           handler: (e) => {
             baseHandler('showMultiple', e);
@@ -449,6 +457,11 @@ export default defineComponent({
           showBreadCrumb: value,
         };
       }
+      if (event === 'showBreadCrumbIcon') {
+        config = {
+          showBreadCrumbIcon: value,
+        };
+      }
       if (event === 'collapsed') {
         config = {
           menuSetting: {

src/settings/projectSetting.ts

@@ -94,6 +94,8 @@ const setting: ProjectConfig = {
   lockTime: 0,
   // 显示面包屑
   showBreadCrumb: true,
+  // 显示面包屑图标
+  showBreadCrumbIcon: false,
 
   // 使用error-handler-plugin
   useErrorHandle: isProdMode(),

src/types/config.d.ts

@@ -84,6 +84,8 @@ export interface ProjectConfig {
   lockTime: number;
   // 显示面包屑
   showBreadCrumb: boolean;
+  // 显示面包屑图标
+  showBreadCrumbIcon: boolean;
   // 使用error-handler-plugin
   useErrorHandle: boolean;