Repository: Tencent/tdesign-mobile-vue
Pull request #669 (2023-05-15 09:12:02)

refactor(navbar): new NavBar
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [x] 新特性提交
- [x] 文档改进
- [x] 演示代码改进
- [x] 组件样式/交互改进
- [ ] CI/CD 改进
- [x] 重构
- [ ] 代码风格优化
- [x] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->
#632 

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

NavBar组件升级

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- break(NavBar): 移除 background 属性
- break(NavBar): 移除 homeIcon 属性
- break(NavBar): 移除 leftIcon 属性
- break(NavBar): 移除 rightIcon 属性
- break(NavBar): leftClick事件参数变更
- feat(NavBar): 新增 capsule 属性
- feat(NavBar): 新增 leftArrow 属性
- feat(NavBar): 新增 left 属性，支持 string/TNode
- feat(NavBar): 新增 right 属性，支持 string/TNode


- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供


github-actions[bot]: <a href="https://preview-pr669-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/4978743391) -->
<!-- AUTO_PREVIEW_HOOK -->

Patch:
diff --git a/src/avatar/avatar.vue b/src/avatar/avatar.vue
index afc4a53c..a96b5b34 100644
--- a/src/avatar/avatar.vue
+++ b/src/avatar/avatar.vue
@@ -7,7 +7,6 @@
             v-if="image && !hideOnLoadFailed"
             :style="customSize"
             v-bind="customImageProps"
-            @load="handleImgLoadCompleted"
             @error="handleImgLoadError"
           />
           <div v-else-if="iconContent !== undefined" :class="`${name}__icon`">
@@ -68,9 +67,7 @@ export default defineComponent({
           }
         : {};
     });
-    const handleImgLoadCompleted = (e: any) => {
-      emitEvent('load', e);
-    };
+
     const handleImgLoadError = (e: any) => {
       emitEvent('error', e);
     };
@@ -95,7 +92,6 @@ export default defineComponent({
       avatarContent,
       avatarClass,
       customSize,
-      handleImgLoadCompleted,
       handleImgLoadError,
       customImageProps,
       customBadgeProps,
diff --git a/src/navbar/demos/base.vue b/src/navbar/demos/base.vue
index 7c6d50cc..0895da97 100644
--- a/src/navbar/demos/base.vue
+++ b/src/navbar/demos/base.vue
@@ -1,9 +1,64 @@
 <template>
-  <t-navbar title="标题" left-icon :fixed="false" @left-click="handleClick" />
+  <t-navbar title="标题文字" :fixed="false" left-arrow @left-click="handleClick" />
+
+  <t-navbar title="这是一个超长的标题文字也会自动省略" :fixed="false" left-arrow @left-click="handleClick">
+    <template #left>
+      <t-icon name="close" size="24px" />
+    </template>
+    <template #right>
+      <t-icon name="ellipsis" size="24px" />
+    </template>
+  </t-navbar>
+
+  <t-navbar title="只能显示五个字" :title-max-length="5" :fixed="false" @left-click="handleClick">
+    <template #capsule>
+      <div class="custom-capsule">
+        <t-icon name="chevron-left" size="20px" class="custom-capsule__icon" />
+        <t-divider layout="vertical" />
+        <t-icon name="home" size="20px" class="custom-capsule__icon" />
+      </div>
+    </template>
+    <template #right>
+      <t-icon name="ellipsis" size="24px" />
+    </template>
+  </t-navbar>
 </template>
 
 <script lang="ts" setup>
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+
 const handleClick = () => {
   console.log('left-click');
 };
 </script>
+
+<style lang="less" scoped>
+.t-navbar {
+  margin-bottom: 16px;
+}
+
+.t-icon-close {
+  margin: 0 8px;
+}
+
+.t-icon-home {
+  margin-right: 8px;
+}
+
+.custom-capsule {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-capsule__icon {
+  flex: 1;
+  position: relative;
+  margin: 0;
+}
+
+.custom-capsule :deep(.t-divider--vertical-center) :deep(.t-divider--vertical) {
+  margin: 0;
+}
+</style>
diff --git a/src/navbar/demos/custom-color.vue b/src/navbar/demos/custom-color.vue
new file mode 100644
index 00000000..3d24b8e1
--- /dev/null
+++ b/src/navbar/demos/custom-color.vue
@@ -0,0 +1,18 @@
+<template>
+  <t-navbar title="标题文字" :fixed="false" left-arrow class="custom-navbar">
+    <template #right>
+      <t-icon name="ellipsis" size="24px" />
+    </template>
+  </t-navbar>
+</template>
+
+<script lang="ts" setup>
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+</script>
+
+<style lang="less" scoped>
+.custom-navbar {
+  --td-navbar-bg-color: #0052d9;
+  --td-navbar-color: #fff;
+}
+</style>
diff --git a/src/navbar/demos/img.vue b/src/navbar/demos/img.vue
new file mode 100644
index 00000000..fbfee1ba
--- /dev/null
+++ b/src/navbar/demos/img.vue
@@ -0,0 +1,26 @@
+<template>
+  <t-navbar :fixed="false">
+    <template #left>
+      <t-image src="https://tdesign.gtimg.com/mobile/demos/logo1.png" class="logo" />
+    </template>
+    <template #right>
+      <t-icon name="home" size="24px" />
+      <t-icon name="ellipsis" size="24px" />
+    </template>
+  </t-navbar>
+</template>
+
+<script lang="ts" setup>
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+</script>
+
+<style lang="less" scoped>
+.logo {
+  width: 102px;
+  height: 24px;
+}
+
+.t-icon-home {
+  margin-right: 8px;
+}
+</style>
diff --git a/src/navbar/demos/left-icon.vue b/src/navbar/demos/left-icon.vue
deleted file mode 100644
index c5c25836..00000000
--- a/src/navbar/demos/left-icon.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <t-navbar title="标题" :fixed="false">
-    <template #left-icon>
-      <t-icon size="24px" name="chevron-left" class="btn-left" @click="handleBack" />
-      <t-icon size="24px" name="close" @click="handleClose" />
-    </template>
-    <template #right-icon>
-      <t-icon size="24px" name="ellipsis" @click="handleShowMore" />
-    </template>
-  </t-navbar>
-</template>
-
-<script lang="ts" setup>
-import { Icon as TIcon } from 'tdesign-icons-vue-next';
-
-const handleBack = () => {
-  console.log('back-icon-click');
-};
-
-const handleClose = () => {
-  console.log('close-icon-click');
-};
-
-const handleShowMore = () => {
-  console.log('more-icon-click');
-};
-</script>
diff --git a/src/navbar/demos/left-title.vue b/src/navbar/demos/left-title.vue
new file mode 100644
index 00000000..287903ff
--- /dev/null
+++ b/src/navbar/demos/left-title.vue
@@ -0,0 +1,37 @@
+<template>
+  <t-navbar title="标题居中" :fixed="false" left-arrow>
+    <template #right>
+      <t-icon name="ellipsis" size="24px" />
+    </template>
+  </t-navbar>
+
+  <t-navbar :fixed="false" left-arrow>
+    <template #left>
+      <span class="custom-title">标题左对齐</span>
+    </template>
+    <template #right>
+      <t-icon name="home" size="24px" />
+      <t-icon name="ellipsis" size="24px" />
+    </template>
+  </t-navbar>
+</template>
+
+<script lang="ts" setup>
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+</script>
+
+<style lang="less" scoped>
+.t-navbar {
+  margin-bottom: 16px;
+}
+
+.custom-title {
+  margin-left: 12px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.t-icon-home {
+  margin-right: 8px;
+}
+</style>
diff --git a/src/navbar/demos/mobile.vue b/src/navbar/demos/mobile.vue
index f6420bb9..f7d4d7f3 100644
--- a/src/navbar/demos/mobile.vue
+++ b/src/navbar/demos/mobile.vue
@@ -2,24 +2,39 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">NavBar 导航栏</h1>
     <p class="summary">用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。</p>
-    <tdesign-demo-block title="01 类型" summary="基础导航栏">
+    <tdesign-demo-block title="01 组件类型" summary="基础导航栏">
       <base-demo />
     </tdesign-demo-block>
 
-    <tdesign-demo-block summary="左侧双操作导航栏">
-      <left-icon-demo />
+    <tdesign-demo-block summary="带搜索导航栏">
+      <search-demo />
     </tdesign-demo-block>
 
-    <tdesign-demo-block summary="右侧双操作导航栏">
-      <right-icon-demo />
+    <tdesign-demo-block summary="带图片导航栏">
+      <img-demo />
+    </tdesign-demo-block>
+
+    <tdesign-demo-block title="02 组件样式" summary="标题对齐">
+      <left-title-demo />
+    </tdesign-demo-block>
+
+    <tdesign-demo-block summary="标题尺寸">
+      <size-demo />
+    </tdesign-demo-block>
+
+    <tdesign-demo-block summary="自定义颜色">
+      <custom-color-demo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts" setup>
 import baseDemo from './base.vue';
-import leftIconDemo from './left-icon.vue';
-import rightIconDemo from './right-icon.vue';
+import searchDemo from './search.vue';
+import imgDemo from './img.vue';
+import leftTitleDemo from './left-title.vue';
+import sizeDemo from './size.vue';
+import customColorDemo from './custom-color.vue';
 </script>
 
 <style lang="less" scoped>
diff --git a/src/navbar/demos/right-icon.vue b/src/navbar/demos/right-icon.vue
deleted file mode 100644
index d884e298..00000000
--- a/src/navbar/demos/right-icon.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <t-navbar title="标题" left-icon :fixed="false" @left-click="handleBack">
-    <template #right-icon>
-      <t-icon size="24px" name="notification" class="btn-left" @click="handleNotify" />
-      <t-icon size="24px" name="ellipsis" @click="handleShowMore" />
-    </template>
-  </t-navbar>
-</template>
-
-<script lang="ts" setup>
-import { Icon as TIcon } from 'tdesign-icons-vue-next';
-
-const handleBack = () => {
-  console.log('left-click');
-};
-
-const handleNotify = () => {
-  console.log('notification-icon-click');
-};
-
-const handleShowMore = () => {
-  console.log('more-icon-click');
-};
-</script>
diff --git a/src/navbar/demos/search.vue b/src/navbar/demos/search.vue
new file mode 100644
index 00000000..7e971b05
--- /dev/null
+++ b/src/navbar/demos/search.vue
@@ -0,0 +1,21 @@
+<template>
+  <t-navbar :fixed="false">
+    <template #left>
+      <t-search placeholder="搜索预设文案" shape="round" />
+    </template>
+    <template #right>
+      <t-icon name="home" size="24px" />
+      <t-icon name="ellipsis" size="24px" />
+    </template>
+  </t-navbar>
+</template>
+
+<script lang="ts" setup>
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+</script>
+
+<style lang="less" scoped>
+.t-icon-home {
+  margin-right: 8px;
+}
+</style>
diff --git a/src/navbar/demos/size.vue b/src/navbar/demos/size.vue
new file mode 100644
index 00000000..2c4e6a2d
--- /dev/null
+++ b/src/navbar/demos/size.vue
@@ -0,0 +1,42 @@
+<template>
+  <t-navbar title="标题文字" :fixed="false" left-arrow>
+    <template #right>
+      <t-icon name="ellipsis" size="24px" />
+    </template>
+  </t-navbar>
+
+  <t-navbar :fixed="false" left-arrow class="custom-navbar">
+    <template #right>
+      <t-icon name="home" size="24px" />
+      <t-icon name="ellipsis" size="24px" />
+    </template>
+  </t-navbar>
+  <div class="header-title">大尺寸标题</div>
+</template>
+
+<script lang="ts" setup>
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+</script>
+
+<style lang="less" scoped>
+.t-navbar {
+  margin-bottom: 16px;
+}
+
+.custom-navbar {
+  margin: 0;
+}
+
+.header-title {
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.9);
+  padding: 0px 20px 16px;
+  background-color: #fff;
+}
+
+.t-icon-home {
+  margin-right: 8px;
+}
+</style>
diff --git a/src/navbar/navbar.en-US.md b/src/navbar/navbar.en-US.md
index d49ce9db..d14347f4 100644
--- a/src/navbar/navbar.en-US.md
+++ b/src/navbar/navbar.en-US.md
@@ -5,21 +5,21 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-animation | Boolean | true |【developing】 | N
-background | String | - | background | N
+animation | Boolean | true | \- | N
+capsule | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 fixed | Boolean | true | \- | N
-homeIcon | Boolean / Slot / Function | - | homeIcon。Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-leftIcon | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-rightIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-title | String / Slot / Function | - | page title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+left | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+leftArrow | Boolean | false | \- | N
+right | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+title | String / Slot / Function | - | page title。Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 titleMaxLength | Number | - | \- | N
 visible | Boolean | true | \- | N
-onLeftClick | Function |  | Typescript：`(trigger: NavBarTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/navbar/type.ts)。<br/>`type NavBarTrigger = 'home-icon' \| 'left-icon';`<br/> | N
-onRightClick | Function |  | Typescript：`() => void`<br/> | N
+onLeftClick | Function |  | Typescript：`() => void` | N
+onRightClick | Function |  | Typescript：`() => void` | N
 
 ### Navbar Events
 
 name | params | description
 -- | -- | --
-left-click | `(trigger: NavBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/navbar/type.ts)。<br/>`type NavBarTrigger = 'home-icon' \| 'left-icon';`<br/>
+left-click | \- | \-
 right-click | \- | \-
diff --git a/src/navbar/navbar.interface.ts b/src/navbar/navbar.interface.ts
deleted file mode 100644
index fcb152b6..00000000
--- a/src/navbar/navbar.interface.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export interface DNavbarProps {
-  title?: string;
-  maxLen?: number;
-  leftArrow?: boolean;
-}
-
-export const NavbarProps = {
-  /**
-   * @description 是否展示左侧箭头
-   * @property leftArrow
-   */
-  leftArrow: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * @description 标题
-   * @property title
-   */
-  title: {
-    type: String,
-    default: 'NavBar 导航条',
-  },
-  /**
-   * @description 标题最大长度
-   * @property maxLen
-   */
-  maxLen: {
-    type: Number,
-    default: 6,
-  },
-  /**
-   * @description 展示更多按钮
-   * @property rightMore
-   */
-  rightShow: {
-    type: Boolean,
-    default: true,
-  },
-};
diff --git a/src/navbar/navbar.md b/src/navbar/navbar.md
index b04106fe..5e0bf140 100644
--- a/src/navbar/navbar.md
+++ b/src/navbar/navbar.md
@@ -5,21 +5,21 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-animation | Boolean | true | 【开发中】是否添加动画效果 | N
-background | String | - | 背景 | N
+animation | Boolean | true | 是否添加动画效果 | N
+capsule | Slot / Function | - | 左侧胶囊区域。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 fixed | Boolean | true | 是否固定在顶部 | N
-homeIcon | Boolean / Slot / Function | - | 首页图标。值为 true 表示显示默认返回图标，值为 false 表示不显示首页图标，值为其他表示自定义图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-leftIcon | Boolean / Slot / Function | false | 左侧图标。值为 true 表示显示默认返回图标，值为 false 表示不显示左侧图标，值为其他表示自定义图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-rightIcon | Slot / Function | - | 右侧图标，可自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-title | String / Slot / Function | - | 页面标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+left | Slot / Function | - | 左侧区域。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+leftArrow | Boolean | false | 是否展示左侧箭头 | N
+right | Slot / Function | - | 右侧区域。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+title | String / Slot / Function | - | 页面标题。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 titleMaxLength | Number | - | 标题文字最大长度，超出的范围使用 `...` 表示 | N
 visible | Boolean | true | 是否显示 | N
-onLeftClick | Function |  | TS 类型：`(trigger: NavBarTrigger) => void`<br/>点击左侧按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/navbar/type.ts)。<br/>`type NavBarTrigger = 'home-icon' \| 'left-icon';`<br/> | N
+onLeftClick | Function |  | TS 类型：`() => void`<br/>点击左侧按钮时触发 | N
 onRightClick | Function |  | TS 类型：`() => void`<br/>点击右侧图标时触发 | N
 
 ### Navbar Events
 
 名称 | 参数 | 描述
 -- | -- | --
-left-click | `(trigger: NavBarTrigger)` | 点击左侧按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/navbar/type.ts)。<br/>`type NavBarTrigger = 'home-icon' \| 'left-icon';`<br/>
+left-click | \- | 点击左侧按钮时触发
 right-click | \- | 点击右侧图标时触发
diff --git a/src/navbar/navbar.vue b/src/navbar/navbar.vue
index 52ffc67e..4c682dc4 100644
--- a/src/navbar/navbar.vue
+++ b/src/navbar/navbar.vue
@@ -1,28 +1,28 @@
 <template>
-  <div v-show="visible" :class="name" :style="`${navStyle}`">
-    <div v-if="homeContent || leftContent" :class="`${name}__back`">
-      <span v-if="leftIcon === true" :class="`${name}__back--arrow`" @click="handleLeftClick">
-        <t-chevron-left-icon />
-      </span>
-      <span v-if="homeIcon === true" :class="`${name}__back--arrow`">
-        <t-home-icon />
-      </span>
-      <t-node :content="homeContent"></t-node>
-      <t-node :content="leftContent"></t-node>
-    </div>
-
-    <div :class="`${name}__text`">
-      <t-node :content="titleContent"></t-node>
-    </div>
-
-    <div :class="`${name}__right`" @click="handleRightClick">
-      <t-node :content="rightContent"></t-node>
+  <div :class="navClass" :style="`${navStyle}`">
+    <div v-if="fixed" :class="`${name}____placeholder`"></div>
+    <div :class="`${name}__content`">
+      <div ref="navLeft" :class="`${name}__left`" @click="handleLeftClick">
+        <t-chevron-left-icon v-if="leftArrow" :class="`${name}__left-arrow`" />
+        <t-node :content="leftContent"></t-node>
+        <div v-if="capsuleContent" :class="`${name}__capsule`">
+          <t-node :content="capsuleContent"></t-node>
+        </div>
+      </div>
+      <div :class="`${name}__center`">
+        <span v-if="isStringTitle" :class="`${name}__center-title`">{{ titleContent }}</span>
+        <t-node v-else :content="titleContent"></t-node>
+      </div>
+      <div ref="navRight" :class="`${name}__right`" @click="handleRightClick">
+        <t-node :content="rightContent"></t-node>
+      </div>
     </div>
   </div>
 </template>
+
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, toRefs } from 'vue';
-import { ChevronLeftIcon as TChevronLeftIcon, HomeIcon as THomeIcon } from 'tdesign-icons-vue-next';
+import { computed, defineComponent, getCurrentInstance, ref, toRefs } from 'vue';
+import { ChevronLeftIcon as TChevronLeftIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
 import { renderTNode, TNode, useEmitEvent } from '../shared';
 import NavbarProps from './props';
@@ -32,17 +32,38 @@ const name = `${prefix}-navbar`;
 
 export default defineComponent({
   name,
-  components: { TChevronLeftIcon, TNode, THomeIcon },
+  components: { TChevronLeftIcon, TNode },
   props: NavbarProps,
   emits: ['left-click', 'right-click'],
   setup(props, context) {
     const internalInstance = getCurrentInstance();
-    const { title, titleMaxLength, fixed, background } = toRefs(props);
+    const { title, titleMaxLength, fixed } = toRefs(props);
+    const navLeft = ref<HTMLDivElement>();
+    const navRight = ref<HTMLDivElement>();
+
+    const animationSuffix = props.animation ? '-animation' : '';
+    const navClass = computed(() => [
+      name,
+      {
+        [`${name}--fixed`]: props.fixed,
+      },
+      props.visible ? `${name}--visible${animationSuffix}` : `${name}--hide${animationSuffix}`,
+    ]);
+
+    // 计算左右区域的最大宽度
+    const navbarRight = computed(
+      () =>
+        Math.max(navLeft.value?.clientWidth ?? 0, navRight.value?.clientWidth ?? 0) + (navLeft.value?.offsetLeft ?? 0),
+    );
 
     const navStyle = computed(
-      () => `position: ${fixed.value ? 'fixed' : 'relative'}; background: ${background.value || ''};`,
+      () => `position: ${fixed.value ? 'fixed' : 'relative'};
+            --td-navbar-padding-top: 0px;
+            --td-navbar-right: ${navbarRight.value}px;`,
     );
 
+    const isStringTitle = typeof props.title === 'string' && !internalInstance?.slots.title;
+
     const titleContent = computed(() => {
       if (titleMaxLength.value != null && title.value) {
         if (titleMaxLength.value <= 0) {
@@ -57,9 +78,9 @@ export default defineComponent({
       return renderTNode(internalInstance, 'title');
     });
 
-    const leftContent = computed(() => renderTNode(internalInstance, 'left-icon'));
-    const rightContent = computed(() => renderTNode(internalInstance, 'right-icon'));
-    const homeContent = computed(() => renderTNode(internalInstance, 'home-icon'));
+    const leftContent = computed(() => renderTNode(internalInstance, 'left'));
+    const rightContent = computed(() => renderTNode(internalInstance, 'right'));
+    const capsuleContent = computed(() => renderTNode(internalInstance, 'capsule'));
 
     const emitEvent = useEmitEvent(props, context.emit);
 
@@ -73,11 +94,15 @@ export default defineComponent({
 
     return {
       name,
+      navLeft,
+      navRight,
+      isStringTitle,
       titleContent,
       leftContent,
       rightContent,
+      capsuleContent,
+      navClass,
       navStyle,
-      homeContent,
       handleLeftClick,
       handleRightClick,
     };
diff --git a/src/navbar/props.ts b/src/navbar/props.ts
index 346c2845..e717b333 100644
--- a/src/navbar/props.ts
+++ b/src/navbar/props.ts
@@ -13,28 +13,27 @@ export default {
     type: Boolean,
     default: true,
   },
-  /** 背景 */
-  background: {
-    type: String,
-    default: '',
+  /** 左侧胶囊区域 */
+  capsule: {
+    type: Function as PropType<TdNavbarProps['capsule']>,
   },
   /** 是否固定在顶部 */
   fixed: {
     type: Boolean,
     default: true,
   },
-  /** 首页图标。值为 true 表示显示默认返回图标，值为 false 表示不显示首页图标，值为其他表示自定义图标 */
-  homeIcon: {
-    type: [Boolean, Function] as PropType<TdNavbarProps['homeIcon']>,
+  /** 左侧区域 */
+  left: {
+    type: Function as PropType<TdNavbarProps['left']>,
   },
-  /** 左侧图标。值为 true 表示显示默认返回图标，值为 false 表示不显示左侧图标，值为其他表示自定义图标 */
-  leftIcon: {
-    type: [Boolean, Function] as PropType<TdNavbarProps['leftIcon']>,
+  /** 是否展示左侧箭头 */
+  leftArrow: {
+    type: Boolean,
     default: false,
   },
-  /** 右侧图标，可自定义 */
-  rightIcon: {
-    type: Function as PropType<TdNavbarProps['rightIcon']>,
+  /** 右侧区域 */
+  right: {
+    type: Function as PropType<TdNavbarProps['right']>,
   },
   /** 页面标题 */
   title: {
@@ -49,8 +48,8 @@ export default {
     type: Boolean,
     default: true,
   },
-  /** 点击左侧按钮时触发 */
+  /** 点击左侧区域时触发 */
   onLeftClick: Function as PropType<TdNavbarProps['onLeftClick']>,
-  /** 点击右侧图标时触发 */
+  /** 点击右侧区域时触发 */
   onRightClick: Function as PropType<TdNavbarProps['onRightClick']>,
 };
diff --git a/src/navbar/style/index.js b/src/navbar/style/index.js
index 0114dfd9..8501acc1 100644
--- a/src/navbar/style/index.js
+++ b/src/navbar/style/index.js
@@ -1,1 +1,1 @@
-import '../../_common/style/mobile/components/navbar/_index.less';
+import '../../_common/style/mobile/components/navbar/v2/_index.less';
diff --git a/src/navbar/type.ts b/src/navbar/type.ts
index 7a3fcb9a..a92b4974 100644
--- a/src/navbar/type.ts
+++ b/src/navbar/type.ts
@@ -13,28 +13,27 @@ export interface TdNavbarProps {
    */
   animation?: boolean;
   /**
-   * 背景
-   * @default ''
+   * 左侧胶囊区域
    */
-  background?: string;
+  capsule?: TNode;
   /**
    * 是否固定在顶部
    * @default true
    */
   fixed?: boolean;
   /**
-   * 首页图标。值为 true 表示显示默认返回图标，值为 false 表示不显示首页图标，值为其他表示自定义图标
+   * 左侧区域
    */
-  homeIcon?: boolean | TNode;
+  left?: TNode;
   /**
-   * 左侧图标。值为 true 表示显示默认返回图标，值为 false 表示不显示左侧图标，值为其他表示自定义图标
+   * 是否展示左侧箭头
    * @default false
    */
-  leftIcon?: boolean | TNode;
+  leftArrow?: boolean;
   /**
-   * 右侧图标，可自定义
+   * 右侧区域
    */
-  rightIcon?: TNode;
+  right?: TNode;
   /**
    * 页面标题
    */
@@ -49,13 +48,11 @@ export interface TdNavbarProps {
    */
   visible?: boolean;
   /**
-   * 点击左侧按钮时触发
+   * 点击左侧区域时触发
    */
-  onLeftClick?: (trigger: NavBarTrigger) => void;
+  onLeftClick?: () => void;
   /**
-   * 点击右侧图标时触发
+   * 点击右侧区域时触发
    */
   onRightClick?: () => void;
 }
-
-export type NavBarTrigger = 'home-icon' | 'left-icon';


Test patch:
diff --git a/src/avatar/__test__/index.test.jsx b/src/avatar/__test__/index.test.jsx
index 0c6db675..64ccb63a 100644
--- a/src/avatar/__test__/index.test.jsx
+++ b/src/avatar/__test__/index.test.jsx
@@ -51,17 +51,6 @@ describe('avatar', () => {
       expect(badge.text()).toBe('10');
     });
 
-    it(': onLoad', async () => {
-      const onLoad = vi.fn();
-      const wrapper = mount(() => <Avatar image={IMAGE} onLoad={onLoad} />);
-      expect(wrapper.classes()).toContain('t-avatar__wrapper');
-      const img = wrapper.find('img');
-      expect(img.exists()).toBeTruthy();
-      expect(img.attributes('src')).toBe(IMAGE);
-      await img.trigger('load');
-      expect(onLoad).toBeCalledTimes(1);
-    });
-
     it(': error', async () => {
       const onError = vi.fn();
       const wrapper = mount(() => <Avatar image={IMAGE_FAIL} alt="加载错误" onError={onError} />);
diff --git a/src/navbar/__test__/__snapshots__/demo.test.jsx.snap b/src/navbar/__test__/__snapshots__/demo.test.jsx.snap
index 0403881a..90ce3681 100644
--- a/src/navbar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/navbar/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,16 +2,221 @@
 
 exports[`Navbar > Navbar baseVue demo works fine 1`] = `
 <div
-  class="t-navbar"
+  data-v-app=""
 >
+  
   <div
-    class="t-navbar__back"
+    class="t-navbar t-navbar--visible-animation"
+    data-v-7388e034=""
+    style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
   >
-    <span
-      class="t-navbar__back--arrow"
+    <!--v-if-->
+    <div
+      class="t-navbar__content"
+    >
+      <div
+        class="t-navbar__left"
+      >
+        <svg
+          class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        <!---->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-navbar__center"
+      >
+        <span
+          class="t-navbar__center-title"
+        >
+          标题文字
+        </span>
+      </div>
+      <div
+        class="t-navbar__right"
+      >
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div
+    class="t-navbar t-navbar--visible-animation"
+    data-v-7388e034=""
+    style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+  >
+    <!--v-if-->
+    <div
+      class="t-navbar__content"
+    >
+      <div
+        class="t-navbar__left"
+      >
+        <svg
+          class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        
+        <svg
+          class="t-icon t-icon-close"
+          data-v-7388e034=""
+          style="font-size: 24px;"
+        >
+          <use
+            href="#t-icon-close"
+          />
+        </svg>
+        
+        <!--v-if-->
+      </div>
+      <div
+        class="t-navbar__center"
+      >
+        <span
+          class="t-navbar__center-title"
+        >
+          这是一个超长的标题文字也会自动省略
+        </span>
+      </div>
+      <div
+        class="t-navbar__right"
+      >
+        
+        <svg
+          class="t-icon t-icon-ellipsis"
+          data-v-7388e034=""
+          style="font-size: 24px;"
+        >
+          <use
+            href="#t-icon-ellipsis"
+          />
+        </svg>
+        
+      </div>
+    </div>
+  </div>
+  <div
+    class="t-navbar t-navbar--visible-animation"
+    data-v-7388e034=""
+    style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+  >
+    <!--v-if-->
+    <div
+      class="t-navbar__content"
+    >
+      <div
+        class="t-navbar__left"
+      >
+        <!--v-if-->
+        <!---->
+        <div
+          class="t-navbar__capsule"
+        >
+          
+          <div
+            class="custom-capsule"
+            data-v-7388e034=""
+          >
+            <svg
+              class="t-icon t-icon-chevron-left custom-capsule__icon"
+              data-v-7388e034=""
+              style="font-size: 20px;"
+            >
+              <use
+                href="#t-icon-chevron-left"
+              />
+            </svg>
+            <div
+              class="t-divider--vertical-center"
+              data-v-7388e034=""
+              role="separator"
+            >
+              <div
+                class="t-divider t-divider--vertical t-divider--center"
+              >
+                <div
+                  class="t-divider__content"
+                >
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <svg
+              class="t-icon t-icon-home custom-capsule__icon"
+              data-v-7388e034=""
+              style="font-size: 20px;"
+            >
+              <use
+                href="#t-icon-home"
+              />
+            </svg>
+          </div>
+          
+        </div>
+      </div>
+      <div
+        class="t-navbar__center"
+      >
+        <span
+          class="t-navbar__center-title"
+        >
+          只能显示五...
+        </span>
+      </div>
+      <div
+        class="t-navbar__right"
+      >
+        
+        <svg
+          class="t-icon t-icon-ellipsis"
+          data-v-7388e034=""
+          style="font-size: 24px;"
+        >
+          <use
+            href="#t-icon-ellipsis"
+          />
+        </svg>
+        
+      </div>
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`Navbar > Navbar customColorVue demo works fine 1`] = `
+<div
+  class="t-navbar t-navbar--visible-animation custom-navbar"
+  data-v-b4f331c8=""
+  style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+>
+  <!--v-if-->
+  <div
+    class="t-navbar__content"
+  >
+    <div
+      class="t-navbar__left"
     >
       <svg
-        class="t-icon t-icon-chevron-left"
+        class="t-icon t-icon-chevron-left t-navbar__left-arrow"
         fill="none"
         height="1em"
         viewBox="0 0 16 16"
@@ -23,72 +228,258 @@ exports[`Navbar > Navbar baseVue demo works fine 1`] = `
           fill-opacity="0.9"
         />
       </svg>
-    </span>
-    <!--v-if-->
-    <!---->
-    <!---->
-  </div>
-  <div
-    class="t-navbar__text"
-  >
-    标题
-  </div>
-  <div
-    class="t-navbar__right"
-  >
-    <!---->
+      <!---->
+      <!--v-if-->
+    </div>
+    <div
+      class="t-navbar__center"
+    >
+      <span
+        class="t-navbar__center-title"
+      >
+        标题文字
+      </span>
+    </div>
+    <div
+      class="t-navbar__right"
+    >
+      
+      <svg
+        class="t-icon t-icon-ellipsis"
+        data-v-b4f331c8=""
+        style="font-size: 24px;"
+      >
+        <use
+          href="#t-icon-ellipsis"
+        />
+      </svg>
+      
+    </div>
   </div>
 </div>
 `;
 
-exports[`Navbar > Navbar leftIconVue demo works fine 1`] = `
+exports[`Navbar > Navbar imgVue demo works fine 1`] = `
 <div
-  class="t-navbar"
+  class="t-navbar t-navbar--visible-animation"
+  data-v-0848b63e=""
+  style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
 >
+  <!--v-if-->
   <div
-    class="t-navbar__back"
+    class="t-navbar__content"
   >
-    <!--v-if-->
-    <!--v-if-->
-    <!---->
-    
-    <svg
-      class="t-icon t-icon-chevron-left btn-left"
-      style="font-size: 24px;"
+    <div
+      class="t-navbar__left"
+    >
+      <!--v-if-->
+      
+      <div
+        class="t-image t-image--square logo"
+        data-v-0848b63e=""
+      >
+        <div
+          class="t-image__mask"
+        >
+          <div
+            class="t-loading"
+            style="font-size: 20px;"
+          >
+            
+            <div
+              class="t-loading__dots"
+              style="animation-duration: 800ms; width: 20px; height: 20px;"
+            >
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+              />
+            </div>
+            
+            <!--v-if-->
+            <!---->
+          </div>
+        </div>
+        <picture>
+          <!--v-if-->
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/logo1.png"
+            style="object-fit: fill; object-position: center;"
+          />
+        </picture>
+      </div>
+      
+      <!--v-if-->
+    </div>
+    <div
+      class="t-navbar__center"
     >
-      <use
-        href="#t-icon-chevron-left"
-      />
-    </svg>
-    <svg
-      class="t-icon t-icon-close"
-      style="font-size: 24px;"
+      <!---->
+    </div>
+    <div
+      class="t-navbar__right"
     >
-      <use
-        href="#t-icon-close"
-      />
-    </svg>
-    
+      
+      <svg
+        class="t-icon t-icon-home"
+        data-v-0848b63e=""
+        style="font-size: 24px;"
+      >
+        <use
+          href="#t-icon-home"
+        />
+      </svg>
+      <svg
+        class="t-icon t-icon-ellipsis"
+        data-v-0848b63e=""
+        style="font-size: 24px;"
+      >
+        <use
+          href="#t-icon-ellipsis"
+        />
+      </svg>
+      
+    </div>
   </div>
+</div>
+`;
+
+exports[`Navbar > Navbar leftTitleVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
   <div
-    class="t-navbar__text"
+    class="t-navbar t-navbar--visible-animation"
+    data-v-63d9f832=""
+    style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
   >
-    标题
+    <!--v-if-->
+    <div
+      class="t-navbar__content"
+    >
+      <div
+        class="t-navbar__left"
+      >
+        <svg
+          class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        <!---->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-navbar__center"
+      >
+        <span
+          class="t-navbar__center-title"
+        >
+          标题居中
+        </span>
+      </div>
+      <div
+        class="t-navbar__right"
+      >
+        
+        <svg
+          class="t-icon t-icon-ellipsis"
+          data-v-63d9f832=""
+          style="font-size: 24px;"
+        >
+          <use
+            href="#t-icon-ellipsis"
+          />
+        </svg>
+        
+      </div>
+    </div>
   </div>
   <div
-    class="t-navbar__right"
+    class="t-navbar t-navbar--visible-animation"
+    data-v-63d9f832=""
+    style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
   >
-    
-    <svg
-      class="t-icon t-icon-ellipsis"
-      style="font-size: 24px;"
+    <!--v-if-->
+    <div
+      class="t-navbar__content"
     >
-      <use
-        href="#t-icon-ellipsis"
-      />
-    </svg>
-    
+      <div
+        class="t-navbar__left"
+      >
+        <svg
+          class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        
+        <span
+          class="custom-title"
+          data-v-63d9f832=""
+        >
+          标题左对齐
+        </span>
+        
+        <!--v-if-->
+      </div>
+      <div
+        class="t-navbar__center"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-navbar__right"
+      >
+        
+        <svg
+          class="t-icon t-icon-home"
+          data-v-63d9f832=""
+          style="font-size: 24px;"
+        >
+          <use
+            href="#t-icon-home"
+          />
+        </svg>
+        <svg
+          class="t-icon t-icon-ellipsis"
+          data-v-63d9f832=""
+          style="font-size: 24px;"
+        >
+          <use
+            href="#t-icon-ellipsis"
+          />
+        </svg>
+        
+      </div>
+    </div>
   </div>
+  
 </div>
 `;
 
@@ -119,7 +510,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        01 类型
+        01 组件类型
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
@@ -131,18 +522,21 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = `
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
       <div
-        class="t-navbar"
-        data-v-16defdf7=""
+        class="t-navbar t-navbar--visible-animation"
+        data-v-7388e034=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
       >
+        <!--v-if-->
         <div
-          class="t-navbar__back"
+          class="t-navbar__content"
         >
-          <span
-            class="t-navbar__back--arrow"
+          <div
+            class="t-navbar__left"
           >
             <svg
-              class="t-icon t-icon-chevron-left"
+              class="t-icon t-icon-chevron-left t-navbar__left-arrow"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
@@ -154,23 +548,176 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = `
                 fill-opacity="0.9"
               />
             </svg>
-          </span>
-          <!--v-if-->
-          <!---->
-          <!---->
+            <!---->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-navbar__center"
+          >
+            <span
+              class="t-navbar__center-title"
+            >
+              标题文字
+            </span>
+          </div>
+          <div
+            class="t-navbar__right"
+          >
+            <!---->
+          </div>
         </div>
+      </div>
+      <div
+        class="t-navbar t-navbar--visible-animation"
+        data-v-7388e034=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+      >
+        <!--v-if-->
         <div
-          class="t-navbar__text"
+          class="t-navbar__content"
         >
-          标题
+          <div
+            class="t-navbar__left"
+          >
+            <svg
+              class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+            
+            <svg
+              class="t-icon t-icon-close"
+              data-v-7388e034=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-close"
+              />
+            </svg>
+            
+            <!--v-if-->
+          </div>
+          <div
+            class="t-navbar__center"
+          >
+            <span
+              class="t-navbar__center-title"
+            >
+              这是一个超长的标题文字也会自动省略
+            </span>
+          </div>
+          <div
+            class="t-navbar__right"
+          >
+            
+            <svg
+              class="t-icon t-icon-ellipsis"
+              data-v-7388e034=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-ellipsis"
+              />
+            </svg>
+            
+          </div>
         </div>
+      </div>
+      <div
+        class="t-navbar t-navbar--visible-animation"
+        data-v-7388e034=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+      >
+        <!--v-if-->
         <div
-          class="t-navbar__right"
+          class="t-navbar__content"
         >
-          <!---->
+          <div
+            class="t-navbar__left"
+          >
+            <!--v-if-->
+            <!---->
+            <div
+              class="t-navbar__capsule"
+            >
+              
+              <div
+                class="custom-capsule"
+                data-v-7388e034=""
+              >
+                <svg
+                  class="t-icon t-icon-chevron-left custom-capsule__icon"
+                  data-v-7388e034=""
+                  style="font-size: 20px;"
+                >
+                  <use
+                    href="#t-icon-chevron-left"
+                  />
+                </svg>
+                <div
+                  class="t-divider--vertical-center"
+                  data-v-7388e034=""
+                  role="separator"
+                >
+                  <div
+                    class="t-divider t-divider--vertical t-divider--center"
+                  >
+                    <div
+                      class="t-divider__content"
+                    >
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <svg
+                  class="t-icon t-icon-home custom-capsule__icon"
+                  data-v-7388e034=""
+                  style="font-size: 20px;"
+                >
+                  <use
+                    href="#t-icon-home"
+                  />
+                </svg>
+              </div>
+              
+            </div>
+          </div>
+          <div
+            class="t-navbar__center"
+          >
+            <span
+              class="t-navbar__center-title"
+            >
+              只能显示五...
+            </span>
+          </div>
+          <div
+            class="t-navbar__right"
+          >
+            
+            <svg
+              class="t-icon t-icon-ellipsis"
+              data-v-7388e034=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-ellipsis"
+              />
+            </svg>
+            
+          </div>
         </div>
       </div>
       
+      
     </div>
   </div>
   <div
@@ -184,7 +731,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        左侧双操作导航栏
+        带搜索导航栏
       </p>
     </div>
     <div
@@ -192,52 +739,86 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="t-navbar"
+        class="t-navbar t-navbar--visible-animation"
         data-v-16defdf7=""
+        data-v-6af0dffd=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
       >
+        <!--v-if-->
         <div
-          class="t-navbar__back"
+          class="t-navbar__content"
         >
-          <!--v-if-->
-          <!--v-if-->
-          <!---->
-          
-          <svg
-            class="t-icon t-icon-chevron-left btn-left"
-            style="font-size: 24px;"
+          <div
+            class="t-navbar__left"
           >
-            <use
-              href="#t-icon-chevron-left"
-            />
-          </svg>
-          <svg
-            class="t-icon t-icon-close"
-            style="font-size: 24px;"
+            <!--v-if-->
+            
+            <div
+              class="t-search"
+              data-v-6af0dffd=""
+            >
+              <div
+                class="t-search__input-box t-search__input-box--round"
+              >
+                
+                <svg
+                  class="t-icon t-icon-search"
+                  fill="none"
+                  height="1em"
+                  style="font-size: 24px;"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M9.51 10.22a4.76 4.76 0 11.7-.7l3.54 3.52-.7.71-3.54-3.53zm.77-3.7a3.76 3.76 0 10-7.53 0 3.76 3.76 0 007.53 0z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+                
+                <input
+                  class="t-input__keyword"
+                  placeholder="搜索预设文案"
+                  type="search"
+                />
+                <!--v-if-->
+              </div>
+              
+              <!--v-if-->
+              
+            </div>
+            
+            <!--v-if-->
+          </div>
+          <div
+            class="t-navbar__center"
           >
-            <use
-              href="#t-icon-close"
-            />
-          </svg>
-          
-        </div>
-        <div
-          class="t-navbar__text"
-        >
-          标题
-        </div>
-        <div
-          class="t-navbar__right"
-        >
-          
-          <svg
-            class="t-icon t-icon-ellipsis"
-            style="font-size: 24px;"
+            <!---->
+          </div>
+          <div
+            class="t-navbar__right"
           >
-            <use
-              href="#t-icon-ellipsis"
-            />
-          </svg>
-          
+            
+            <svg
+              class="t-icon t-icon-home"
+              data-v-6af0dffd=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-home"
+              />
+            </svg>
+            <svg
+              class="t-icon t-icon-ellipsis"
+              data-v-6af0dffd=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-ellipsis"
+              />
+            </svg>
+            
+          </div>
         </div>
       </div>
       
@@ -254,7 +835,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        右侧双操作导航栏
+        带图片导航栏
       </p>
     </div>
     <div
@@ -262,121 +843,678 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="t-navbar"
+        class="t-navbar t-navbar--visible-animation"
+        data-v-0848b63e=""
         data-v-16defdf7=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
       >
+        <!--v-if-->
         <div
-          class="t-navbar__back"
+          class="t-navbar__content"
         >
-          <span
-            class="t-navbar__back--arrow"
+          <div
+            class="t-navbar__left"
           >
-            <svg
-              class="t-icon t-icon-chevron-left"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+            <!--v-if-->
+            
+            <div
+              class="t-image t-image--square logo"
+              data-v-0848b63e=""
             >
-              <path
+              <div
+                class="t-image__mask"
+              >
+                <div
+                  class="t-loading"
+                  style="font-size: 20px;"
+                >
+                  
+                  <div
+                    class="t-loading__dots"
+                    style="animation-duration: 800ms; width: 20px; height: 20px;"
+                  >
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                    />
+                  </div>
+                  
+                  <!--v-if-->
+                  <!---->
+                </div>
+              </div>
+              <picture>
+                <!--v-if-->
+                <img
+                  alt=""
+                  class="t-image__img"
+                  src="https://tdesign.gtimg.com/mobile/demos/logo1.png"
+                  style="object-fit: fill; object-position: center;"
+                />
+              </picture>
+            </div>
+            
+            <!--v-if-->
+          </div>
+          <div
+            class="t-navbar__center"
+          >
+            <!---->
+          </div>
+          <div
+            class="t-navbar__right"
+          >
+            
+            <svg
+              class="t-icon t-icon-home"
+              data-v-0848b63e=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-home"
+              />
+            </svg>
+            <svg
+              class="t-icon t-icon-ellipsis"
+              data-v-0848b63e=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-ellipsis"
+              />
+            </svg>
+            
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-16defdf7=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        02 组件样式
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        标题对齐
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="t-navbar t-navbar--visible-animation"
+        data-v-63d9f832=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+      >
+        <!--v-if-->
+        <div
+          class="t-navbar__content"
+        >
+          <div
+            class="t-navbar__left"
+          >
+            <svg
+              class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
                 d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
-          </span>
-          <!--v-if-->
-          <!---->
-          <!---->
+            <!---->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-navbar__center"
+          >
+            <span
+              class="t-navbar__center-title"
+            >
+              标题居中
+            </span>
+          </div>
+          <div
+            class="t-navbar__right"
+          >
+            
+            <svg
+              class="t-icon t-icon-ellipsis"
+              data-v-63d9f832=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-ellipsis"
+              />
+            </svg>
+            
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-navbar t-navbar--visible-animation"
+        data-v-63d9f832=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+      >
+        <!--v-if-->
+        <div
+          class="t-navbar__content"
+        >
+          <div
+            class="t-navbar__left"
+          >
+            <svg
+              class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+            
+            <span
+              class="custom-title"
+              data-v-63d9f832=""
+            >
+              标题左对齐
+            </span>
+            
+            <!--v-if-->
+          </div>
+          <div
+            class="t-navbar__center"
+          >
+            <!---->
+          </div>
+          <div
+            class="t-navbar__right"
+          >
+            
+            <svg
+              class="t-icon t-icon-home"
+              data-v-63d9f832=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-home"
+              />
+            </svg>
+            <svg
+              class="t-icon t-icon-ellipsis"
+              data-v-63d9f832=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-ellipsis"
+              />
+            </svg>
+            
+          </div>
         </div>
+      </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-16defdf7=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        标题尺寸
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="t-navbar t-navbar--visible-animation"
+        data-v-5f535116=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+      >
+        <!--v-if-->
         <div
-          class="t-navbar__text"
+          class="t-navbar__content"
         >
-          标题
+          <div
+            class="t-navbar__left"
+          >
+            <svg
+              class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+            <!---->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-navbar__center"
+          >
+            <span
+              class="t-navbar__center-title"
+            >
+              标题文字
+            </span>
+          </div>
+          <div
+            class="t-navbar__right"
+          >
+            
+            <svg
+              class="t-icon t-icon-ellipsis"
+              data-v-5f535116=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-ellipsis"
+              />
+            </svg>
+            
+          </div>
         </div>
+      </div>
+      <div
+        class="t-navbar t-navbar--visible-animation custom-navbar"
+        data-v-5f535116=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+      >
+        <!--v-if-->
         <div
-          class="t-navbar__right"
+          class="t-navbar__content"
         >
-          
-          <svg
-            class="t-icon t-icon-notification btn-left"
-            style="font-size: 24px;"
+          <div
+            class="t-navbar__left"
           >
-            <use
-              href="#t-icon-notification"
-            />
-          </svg>
+            <svg
+              class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+            <!---->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-navbar__center"
+          >
+            <!---->
+          </div>
+          <div
+            class="t-navbar__right"
+          >
+            
+            <svg
+              class="t-icon t-icon-home"
+              data-v-5f535116=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-home"
+              />
+            </svg>
+            <svg
+              class="t-icon t-icon-ellipsis"
+              data-v-5f535116=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-ellipsis"
+              />
+            </svg>
+            
+          </div>
+        </div>
+      </div>
+      <div
+        class="header-title"
+        data-v-5f535116=""
+      >
+        大尺寸标题
+      </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-16defdf7=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        自定义颜色
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="t-navbar t-navbar--visible-animation custom-navbar"
+        data-v-16defdf7=""
+        data-v-b4f331c8=""
+        style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+      >
+        <!--v-if-->
+        <div
+          class="t-navbar__content"
+        >
+          <div
+            class="t-navbar__left"
+          >
+            <svg
+              class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+            <!---->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-navbar__center"
+          >
+            <span
+              class="t-navbar__center-title"
+            >
+              标题文字
+            </span>
+          </div>
+          <div
+            class="t-navbar__right"
+          >
+            
+            <svg
+              class="t-icon t-icon-ellipsis"
+              data-v-b4f331c8=""
+              style="font-size: 24px;"
+            >
+              <use
+                href="#t-icon-ellipsis"
+              />
+            </svg>
+            
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Navbar > Navbar searchVue demo works fine 1`] = `
+<div
+  class="t-navbar t-navbar--visible-animation"
+  data-v-6af0dffd=""
+  style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+>
+  <!--v-if-->
+  <div
+    class="t-navbar__content"
+  >
+    <div
+      class="t-navbar__left"
+    >
+      <!--v-if-->
+      
+      <div
+        class="t-search"
+        data-v-6af0dffd=""
+      >
+        <div
+          class="t-search__input-box t-search__input-box--round"
+        >
+          
           <svg
-            class="t-icon t-icon-ellipsis"
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
             style="font-size: 24px;"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <use
-              href="#t-icon-ellipsis"
+            <path
+              d="M9.51 10.22a4.76 4.76 0 11.7-.7l3.54 3.52-.7.71-3.54-3.53zm.77-3.7a3.76 3.76 0 10-7.53 0 3.76 3.76 0 007.53 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
             />
           </svg>
           
+          <input
+            class="t-input__keyword"
+            placeholder="搜索预设文案"
+            type="search"
+          />
+          <!--v-if-->
         </div>
+        
+        <!--v-if-->
+        
       </div>
       
+      <!--v-if-->
+    </div>
+    <div
+      class="t-navbar__center"
+    >
+      <!---->
+    </div>
+    <div
+      class="t-navbar__right"
+    >
+      
+      <svg
+        class="t-icon t-icon-home"
+        data-v-6af0dffd=""
+        style="font-size: 24px;"
+      >
+        <use
+          href="#t-icon-home"
+        />
+      </svg>
+      <svg
+        class="t-icon t-icon-ellipsis"
+        data-v-6af0dffd=""
+        style="font-size: 24px;"
+      >
+        <use
+          href="#t-icon-ellipsis"
+        />
+      </svg>
+      
     </div>
   </div>
 </div>
 `;
 
-exports[`Navbar > Navbar rightIconVue demo works fine 1`] = `
+exports[`Navbar > Navbar sizeVue demo works fine 1`] = `
 <div
-  class="t-navbar"
+  data-v-app=""
 >
+  
   <div
-    class="t-navbar__back"
+    class="t-navbar t-navbar--visible-animation"
+    data-v-5f535116=""
+    style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
   >
-    <span
-      class="t-navbar__back--arrow"
+    <!--v-if-->
+    <div
+      class="t-navbar__content"
     >
-      <svg
-        class="t-icon t-icon-chevron-left"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
+      <div
+        class="t-navbar__left"
       >
-        <path
-          d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-    </span>
-    <!--v-if-->
-    <!---->
-    <!---->
+        <svg
+          class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        <!---->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-navbar__center"
+      >
+        <span
+          class="t-navbar__center-title"
+        >
+          标题文字
+        </span>
+      </div>
+      <div
+        class="t-navbar__right"
+      >
+        
+        <svg
+          class="t-icon t-icon-ellipsis"
+          data-v-5f535116=""
+          style="font-size: 24px;"
+        >
+          <use
+            href="#t-icon-ellipsis"
+          />
+        </svg>
+        
+      </div>
+    </div>
   </div>
   <div
-    class="t-navbar__text"
+    class="t-navbar t-navbar--visible-animation custom-navbar"
+    data-v-5f535116=""
+    style="position: relative; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
   >
-    标题
+    <!--v-if-->
+    <div
+      class="t-navbar__content"
+    >
+      <div
+        class="t-navbar__left"
+      >
+        <svg
+          class="t-icon t-icon-chevron-left t-navbar__left-arrow"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        <!---->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-navbar__center"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-navbar__right"
+      >
+        
+        <svg
+          class="t-icon t-icon-home"
+          data-v-5f535116=""
+          style="font-size: 24px;"
+        >
+          <use
+            href="#t-icon-home"
+          />
+        </svg>
+        <svg
+          class="t-icon t-icon-ellipsis"
+          data-v-5f535116=""
+          style="font-size: 24px;"
+        >
+          <use
+            href="#t-icon-ellipsis"
+          />
+        </svg>
+        
+      </div>
+    </div>
   </div>
   <div
-    class="t-navbar__right"
+    class="header-title"
+    data-v-5f535116=""
   >
-    
-    <svg
-      class="t-icon t-icon-notification btn-left"
-      style="font-size: 24px;"
-    >
-      <use
-        href="#t-icon-notification"
-      />
-    </svg>
-    <svg
-      class="t-icon t-icon-ellipsis"
-      style="font-size: 24px;"
-    >
-      <use
-        href="#t-icon-ellipsis"
-      />
-    </svg>
-    
+    大尺寸标题
   </div>
+  
 </div>
 `;
diff --git a/src/navbar/__test__/__snapshots__/index.test.jsx.snap b/src/navbar/__test__/__snapshots__/index.test.jsx.snap
index d4be50c3..5c1858c4 100644
--- a/src/navbar/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/navbar/__test__/__snapshots__/index.test.jsx.snap
@@ -1,33 +1,101 @@
 // Vitest Snapshot v1
 
-exports[`navbar > events > : right-click 1`] = `
+exports[`navbar > events > left-click 1`] = `
 <div
-  class="t-navbar"
+  class="t-navbar t-navbar--fixed t-navbar--visible-animation"
+  style="position: fixed; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
 >
-  <!--v-if-->
   <div
-    class="t-navbar__text"
+    class="t-navbar____placeholder"
+  />
+  <div
+    class="t-navbar__content"
   >
-    标题
+    <div
+      class="t-navbar__left"
+    >
+      <!--v-if-->
+      
+      <svg
+        class="t-icon t-icon-app"
+        fill="none"
+        height="1em"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </svg>
+      
+      <!--v-if-->
+    </div>
+    <div
+      class="t-navbar__center"
+    >
+      <span
+        class="t-navbar__center-title"
+      >
+        标题
+      </span>
+    </div>
+    <div
+      class="t-navbar__right"
+    >
+      <!---->
+    </div>
   </div>
+</div>
+`;
+
+exports[`navbar > events > right-click 1`] = `
+<div
+  class="t-navbar t-navbar--fixed t-navbar--visible-animation"
+  style="position: fixed; --td-navbar-padding-top: 0px; --td-navbar-right: 0px;"
+>
   <div
-    class="t-navbar__right"
+    class="t-navbar____placeholder"
+  />
+  <div
+    class="t-navbar__content"
   >
-    
-    <svg
-      class="t-icon t-icon-app"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
+    <div
+      class="t-navbar__left"
+    >
+      <!--v-if-->
+      <!---->
+      <!--v-if-->
+    </div>
+    <div
+      class="t-navbar__center"
+    >
+      <span
+        class="t-navbar__center-title"
+      >
+        标题
+      </span>
+    </div>
+    <div
+      class="t-navbar__right"
     >
-      <path
-        d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
+      
+      <svg
+        class="t-icon t-icon-app"
+        fill="none"
+        height="1em"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </svg>
+      
+    </div>
   </div>
 </div>
 `;
diff --git a/src/navbar/__test__/demo.test.jsx b/src/navbar/__test__/demo.test.jsx
index 4ef34268..a8c83ad8 100644
--- a/src/navbar/__test__/demo.test.jsx
+++ b/src/navbar/__test__/demo.test.jsx
@@ -4,15 +4,21 @@
 
 import { mount } from '@vue/test-utils';
 import baseVue from '@/navbar/demos/base.vue';
-import leftIconVue from '@/navbar/demos/left-icon.vue';
+import customColorVue from '@/navbar/demos/custom-color.vue';
+import imgVue from '@/navbar/demos/img.vue';
+import leftTitleVue from '@/navbar/demos/left-title.vue';
 import mobileVue from '@/navbar/demos/mobile.vue';
-import rightIconVue from '@/navbar/demos/right-icon.vue';
+import searchVue from '@/navbar/demos/search.vue';
+import sizeVue from '@/navbar/demos/size.vue';
 
 const mapper = {
   baseVue,
-  leftIconVue,
+  customColorVue,
+  imgVue,
+  leftTitleVue,
   mobileVue,
-  rightIconVue,
+  searchVue,
+  sizeVue,
 };
 
 describe('Navbar', () => {
diff --git a/src/navbar/__test__/index.test.jsx b/src/navbar/__test__/index.test.jsx
index ca342052..a759ee30 100644
--- a/src/navbar/__test__/index.test.jsx
+++ b/src/navbar/__test__/index.test.jsx
@@ -15,19 +15,9 @@ describe('navbar', () => {
       expect(navbar.vm.navStyle).toContain('position: relative');
     });
 
-    it('background', () => {
-      const navbar = mount(<NavBar background="red" />);
-      expect(navbar.vm.navStyle).toContain('background: red');
-    });
-
-    it('homeIcon', () => {
-      const navbar = mount(<NavBar title="标题" homeIcon />);
-      expect(navbar.find('.t-icon-home').exists()).toBeTruthy();
-    });
-
-    it('leftIcon', () => {
-      const navbar = mount(<NavBar title="标题" leftIcon />);
-      expect(navbar.find('.t-icon-chevron-left').exists()).toBeTruthy();
+    it('leftArrow', () => {
+      const navbar = mount(<NavBar title="标题" leftArrow />);
+      expect(navbar.find('.t-navbar__left-arrow').exists()).toBeTruthy();
     });
 
     it('title', () => {
@@ -45,103 +35,114 @@ describe('navbar', () => {
       expect(navbar.text()).toContain('测试标题');
     });
 
-    it('visible', () => {
+    it('visible-animation', () => {
       const navbar = mount(<NavBar title="标题" visible={false} />);
-      expect(navbar.isVisible()).toBe(false);
+      const el = navbar.element;
+      expect(el.className).toContain('t-navbar--hide-animation');
+    });
+
+    it('visible', () => {
+      const navbar = mount(<NavBar title="标题" visible={false} animation={false} />);
+      const el = navbar.element;
+      expect(el.className).toContain('t-navbar--hide');
     });
   });
 
   describe('events', () => {
     it('left-click', async () => {
       const fn = vi.fn();
-      const navbar = mount(<NavBar title="标题" leftIcon onLeftClick={fn} />);
-      await navbar.find('.t-icon-chevron-left').trigger('click');
+      const wrapper = mount(<NavBar title="标题" onLeftClick={fn} />, {
+        // 插槽名称必须要和组件内部保持一致'left'
+        slots: {
+          'left': iconFunc,
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+      expect(wrapper.findComponent(TIconApp).exists()).toBeTruthy();
+      const left = wrapper.find('.t-navbar__left');
+      await left.trigger('click');
       expect(fn).toHaveBeenCalled();
     });
 
-    it(': right-click', async () => {
+    it('right-click', async () => {
       const fn = vi.fn();
       const wrapper = mount(<NavBar title="标题" onRightClick={fn} />, {
-        // 插槽名称必须要和组件内部保持一致'right-icon'
+        // 插槽名称必须要和组件内部保持一致'right'
         slots: {
-          'right-icon': iconFunc,
+          'right': iconFunc,
         },
       });
       expect(wrapper.element).toMatchSnapshot();
       expect(wrapper.findComponent(TIconApp).exists()).toBeTruthy();
-      const rightIcon = wrapper.find('.t-navbar__right');
-      await rightIcon.trigger('click');
+      const right = wrapper.find('.t-navbar__right');
+      await right.trigger('click');
       expect(fn).toHaveBeenCalled();
     });
   });
 
   describe('functions', () => {
-    it('homeIcon', () => {
-      const test = () => '测试';
-      const navbar = mount(<NavBar title="标题" homeIcon={test} />);
-      expect(navbar.text()).toContain('测试');
-      expect(navbar.find('.t-icon-home').exists()).toBeFalsy();
+    it('left', () => {
+      const test = () => '左侧内容';
+      const navbar = mount(<NavBar title="标题" left={test} />);
+      expect(navbar.text()).toContain('左侧内容');
     });
 
-    it('leftIcon', () => {
-      const test = () => '测试';
-      const navbar = mount(<NavBar title="标题" leftIcon={test} />);
-      expect(navbar.text()).toContain('测试');
-      expect(navbar.find('.t-icon-chevron-left').exists()).toBeFalsy();
+    it('capsule', () => {
+      const navbar = mount(<NavBar title="标题" capsule={iconFunc} />);
+      expect(navbar.find('.t-icon-app').exists()).toBeTruthy();
     });
 
-    it('rightIcon', () => {
-      const test = () => '测试';
-      const navbar = mount(<NavBar title="标题" rightIcon={test} />);
-      expect(navbar.text()).toContain('测试');
+    it('right', () => {
+      const test = () => '右侧内容';
+      const navbar = mount(<NavBar title="标题" right={test} />);
+      expect(navbar.text()).toContain('右侧内容');
     });
 
     it('title', () => {
-      const test = () => '测试';
+      const test = () => '标题';
       const navbar = mount(<NavBar title={test} />);
-      expect(navbar.text()).toContain('测试');
+      expect(navbar.text()).toContain('标题');
     });
   });
 
   describe('slots', () => {
-    it('homeIcon', () => {
-      const slot = <div>测试</div>;
+    it('left', () => {
+      const slot = <div className='left-content'>左侧内容</div>;
       const navbar = mount(<NavBar title="标题" />, {
         slots: {
-          'home-icon': slot,
+          'left': slot,
         },
       });
-      expect(navbar.text()).toContain('测试');
+      expect(navbar.find('.t-navbar__left').find('.left-content').exists()).toBeTruthy();
     });
 
-    it('leftIcon', () => {
-      const slot = <div>测试</div>;
+    it('capsule', () => {
       const navbar = mount(<NavBar title="标题" />, {
         slots: {
-          'left-icon': slot,
+          'capsule': iconFunc,
         },
       });
-      expect(navbar.text()).toContain('测试');
+      expect(navbar.find('.t-navbar__capsule').exists()).toBeTruthy();
     });
 
-    it('rightIcon', () => {
-      const slot = <div>测试</div>;
+    it('right', () => {
+      const slot = <div className='right-content'>右侧内容</div>;
       const navbar = mount(<NavBar title="标题" />, {
         slots: {
-          'right-icon': slot,
+          'right': slot,
         },
       });
-      expect(navbar.text()).toContain('测试');
+      expect(navbar.find('.t-navbar__right').find('.right-content').exists()).toBeTruthy();
     });
 
     it('title', () => {
-      const slot = <div>测试</div>;
+      const slot = <div>标题</div>;
       const navbar = mount(<NavBar />, {
         slots: {
           title: slot,
         },
       });
-      expect(navbar.text()).toContain('测试');
+      expect(navbar.text()).toContain('标题');
     });
   });
 });