From 96192c1f1727c93da1952ce0ea57655936458840 Mon Sep 17 00:00:00 2001
From: Ming <66944708+zym19960704@users.noreply.github.com>
Date: Mon, 1 Apr 2024 17:53:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(Breadcrumb):=20=E6=96=B0=E5=A2=9E=E9=9D=A2?=
 =?UTF-8?q?=E5=8C=85=E5=B1=91=E7=BB=84=E4=BB=B6=20(#706)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 面包屑组件开发完成

* feat: pr问题修改

* feat: 移除icon和menu

* docs: 文档格式化

* feat: pr问题修改

* feat: 移除to和replace

---------

Co-authored-by: blankzhang <blankzhang@blankzhangdeMac-mini.local>
---
 components/_style.ts                          |  1 +
 components/avatar/avatar.tsx                  |  2 +
 components/avatarGroup/avatarGroup.tsx        |  2 +
 components/breadcrumb/breadcrumb-item.tsx     | 36 +++++++++++++++
 components/breadcrumb/breadcrumb.tsx          | 46 +++++++++++++++++++
 components/breadcrumb/const.ts                | 10 ++++
 components/breadcrumb/index.ts                | 19 ++++++++
 components/breadcrumb/props.ts                | 25 ++++++++++
 components/breadcrumb/style/index.less        | 42 +++++++++++++++++
 components/breadcrumb/style/index.ts          |  2 +
 components/components.ts                      |  1 +
 .../.vitepress/components/breadcrumb/base.vue | 32 +++++++++++++
 .../components/breadcrumb/click.vue           | 17 +++++++
 .../.vitepress/components/breadcrumb/index.md | 35 ++++++++++++++
 docs/.vitepress/configs/sidebar/index.ts      |  8 +++-
 15 files changed, 276 insertions(+), 2 deletions(-)
 create mode 100644 components/breadcrumb/breadcrumb-item.tsx
 create mode 100644 components/breadcrumb/breadcrumb.tsx
 create mode 100644 components/breadcrumb/const.ts
 create mode 100644 components/breadcrumb/index.ts
 create mode 100644 components/breadcrumb/props.ts
 create mode 100644 components/breadcrumb/style/index.less
 create mode 100644 components/breadcrumb/style/index.ts
 create mode 100644 docs/.vitepress/components/breadcrumb/base.vue
 create mode 100644 docs/.vitepress/components/breadcrumb/click.vue
 create mode 100644 docs/.vitepress/components/breadcrumb/index.md

diff --git a/components/_style.ts b/components/_style.ts
index 671dcebf..fc2c1610 100644
--- a/components/_style.ts
+++ b/components/_style.ts
@@ -58,3 +58,4 @@ import './avatarGroup/style';
 import './progress/style';
 import './transfer/style';
 import './input-file/style';
+import './breadcrumb/style';
diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx
index a72a0e7e..bada6e7c 100644
--- a/components/avatar/avatar.tsx
+++ b/components/avatar/avatar.tsx
@@ -9,6 +9,7 @@ import {
 } from 'vue';
 import getPrefixCls from '../_util/getPrefixCls';
 import { PictureFailOutlined } from '../icon';
+import { useTheme } from '../_theme/useTheme';
 import { avatarProps } from './props';
 import { sizeMap } from './const';
 
@@ -19,6 +20,7 @@ export default defineComponent({
     props: avatarProps,
     emits: ['error'],
     setup(props, { emit, slots }) {
+        useTheme();
         const avatarCls = computed(() => {
             return [
                 `${prefixCls}`,
diff --git a/components/avatarGroup/avatarGroup.tsx b/components/avatarGroup/avatarGroup.tsx
index 39ab2642..51a604e8 100644
--- a/components/avatarGroup/avatarGroup.tsx
+++ b/components/avatarGroup/avatarGroup.tsx
@@ -8,6 +8,7 @@ import {
 import getPrefixCls from '../_util/getPrefixCls';
 import { FAvatar } from '../avatar';
 import { FTooltip } from '../tooltip';
+import { useTheme } from '../_theme/useTheme';
 import { avatarGroupProps } from './props';
 
 const prefixCls = getPrefixCls('avatar-group');
@@ -16,6 +17,7 @@ export default defineComponent({
     name: 'FAvatarGroup',
     props: avatarGroupProps,
     setup(props, { slots }) {
+        useTheme();
         // 渲染option
         const renderAvatarByOption = (num?: number) => {
             const avatarList = props.options.map((avatar, index) => {
diff --git a/components/breadcrumb/breadcrumb-item.tsx b/components/breadcrumb/breadcrumb-item.tsx
new file mode 100644
index 00000000..3b13e01c
--- /dev/null
+++ b/components/breadcrumb/breadcrumb-item.tsx
@@ -0,0 +1,36 @@
+import { computed, defineComponent, inject } from 'vue';
+import { useTheme } from '../_theme/useTheme';
+import { BREADCRUMB_KEY, itemCls } from './const';
+
+export default defineComponent({
+    name: 'FBreadcrumbItem',
+    emits: ['click'],
+    setup(props, { emit, slots }) {
+        useTheme();
+
+        const { props: parentProps } = inject(BREADCRUMB_KEY);
+
+        const itemStyle = computed(() => {
+            return {
+                fontSize: `${parentProps.fontSize}px`,
+                lineHeight: 1,
+            };
+        });
+
+        // 处理点击跳转的事件
+        const handleClick = () => {
+            // 触发用户自定义的click事件
+            emit('click');
+        };
+
+        return () => (
+            <div
+                class={itemCls}
+                style={itemStyle.value}
+                onClick={() => handleClick()}
+            >
+                {slots.default?.()}
+            </div>
+        );
+    },
+});
diff --git a/components/breadcrumb/breadcrumb.tsx b/components/breadcrumb/breadcrumb.tsx
new file mode 100644
index 00000000..b77ee29a
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,46 @@
+import { computed, defineComponent, provide } from 'vue';
+import { useTheme } from '../_theme/useTheme';
+import { breadcrumbProps } from './props';
+import { BREADCRUMB_KEY, prefixCls } from './const';
+
+export default defineComponent({
+    name: 'FBreadcrumb',
+    props: breadcrumbProps,
+    setup(props, { slots }) {
+        useTheme();
+
+        provide(BREADCRUMB_KEY, {
+            props: props,
+        });
+        const breadcrumbStyle = computed(() => {
+            return {
+                fontSize: `${props.fontSize}px`,
+            };
+        });
+
+        const breadItemArr = computed(() => {
+            return slots.default ? slots.default() : [];
+        });
+
+        // 渲染所有的层级
+        const renderAllItem = () => {
+            return breadItemArr.value.map((item, index) => {
+                return (
+                    <div class={`${prefixCls}-child`}>
+                        {item}
+                        {/* 渲染分隔符 */}
+                        <div class={`${prefixCls}-separator`}>
+                            {index !== breadItemArr.value.length - 1 &&
+                                props.separator}
+                        </div>
+                    </div>
+                );
+            });
+        };
+        return () => (
+            <div class={prefixCls} style={breadcrumbStyle.value}>
+                {slots.default && renderAllItem()}
+            </div>
+        );
+    },
+});
diff --git a/components/breadcrumb/const.ts b/components/breadcrumb/const.ts
new file mode 100644
index 00000000..e6f2c441
--- /dev/null
+++ b/components/breadcrumb/const.ts
@@ -0,0 +1,10 @@
+import { type InjectionKey } from 'vue';
+import getPrefixCls from '../_util/getPrefixCls';
+import { type BreadcrumbInject } from './props';
+
+export const prefixCls = getPrefixCls('breadcrumb');
+
+export const itemCls = getPrefixCls('breadcrumb-item');
+
+export const BREADCRUMB_KEY: InjectionKey<BreadcrumbInject> =
+    Symbol('BREADCRUMB_KEY');
diff --git a/components/breadcrumb/index.ts b/components/breadcrumb/index.ts
new file mode 100644
index 00000000..47d98f25
--- /dev/null
+++ b/components/breadcrumb/index.ts
@@ -0,0 +1,19 @@
+import { withInstall } from '../_util/withInstall';
+import Breadcrumb from './breadcrumb';
+import BreadcrumbItem from './breadcrumb-item';
+import type { SFCWithInstall } from '../_util/interface';
+
+export { breadcrumbProps } from './props';
+export type { BreadcrumbProps } from './props';
+
+type BreadcrumbType = SFCWithInstall<typeof Breadcrumb>;
+export const FBreadcrumb = withInstall<BreadcrumbType>(
+    Breadcrumb as BreadcrumbType,
+);
+
+type BreadCrumbItemType = SFCWithInstall<typeof BreadcrumbItem>;
+export const FBreadCrumbItem = withInstall<BreadCrumbItemType>(
+    BreadcrumbItem as BreadCrumbItemType,
+);
+
+export default FBreadcrumb;
diff --git a/components/breadcrumb/props.ts b/components/breadcrumb/props.ts
new file mode 100644
index 00000000..a05df436
--- /dev/null
+++ b/components/breadcrumb/props.ts
@@ -0,0 +1,25 @@
+import { type ComponentObjectPropsOptions } from 'vue';
+import {
+    type ExtractPublicPropTypes,
+    type ComponentInnerProps,
+} from '../_util/interface';
+
+export const breadcrumbProps = {
+    // 分隔符，默认为/
+    separator: {
+        type: String,
+        default: '/',
+    },
+    fontSize: {
+        type: Number,
+        default: 14,
+    },
+} as const satisfies ComponentObjectPropsOptions;
+
+export type BreadcrumbProps = ExtractPublicPropTypes<typeof breadcrumbProps>;
+
+type BreadcrumbInnerProps = ComponentInnerProps<typeof breadcrumbProps>;
+
+export type BreadcrumbInject = {
+    props: BreadcrumbInnerProps;
+};
diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less
new file mode 100644
index 00000000..4020bc85
--- /dev/null
+++ b/components/breadcrumb/style/index.less
@@ -0,0 +1,42 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@breadcrumb: ~'@{cls-prefix}-breadcrumb';
+@text-color: var(--f-sub-head-color);
+
+@breadcrumb-item: ~'@{cls-prefix}-breadcrumb-item';
+@hover-text-color: var(--f-font-color-base);
+
+.@{breadcrumb} {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    color: @text-color;
+
+    &-child {
+        display: flex;
+        align-items: center;
+
+        .icon {
+            margin-right: 4px;
+        }
+    }
+
+    &-separator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 14px;
+        margin: 0 4px;
+        line-height: 1;
+    }
+}
+
+.@{breadcrumb-item} {
+    margin: 4px 0;
+
+    &:hover {
+        color: @hover-text-color;
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/components/breadcrumb/style/index.ts b/components/breadcrumb/style/index.ts
new file mode 100644
index 00000000..ed51d175
--- /dev/null
+++ b/components/breadcrumb/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';
diff --git a/components/components.ts b/components/components.ts
index a44f944c..ceaf5189 100644
--- a/components/components.ts
+++ b/components/components.ts
@@ -56,3 +56,4 @@ export * from './avatarGroup';
 export * from './progress';
 export * from './transfer';
 export * from './input-file';
+export * from './breadcrumb';
diff --git a/docs/.vitepress/components/breadcrumb/base.vue b/docs/.vitepress/components/breadcrumb/base.vue
new file mode 100644
index 00000000..8c8d51c7
--- /dev/null
+++ b/docs/.vitepress/components/breadcrumb/base.vue
@@ -0,0 +1,32 @@
+<template>
+    <FForm :labelWidth="60">
+        <FFormItem label="分隔符:">
+            <FInput v-model="separator" class="form-item"></FInput>
+        </FFormItem>
+        <FFormItem label="字体大小:">
+            <FInputNumber v-model="fontSize" class="form-item"></FInputNumber>
+        </FFormItem>
+    </FForm>
+    <FDivider></FDivider>
+    <FBreadcrumb :separator="separator" :fontSize="fontSize">
+        <FBreadcrumbItem>首页</FBreadcrumbItem>
+        <FBreadcrumbItem>二级页面 </FBreadcrumbItem>
+        <FBreadcrumbItem>三级页面</FBreadcrumbItem>
+        <FBreadcrumbItem>四级页面</FBreadcrumbItem>
+        <FBreadcrumbItem>五级页面</FBreadcrumbItem>
+    </FBreadcrumb>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const separator = ref('/');
+
+const fontSize = ref(14);
+</script>
+
+<style>
+.form-item {
+    width: 100px;
+}
+</style>
diff --git a/docs/.vitepress/components/breadcrumb/click.vue b/docs/.vitepress/components/breadcrumb/click.vue
new file mode 100644
index 00000000..755042ae
--- /dev/null
+++ b/docs/.vitepress/components/breadcrumb/click.vue
@@ -0,0 +1,17 @@
+<template>
+    <FBreadcrumb>
+        <FBreadcrumbItem @click="handleClick">首页</FBreadcrumbItem>
+        <FBreadcrumbItem>
+            <router-link :to="{ path: 'apple', query: { color: 'red' } }">
+                二级页面
+            </router-link>
+        </FBreadcrumbItem>
+        <FBreadcrumbItem>三级页面</FBreadcrumbItem>
+    </FBreadcrumb>
+</template>
+
+<script setup>
+const handleClick = () => {
+    window.location.href = '/';
+};
+</script>
diff --git a/docs/.vitepress/components/breadcrumb/index.md b/docs/.vitepress/components/breadcrumb/index.md
new file mode 100644
index 00000000..ef29f961
--- /dev/null
+++ b/docs/.vitepress/components/breadcrumb/index.md
@@ -0,0 +1,35 @@
+# Breadcrumb 面包屑
+
+显示当前页面的路径，快速返回之前的任意页面。
+
+## 组件注册
+
+```js
+import { FBreadcrumb } from '@fesjs/fes-design';
+
+app.use(FBreadcrumb);
+```
+
+## 代码演示
+
+### 基础用法
+
+:::demo
+base.vue
+:::
+
+### 自定义点击事件
+自定义某个item的点击事件。  
+同时点击行为，也可以和 vue-router 一起结合使用。
+
+:::demo
+click.vue
+:::
+
+## Breadcrumb Props
+
+| 属性      | 说明              | 类型     | 默认值 |
+| --------- | ----------------- | -------- | ------ |
+| separator | 分隔符，默认为`/` | `string` | `-`    |
+| fontSize  | 字体大小          | `number` | `14`   |
+
diff --git a/docs/.vitepress/configs/sidebar/index.ts b/docs/.vitepress/configs/sidebar/index.ts
index 5a748fe7..6f1a635a 100644
--- a/docs/.vitepress/configs/sidebar/index.ts
+++ b/docs/.vitepress/configs/sidebar/index.ts
@@ -49,13 +49,17 @@ const sidebarConfig: Record<string, DefaultTheme.Config['sidebar']> = {
                 text: '导航组件',
                 items: [
                     {
-                        text: 'Menu 导航菜单',
-                        link: '/zh/components/menu',
+                        text: 'Breadcrumb 面包屑',
+                        link: '/zh/components/breadcrumb',
                     },
                     {
                         text: 'Dropdown 下拉菜单',
                         link: '/zh/components/dropdown',
                     },
+                    {
+                        text: 'Menu 导航菜单',
+                        link: '/zh/components/menu',
+                    },
                     {
                         text: 'Steps 步骤条',
                         link: '/zh/components/steps',