@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/tree-menu/text-ellipsis.spec.ts

@@ -4,15 +4,18 @@ test('文字超长省略显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree-menu#text-ellipsis')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const wrap = page.locator('#text-ellipsis')
+  const treeMenu = wrap.locator('.tiny-tree-menu').nth(0)
+
   await expect(treeMenu.locator('.tiny-tree')).toHaveClass(/tiny-tree-menu__overflow/)
 })
 
 test('文字超长换行显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#text-wrap')
+  await page.goto('tree-menu#text-ellipsis')
+
+  const wrap = page.locator('#text-ellipsis')
+  const treeMenu = wrap.locator('.tiny-tree-menu').nth(1)
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
   await expect(treeMenu.locator('.tiny-tree')).toHaveClass(/tiny-tree-menu__wrap/)
 })
-

package/demos/pc/app/tree-menu/tree-menu-slot.spec.ts

@@ -4,9 +4,10 @@ test('插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree-menu#tree-menu-slot')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const treeMenu = page.locator('#tree-menu-slot .tiny-tree-menu')
+
   await expect(treeMenu.getByText('首页')).toHaveClass('treeClass')
   await expect(treeMenu.getByText('指南')).toHaveClass('treeNodeClass')
-  await expect(treeMenu.getByTitle('首页').locator('.tiny-svg')).toHaveCSS('margin-right', '4px')
-  await expect(treeMenu.getByTitle('教程').locator('.tiny-svg')).toHaveCSS('margin-left', '-20px')
+  await expect(treeMenu.getByTitle('首页').locator('.tiny-svg')).toHaveCSS('margin-left', '8px')
+  await expect(treeMenu.getByTitle('教程').locator('.tiny-svg')).toHaveCSS('margin-left', '8px')
 })

package/demos/pc/app/tree-menu/webdoc/tree-menu.cn.md

@@ -4,4 +4,4 @@ title: TreeMenu 树型菜单
 
 # TreeMenu 树型菜单
 
-> 以树形方式显示的菜单，适用于版型定制的一种组件。
+以树形方式显示的菜单，适用于版型定制的一种组件。

package/demos/pc/app/tree-menu/webdoc/tree-menu.en.md

@@ -4,4 +4,4 @@ title: TreeMenu
 
 # TreeMenu
 
-> The menu is displayed in tree mode and is applicable to a component of version customization.
+The menu is displayed in tree mode and is applicable to a component of version customization.

package/demos/pc/app/tree-menu/webdoc/tree-menu.js

@@ -6,8 +6,8 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>不配置数据源时，默认从框架服务读取数据。</p>\n',
-        'en-US': '<p>If no data is configured, data is read from the framework service by default. </p>\n'
+        'zh-CN': '<p>通过引用组件标签即可，默认从框架服务读取数据 。</p>\n',
+        'en-US': '<p>By referencing component labels, data is read from the framework service by default. </p>\n'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -294,7 +294,7 @@ export default {
     {
       'name': 'tree-menu',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'accordion',
           'type': 'boolean',

package/demos/pc/app/user-contact/webdoc/user-contact.js

@@ -5,7 +5,12 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN':
+          '通过<code>:data</code>设置数据源。<code>imgUrl:图片路径</code><code>userName:姓名</code><code>userDescription:用户描述</code>。',
+        'en-US':
+          'Set the data source through<code>: data</code>.<code>imgUrl:"Image URL"</code><code>userName:"Name"</code><code>userDescription: User Description</code>.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -13,9 +18,9 @@ export default {
       'name': { 'zh-CN': '设置数据源', 'en-US': 'Set Data Source' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>data</code> 设置数据源, <code>imgUrl</code> 表示的是图片路径, <code>userName</code> 表示的是姓名, <code>userDescription</code> 表示的是用户描述。</p>\n',
+          '<p>通过 <code>:data</code> 设置数据源, <code>imgUrl</code> 表示的是图片路径, <code>userName</code> 表示的是姓名, <code>userDescription</code> 表示的是用户描述。</p>\n',
         'en-US':
-          '<p>You can use <code>data</code> to set the data source. <code>imgUrl</code> indicates the image path, and <code>userName</code> indicates the name. <code>userDescription</code> indicates the user description. </p>\n'
+          '<p>Set the data source through<code>: data</code>. <code>imgUrl</code> indicates the image path, and <code>userName</code> indicates the name. <code>userDescription</code> indicates the user description. </p>\n'
       },
       'codeFiles': ['data-source.vue']
     },
@@ -27,16 +32,19 @@ export default {
       },
       'desc': {
         'zh-CN':
-          '<p>定制弹框不显示的内容\n<code>show-img</code> 是否显示头像,值为 true 时显示， false 隐藏,默认 true。\n<code>show-name</code> 是否显示名字,值为  true 时显示， false 隐藏,默认 true。\n<code>show-number</code> 是否显示用户账号,值为  true 时显示， false 隐藏,默认 true。</p>\n',
+          '<p>通过设置<code>show-img</code> 是否显示头像，<code>show-name</code> 是否显示名字,<code>show-number</code> 是否显示用户账号,默认值为<code>true</code>。</p>',
         'en-US':
-          '<p>Customize the content that is not displayed in the dialog box.\n<code>show-img</code>Indicates whether to display the avatar. The value true indicates that the avatar is displayed. The value false indicates that the avatar is hidden. The default value is true. \n<code>show-name</code> Indicates whether to display the name. The value true indicates that the name is displayed, and the value false indicates that the name is hidden. The default value is true. \n<code>show-number</code>Indicates whether to display the user account number. If the value is true, the user account number. is displayed. If the value is false, the user account number. is hidden. The default value is true. </p>\n'
+          '<p>By setting<code>show img</code>to display avatars,<code>show name</code>to display names, and<code>show number</code>to display user accounts, the default value is<code>true</code>.</p> '
       },
       'codeFiles': ['not-displayed-content.vue']
     },
     {
       'demoId': 'slots-usercontact',
       'name': { 'zh-CN': '自定义默认插槽', 'en-US': 'Customize the default slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过在组件内插入<code>div</code>元素即可。',
+        'en-US': 'You can insert the<code>div</code>element within the component.'
+      },
       'codeFiles': ['slots-usercontact.vue']
     }
   ],
@@ -44,12 +52,12 @@ export default {
     {
       'name': 'user-contact',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'data',
           'type': 'object',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置的数据;数据设置', 'en-US': 'Setted data; Data Settings' },
+          'desc': { 'zh-CN': '设置的数据', 'en-US': 'Setted data; Data Settings' },
           'demoId': 'data-source'
         },
         {
@@ -58,7 +66,7 @@ export default {
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN': '是否显示头像，默认 true',
-            'en-US': 'Indicates whether to display the avatar. The default value is true.'
+            'en-US': 'Indicates whether to display the avatar. The default value is true'
           },
           'demoId': 'not-displayed-content'
         },
@@ -68,7 +76,7 @@ export default {
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN': '是否显示姓名 userName,默认 true',
-            'en-US': 'Indicates whether to display userName. The default value is true.'
+            'en-US': 'Indicates whether to display userName. The default value is true'
           },
           'demoId': 'not-displayed-content'
         },
@@ -78,7 +86,7 @@ export default {
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN': '是否显示工号 roleNumber,默认 true',
-            'en-US': 'Indicates whether to display the employee ID roleNumber. The default value is true.'
+            'en-US': 'Indicates whether to display the employee ID roleNumber. The default value is true'
           },
           'demoId': 'not-displayed-content'
         },
@@ -88,7 +96,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
-            'en-US': 'Add a class name for the popper. For details, see the popover component.'
+            'en-US': 'Add a class name for the popper. For details, see the popover component'
           },
           'demoId': ''
         },
@@ -100,7 +108,7 @@ export default {
             'zh-CN':
               '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
             'en-US':
-              'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
+              'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component)'
           },
           'demoId': ''
         },

package/demos/pc/app/user-head/icon-user-head.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('图片头像', async ({ page }) => {
+test('图标头像', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('user-head#image-user-head')
-  const minBox = page.locator('.tiny-user-head__portrait')
+  await page.goto('user-head#icon-user-head')
+  const minBox = page.locator('.tiny-user-head > .tiny-user-head__portrait')
   await expect(minBox).toHaveCSS('background-image', 'none')
 })

package/demos/pc/app/user-head/image-user-head.spec.ts

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('图片头像', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('user-head#image-user-head')
-  const headImg = page.locator('.tiny-user-head')
-  await expect(headImg).toHaveAttribute('value', 'localhost:3000/webnova/static/img/compontent.b2f0f5b.png')
+  const minBox = page.locator('.tiny-user-head > .tiny-user-head__portrait')
+  await expect(minBox).toHaveCSS('color', 'rgb(255, 255, 255)')
 })

package/demos/pc/app/user-head/webdoc/user-head.js

@@ -5,14 +5,17 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过 <code>type="icon"</code> 设置头像。',
+        'en-US': 'Set a profile picture through<code>type="icon"</code>.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'min-user-head',
       'name': { 'zh-CN': '小头像', 'en-US': 'Avatar' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>min</code> 设置小头像。</p>\n',
+        'zh-CN': '<p>通过 <code>min</code> 设置小头像。</p>\n',
         'en-US': '<p>You can use <code>min</code> to set a small avatar. </p>\n'
       },
       'codeFiles': ['min-user-head.vue']
@@ -21,7 +24,7 @@ export default {
       'demoId': 'round-user-head',
       'name': { 'zh-CN': '圆形头像', 'en-US': 'Round Head' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>round</code> 设置圆形头像。</p>\n',
+        'zh-CN': '<p>通过 <code>round</code> 设置圆形头像。</p>\n',
         'en-US': '<p>You can use <code>round</code> to set a round avatar. </p>\n'
       },
       'codeFiles': ['round-user-head.vue']
@@ -30,7 +33,7 @@ export default {
       'demoId': 'label-user-head',
       'name': { 'zh-CN': '文字头像', 'en-US': 'Avatar' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>type=&quot;label&quot;</code> 设置文字头像。</p>\n',
+        'zh-CN': '<p>通过 <code>type=&quot;label&quot;</code> 设置文字头像。</p>\n',
         'en-US': '<p>You can use <code>type=&quot;label&quot;</code> to set the text avatar. </p>\n'
       },
       'codeFiles': ['label-user-head.vue']
@@ -39,7 +42,7 @@ export default {
       'demoId': 'icon-user-head',
       'name': { 'zh-CN': '图标头像', 'en-US': 'Icon avatar' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>type=&quot;icon&quot;</code> 设置图标头像。</p>\n',
+        'zh-CN': '<p>通过 <code>type=&quot;icon&quot;</code> 设置图标头像。</p>\n',
         'en-US': '<p>You can use <code>type=&quot;icon&quot;</code> to set the icon avatar. </p>\n'
       },
       'codeFiles': ['icon-user-head.vue']
@@ -48,7 +51,7 @@ export default {
       'demoId': 'image-user-head',
       'name': { 'zh-CN': '图片头像', 'en-US': 'Avatar' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>type=&quot;image&quot;</code> 设置图片头像。</p>\n',
+        'zh-CN': '<p>通过 <code>type=&quot;image&quot;</code> 设置图片头像。</p>\n',
         'en-US': '<p>You can use <code>type=&quot;image&quot;</code> to set the picture avatar. </p>\n'
       },
       'codeFiles': ['image-user-head.vue']
@@ -56,19 +59,28 @@ export default {
     {
       'demoId': 'message-count-total',
       'name': { 'zh-CN': '头像消息计数', 'en-US': 'Avatar Message Count' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>:message-total="100"</code>设置消息数据。',
+        'en-US': `Set message data through<code>message-total='100'</code>. `
+      },
       'codeFiles': ['message-count-total.vue']
     },
     {
       'demoId': 'message-count-type',
-      'name': { 'zh-CN': '使用小红点代替具体数值', 'en-US': 'Use a red dot instead of a specific value.' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': { 'zh-CN': '使用小红点代替具体数值', 'en-US': 'Use a red dot instead of a specific value' },
+      'desc': {
+        'zh-CN': '通过<code>:message-type="basic"</code>设置消息显示替代成小红点。',
+        'en-US': `Set the message display to be replaced with a small red dot through<code>message-type='basic'</code>.`
+      },
       'codeFiles': ['message-count-type.vue']
     },
     {
       'demoId': 'message-count-limit',
       'name': { 'zh-CN': '消息计数上限', 'en-US': 'Maximum number of messages' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>:message-upper-limit="99"</code>设置消息数据上限。',
+        'en-US': `Set the message data upper limit through<code>message-upper-limit='99'</code>.`
+      },
       'codeFiles': ['message-count-limit.vue']
     },
     {
@@ -76,7 +88,7 @@ export default {
       'name': { 'zh-CN': '自定义颜色', 'en-US': 'Custom Color' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>color</code> 自定义颜色，图标或文字类型（type属性值为 icon 或 label ）的情况下，设置字体颜色和背景色。</p>\n',
+          '<p>通过 <code>color</code> 自定义颜色，图标或文字类型（type属性值为 icon 或 label ）的情况下，设置字体颜色和背景色。</p>\n',
         'en-US':
           '<p>You can use <code>color</code> to customize the color. If the icon or text type is set to icon or label, set the font color and background color. </p>\n'
       },
@@ -86,7 +98,7 @@ export default {
       'demoId': 'custom-background-color',
       'name': { 'zh-CN': '自定义背景颜色', 'en-US': 'Custom background color' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>background-color</code> 自定义背景颜色。</p>\n',
+        'zh-CN': '<p>通过 <code>background-color</code> 自定义背景颜色。</p>\n',
         'en-US': '<p>You can use <code>background-color</code> to customize the background color. </p>\n'
       },
       'codeFiles': ['custom-background-color.vue']
@@ -103,7 +115,11 @@ export default {
     {
       'demoId': 'render-user-head-in-grid',
       'name': { 'zh-CN': 'Grid 单元格展示头像', 'en-US': 'Avatar Displayed in Grid Cells' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过Grid单元格属性<code>renderer</code>传入封装用户头像组件（HTML格式）。',
+        'en-US':
+          'Pass in the encapsulated user avatar component (in HTML format) through the Grid cell attribute<code>renderer</code>.'
+      },
       'codeFiles': ['render-user-head-in-grid.vue']
     }
   ],
@@ -111,35 +127,35 @@ export default {
     {
       'name': 'user-head',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'background-color',
           'type': 'string',
-          'defaultValue': '#d9d9d9',
-          'desc': { 'zh-CN': '背景色 。', 'en-US': 'Background color.' },
+          'defaultValue': `'#d9d9d9'`,
+          'desc': { 'zh-CN': '背景色', 'en-US': 'Background color' },
           'demoId': 'custom-background-color'
         },
         {
           'name': 'color',
           'type': 'string',
-          'defaultValue': '#ffffff',
-          'desc': { 'zh-CN': '文字颜色 。', 'en-US': 'Text color.' },
+          'defaultValue': `'#ffffff'`,
+          'desc': { 'zh-CN': '文字颜色', 'en-US': 'Text color' },
           'demoId': 'color'
         },
         {
           'name': 'message-total',
           'type': 'number',
           'defaultValue': '',
-          'desc': { 'zh-CN': '消息计数 。', 'en-US': 'Number of messages.' },
+          'desc': { 'zh-CN': '消息计数', 'en-US': 'Number of messages' },
           'demoId': 'message-count-total'
         },
         {
           'name': 'message-type',
           'type': 'string',
-          'defaultValue': 'details',
+          'defaultValue': `'details'`,
           'desc': {
-            'zh-CN': '消息类型 details|basic 可选 。;该属性的可选值为 details / basic',
-            'en-US': 'Message type details|basic is optional. ;The value of this attribute can be details or basic'
+            'zh-CN': '消息类型 details|basic 可选。该属性的可选值为 details / basic',
+            'en-US': 'Message type details|basic is optional. The value of this attribute can be details or basic.'
           },
           'demoId': 'message-count-type'
         },
@@ -147,29 +163,29 @@ export default {
           'name': 'message-upper-limit',
           'type': 'number',
           'defaultValue': '0',
-          'desc': { 'zh-CN': '消息显示上限 。', 'en-US': 'Maximum number of displayed messages.' },
+          'desc': { 'zh-CN': '消息显示上限', 'en-US': 'Maximum number of displayed messages' },
           'demoId': 'message-count-limit'
         },
         {
           'name': 'min',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '小尺寸模式 。', 'en-US': 'Small size mode.' },
+          'desc': { 'zh-CN': '小尺寸模式', 'en-US': 'Small size mode' },
           'demoId': 'min-user-head'
         },
         {
           'name': 'round',
           'type': 'boolean',
           'defaultValue': '',
-          'desc': { 'zh-CN': '圆形模式 。', 'en-US': 'Circular mode.' },
+          'desc': { 'zh-CN': '圆形模式', 'en-US': 'Circular mode' },
           'demoId': 'round-user-head'
         },
         {
           'name': 'type',
           'type': 'string',
-          'defaultValue': 'label',
+          'defaultValue': `'label'`,
           'desc': {
-            'zh-CN': '头像类型，icon|image|label 可选。;该属性的可选值为 icon / image / label',
+            'zh-CN': '头像类型，icon|image|label 可选。该属性的可选值为 icon / image / label',
             'en-US':
               'Avatar type. The options are icon, image, and label. ;The value of this attribute can be icon / image / label'
           },
@@ -182,7 +198,7 @@ export default {
           'desc': {
             'zh-CN': 'type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径',
             'en-US':
-              'If type is set to icon, it indicates the icon class name. If type is set to label, it indicates the font string. If type is set to image, it indicates the resource path.'
+              'If type is set to icon, it indicates the icon class name. If type is set to label, it indicates the font string. If type is set to image, it indicates the resource path'
           },
           'demoId': 'icon-user-head'
         }

package/demos/pc/webdoc/changelog.md

@@ -6,6 +6,7 @@
 
 ### Exciting New Features 🎉
 
+- feat: 新增 QrCode 二维码、Watermark 水印两个全新组件 🎊
 - feat(Timeline): Timeline component adapts to new themes by @Huangyilin19 in https://github.com/opentiny/tiny-vue/pull/615
 - feat(grid-slot):Add Table Header Slot by @ianxinnew in https://github.com/opentiny/tiny-vue/pull/674
 - feat(components): [date-picker] add props time-editable by @kagol in https://github.com/opentiny/tiny-vue/pull/696

package/demos/pc/webdoc/import-components.md

@@ -68,16 +68,14 @@ export default {
     )
   ],
   define: {
-    'process.env': Object.assign({}, process.env)
+    'process.env': { ...process.env }
   }
 }
 ```
 
 #### 温馨提示：
 
-在 `pnpm` 工程使用该插件时需要在 `package.json` 文件中逐个声明用到的每一个 `TinyVue` 组件依赖，因为 `pnpm` 特点就是用到的依赖就需要提前声明，防止幽灵依赖。
-
-依赖声明可以参考一下配置
+因为 `pnpm` 工程的特点之一是：项目中显示引入的依赖需要提前在 `package.json` 中声明（防止幽灵依赖），所以在 `pnpm` 工程使用该插件时需要在 `package.json` 中声明项目用到的每一个 `TinyVue` 组件依赖（`TinyVue` 每个组件都是一个 `npm` 包）。依赖声明可以参考以下配置：
 
 ```json
 {

package/demos/pc/webdoc/theme-en.md

@@ -96,10 +96,10 @@ If you want to control the `css` variable through `js`, you can do this:
 ```js
 const el = document.documentElement
 
-//Obtain the CSS variable.
+// Obtain the CSS variable.
 getComputedStyle(el).getPropertyValue('--ti-base-color-white')
 
-//Set the CSS variable.
+// Set the CSS variable.
 el.style.setProperty('--ti-base-color-white', '#fefefe')
 ```
 
@@ -115,11 +115,15 @@ Replace all the old variable names in the `src` directory in the project as an e
 
 Step 1: Click to download the mapping table `newVars.json` and the replacement script `replaceVar.js`.
 
-<a :href="$pub('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json files</a> and <a :href="$pub('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js files</a>
+<script setup>
+  import { pubUrl } from '@/tools'
+</script>
+
+<a :href="pubUrl('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json files</a> and <a :href="pubUrl('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js files</a>
 
 Step 2: Place `newVars.json` and `replaceVar.js` in the root directory of the project, which is at the same level as the src directory.
 
-<img src="@demos/resource/theme-demo.png" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
+<img :src="pubUrl('@demos/resource/theme-demo.png')" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
 
 Step 3: Run the following command in the root directory of the project:
 

package/demos/pc/webdoc/theme.md

@@ -47,7 +47,10 @@ resolve: {
 
 ```js
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
-import { tinySmbTheme } from '@opentiny/vue-theme/theme' // 导入主题
+
+import { tinySmbTheme } from '@opentiny/vue-theme/theme'
+
+// 导入主题
 
 new TinyThemeTool(tinySmbTheme, 'tinyStyleSheetId') // 初始化主题
 ```
@@ -162,11 +165,15 @@ el.style.setProperty('--ti-base-color-white', '#fefefe')
 
 步骤一、点击下载新旧变量的映射表`newVars.json`和替换脚本`replaceVar.js`
 
-<a :href="$pub('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json 文件</a> 和 <a :href="$pub('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js 文件</a>
+<script setup>
+  import { pubUrl } from '@/tools'
+</script>
+
+<a :href="pubUrl('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json 文件</a> 和 <a :href="pubUrl('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js 文件</a>
 
 步骤二、将 `newVars.json` 和 `replaceVar.js` 放到项目根目录下，与 src 目录同级；
 
-<img src="@demos/resource/theme-demo.png" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
+<img :src="pubUrl('@demos/resource/theme-demo.png')" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
 
 步骤三、在项目根目录下，执行以下命令进行替换；
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -17,15 +17,15 @@
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.1.0",
     "@opentiny/vue": "~3.12.0",
-    "@opentiny/vue-icon": "~3.12.0",
     "@opentiny/vue-common": "~3.12.0",
+    "@opentiny/vue-design-aurora": "~3.12.0",
+    "@opentiny/vue-icon": "~3.12.0",
+    "@opentiny/vue-design-smb": "~3.12.0",
     "@opentiny/vue-icon-saas": "~3.12.0",
+    "@opentiny/vue-theme": "~3.12.0",
     "@opentiny/vue-theme-mobile": "~3.12.0",
-    "@opentiny/vue-design-smb": "~3.12.0",
-    "@opentiny/vue-design-aurora": "~3.12.0",
     "@opentiny/vue-vite-import": "~1.1.5",
-    "@opentiny/vue-theme-saas": "~3.12.0",
-    "@opentiny/vue-theme": "~3.12.0"
+    "@opentiny/vue-theme-saas": "~3.12.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/src/App.vue

@@ -16,7 +16,6 @@ import { ConfigProvider, Modal } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
-import { useBulletin } from './tools/useBulletin.jsx'
 
 export default defineComponent({
   name: 'AppVue',
@@ -43,7 +42,6 @@ export default defineComponent({
       common.renderHeader()
     })
     const { designConfig } = useTheme()
-    useBulletin()
 
     provide('showPreview', (url) => {
       previewUrl.value = url

package/src/i18n/index.js

@@ -20,7 +20,7 @@ const i18n = initI18n({
   },
   messages
 })
-const $t = i18n.global.t
-const $t2 = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en)
+const i18nByKey = i18n.global.t
+const getWord = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en)
 
-export { i18n, $t, $t2 }
+export { i18n, i18nByKey, getWord }

package/src/main.js

@@ -21,8 +21,7 @@ import './assets/custom-block.less'
 import { i18n } from './i18n/index'
 import { router } from './router'
 import App from './App.vue'
-import { $t, $t2 } from './i18n'
-import { $pub, appData } from './tools'
+import { appData } from './tools'
 import { ZH_CN_LANG, EN_US_LANG, LANG_PATH_MAP } from './const'
 import demoConfig from '@demos/config.js'
 
@@ -62,11 +61,7 @@ if (import.meta.env.VITE_TINY_THEME === 'saas') {
   import('./tailwind.css')
 }
 
-app
-  .use(router)
-  .use(i18n)
-  .use(createHead()) // 支持md修改title
-  .mixin({ methods: { $t, $t2, $pub } })
+app.use(router).use(i18n).use(createHead()) // 支持md修改title
 
 if (typeof demoConfig.initApp === 'function') {
   demoConfig.initApp(app)

package/src/menus.jsx

@@ -1,6 +1,6 @@
 import { docMenus, cmpMenus } from '@menu/menus.js'
 
-import { appData, $t2 } from './tools'
+import { appData } from './tools'
 
 /**
  * 聚合doc  / cmp 两个页面的所有菜单.

package/src/tools/useApiMode.js

@@ -4,8 +4,8 @@ import { $local } from './storage'
 const _modeKey = 'tiny-vue-api-mode'
 const _demoModeKey = 'tiny-vue-demo-mode'
 const apiModeState = reactive({
-  apiMode: $local[_modeKey] || 'Options',
-  demoMode: $local[_demoModeKey] || 'single' // 示例展示： default:多示例， single:单示例
+  apiMode: $local[_modeKey] || 'Composition',
+  demoMode: $local[_demoModeKey] || 'default' // 示例展示： default:多示例， single:单示例
 })
 
 const apiModeFn = {

package/src/tools/useBulletin.jsx

@@ -5,8 +5,8 @@ import { Modal } from '@opentiny/vue'
 const bulletins = [
   {
     id: 'version-tip',
-    content: `为了避免 @opentiny/vue 的月度版本(minor)升级带来的不确定因素，所以推荐在您的工程中的 package.json 中依赖包的版本号前使用 ~，
-    比如 "@opentiny/vue": "~3.12.0。`,
+    content: `为了避免 @opentiny/vue 的月度版本(minor)升级带来的不确定因素，推荐在您的工程中的 package.json 中依赖包的版本号前使用 ~，
+    比如 "@opentiny/vue": "~3.12.0"。`,
     time: '2023-12-04'
   }
 ]