feat: navbar在线文档接入和国际化支持 (#171)

* feat: popup在线文档接入和国际化支持

* feat: navbar在线文档接入和国际化支持

src/packages/navbar/demo.tsx

 import React from 'react'
 import { NavBar } from './navbar'
+import { useTranslate } from '../../sites/assets/locale'
+
+interface T {
+  ce5c5446: string
+  c38a08ef: string
+  b840c88f: string
+  a74a1fd4: string
+  '8dab2f66': string
+  cfbdc781: string
+  c3a3a1d2: string
+  e51e4582: string
+}
 
 const NavBarDemo = () => {
+  const [translated] = useTranslate<T>({
+    'zh-CN': {
+      ce5c5446: '基础用法',
+      c38a08ef: '订单详情',
+      b840c88f: '标题',
+      a74a1fd4: '返回',
+      '8dab2f66': '编辑',
+      cfbdc781: '清空',
+      c3a3a1d2: '购物车',
+      e51e4582: '浏览记录',
+    },
+    'zh-TW': {
+      ce5c5446: '基礎用法',
+      c38a08ef: '訂單詳情',
+      b840c88f: '標題',
+      a74a1fd4: '返回',
+      '8dab2f66': '編輯',
+      cfbdc781: '清空',
+      c3a3a1d2: '購物車',
+      e51e4582: '瀏覽記錄',
+    },
+    'en-US': {
+      ce5c5446: 'Basic usage',
+      c38a08ef: 'order details',
+      b840c88f: 'title',
+      a74a1fd4: 'return',
+      '8dab2f66': 'edit',
+      cfbdc781: 'empty',
+      c3a3a1d2: 'shopping cart',
+      e51e4582: 'Browsing history',
+    },
+  })
   return (
     <>
       <div className="demo">
-        <h2>基础用法</h2>
+        <h2>{translated.ce5c5446}</h2>
         <NavBar
-          title="订单详情"
+          title={translated.c38a08ef}
           icon="share"
           leftShow
-          onClickTitle={(e) => alert('标题')}
-          onClickBack={(e) => alert('返回')}
+          onClickTitle={(e) => alert(translated.b840c88f)}
+          onClickBack={(e) => alert(translated.a74a1fd4)}
           onClickIcon={(e) => alert('icon')}
         />
         <NavBar
-          title="浏览记录"
-          desc="清空"
+          title={translated.e51e4582}
+          desc={translated.cfbdc781}
           leftShow
-          onClickTitle={(e) => alert('标题')}
-          onClickBack={(e) => alert('返回')}
-          onClickClear={(e) => alert('清空')}
+          onClickTitle={(e) => alert(translated.b840c88f)}
+          onClickBack={(e) => alert(translated.a74a1fd4)}
+          onClickClear={(e) => alert(translated.cfbdc781)}
         />
         <NavBar
-          title="购物车"
+          title={translated.c3a3a1d2}
           icon="more"
-          desc="编辑"
+          desc={translated['8dab2f66']}
           titIcon="locationg3"
-          onClickTitle={(e) => alert('标题')}
-          onClickBack={(e) => alert('返回')}
-          onClickClear={(e) => alert('编辑')}
+          onClickTitle={(e) => alert(translated.b840c88f)}
+          onClickBack={(e) => alert(translated.a74a1fd4)}
+          onClickClear={(e) => alert(translated['8dab2f66'])}
           onClickIcon={(e) => alert('icon')}
         />
       </div>

src/packages/navbar/doc.en-US.md

-# Navbar 头部导航
+# Navbar
 
-### 介绍 
+### introduce 
 
 
-提供导航功能。
+Provides navigation capabilities.
 
-### 安装
+### Install
 
 ```ts
 import { NavBar } from '@nutui/nutui-react';
 ```
 
-### 代码示例
+### code example
 
-### 基本用法
+### Basic usage
 
 :::demo
 ```tsx
@@ -24,11 +24,11 @@ const App = () => {
   return ( 
     <>   
     <NavBar
-      title="订单详情"
+      title="order details"
       icon="share"
       leftShow
-      onClickTitle={(e) => alert('标题')}
-      onClickBack={(e) => alert('返回')}
+      onClickTitle={(e) => alert('title')}
+      onClickBack={(e) => alert('back')}
       onClickIcon={(e) => alert('icon')}
      />
     </>
@@ -48,12 +48,12 @@ const App = () => {
   return ( 
     <>   
     <NavBar
-      title="浏览记录"
-      desc="清空"
+      title="Browsing history"
+      desc="clear"
       leftShow
-      onClickTitle={(e) => alert('标题')}
-      onClickBack={(e) => alert('返回')}
-      onClickClear={(e) => alert('清空')}
+      onClickTitle={(e) => alert('title')}
+      onClickBack={(e) => alert('back')}
+      onClickClear={(e) => alert('clear')}
      />
     </>
   );
@@ -72,13 +72,13 @@ const App = () => {
   return ( 
     <>   
     <NavBar
-      title="购物车"
+      title="cart"
       icon="more"
-      desc="编辑"
+      desc="edit"
       titIcon="locationg3"
-      onClickTitle={(e) => alert('标题')}
-      onClickBack={(e) => alert('返回')}
-      onClickClear={(e) => alert('编辑')}
+      onClickTitle={(e) => alert('title')}
+      onClickBack={(e) => alert('back')}
+      onClickClear={(e) => alert('edit')}
       onClickIcon={(e) => alert('icon')}
      />
     </>
@@ -91,18 +91,18 @@ export default App;
 
 ### Prop  
 
-| 字段            | 说明                                                                                           | 类型    | 默认值  |
+| Prop            | Description                                                                                           | Type    | Default  |
 |-----------------|------------------------------------------------------------------------------------------------|---------|---------|
-| title           | 标题名称                                                                                       | String  | -       |
-| desc            | 右侧描述                                                                                       | String  | -       |
-| leftShow        | 是否展示左侧箭头                                                                              | Boolean | false   |
-| icon            | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -       |
-| titIcon         | 标题带icon                                                         | String  | -       |                                          
+| title           | title name                                                                                       | String  | -       |
+| desc            | Description on the right                                                                                       | String  | -       |
+| leftShow        | Whether to show the left arrow                                                                              | Boolean | false   |
+| icon            | Left [icon name](#/icon) or image link                                                             | String  | -       |
+| titIcon         | title with icon                                                         | String  | -       |                                          
 
 ### Event
-| 名称  | 说明     | 回调参数    |
+| Event  | Description     | callback parameter    |
 |-------|----------|-------------|
-| onClickTitle | 点击页面标题事件 | event:Event |
-| onClickClear | 点击右侧文案事件 | event:Event |
-| onClickBack | 点击返回上一页事件 | event:Event |
-| onClickIcon | 点击右侧icon事件 | event:Event |
\ No newline at end of file
+| onClickTitle | Click page title event | event:Event |
+| onClickClear | Click on the copy event on the right | event:Event |
+| onClickBack | Click to return to previous page of events | event:Event |
+| onClickIcon | Click the right icon event | event:Event |
\ No newline at end of file

src/packages/navbar/doc.zh-TW.md

-# Navbar 头部导航
+# Navbar 頭部導航
 
-### 介绍 
+### 介紹 
 
 
-提供导航功能。
+提供導航功能。
 
-### 安装
+### 安裝
 
 ```ts
 import { NavBar } from '@nutui/nutui-react';
 ```
 
-### 代码示例
+### 代碼示例
 
 ### 基本用法
 
@@ -24,10 +24,10 @@ const App = () => {
   return ( 
     <>   
     <NavBar
-      title="订单详情"
+      title="訂單詳情"
       icon="share"
       leftShow
-      onClickTitle={(e) => alert('标题')}
+      onClickTitle={(e) => alert('標題')}
       onClickBack={(e) => alert('返回')}
       onClickIcon={(e) => alert('icon')}
      />
@@ -48,10 +48,10 @@ const App = () => {
   return ( 
     <>   
     <NavBar
-      title="浏览记录"
+      title="瀏覽記錄"
       desc="清空"
       leftShow
-      onClickTitle={(e) => alert('标题')}
+      onClickTitle={(e) => alert('標題')}
       onClickBack={(e) => alert('返回')}
       onClickClear={(e) => alert('清空')}
      />
@@ -72,13 +72,13 @@ const App = () => {
   return ( 
     <>   
     <NavBar
-      title="购物车"
+      title="購物車"
       icon="more"
-      desc="编辑"
+      desc="編輯"
       titIcon="locationg3"
-      onClickTitle={(e) => alert('标题')}
+      onClickTitle={(e) => alert('標題')}
       onClickBack={(e) => alert('返回')}
-      onClickClear={(e) => alert('编辑')}
+      onClickClear={(e) => alert('編輯')}
       onClickIcon={(e) => alert('icon')}
      />
     </>
@@ -91,18 +91,18 @@ export default App;
 
 ### Prop  
 
-| 字段            | 说明                                                                                           | 类型    | 默认值  |
+| 字段            | 說明                                                                                           | 類型    | 默認值  |
 |-----------------|------------------------------------------------------------------------------------------------|---------|---------|
-| title           | 标题名称                                                                                       | String  | -       |
-| desc            | 右侧描述                                                                                       | String  | -       |
-| leftShow        | 是否展示左侧箭头                                                                              | Boolean | false   |
-| icon            | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -       |
-| titIcon         | 标题带icon                                                         | String  | -       |                                          
+| title           | 標題名稱                                                                                       | String  | -       |
+| desc            | 右側描述                                                                                       | String  | -       |
+| leftShow        | 是否展示左側箭頭                                                                              | Boolean | false   |
+| icon            | 左側 [圖標名稱](#/icon) 或圖片鏈接                                                             | String  | -       |
+| titIcon         | 標題帶icon                                                         | String  | -       |                                          
 
 ### Event
-| 名称  | 说明     | 回调参数    |
+| 名稱  | 說明     | 回調參數    |
 |-------|----------|-------------|
-| onClickTitle | 点击页面标题事件 | event:Event |
-| onClickClear | 点击右侧文案事件 | event:Event |
-| onClickBack | 点击返回上一页事件 | event:Event |
-| onClickIcon | 点击右侧icon事件 | event:Event |
\ No newline at end of file
+| onClickTitle | 點擊頁面標題事件 | event:Event |
+| onClickClear | 點擊右側文案事件 | event:Event |
+| onClickBack | 點擊返回上一頁事件 | event:Event |
+| onClickIcon | 點擊右側icon事件 | event:Event |
\ No newline at end of file