@opentiny/vue-docs 1.0.2 → 1.0.3

package/resources/pc/demo/user-head/custom-background-color.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义背景颜色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/user-head/custom-background-color')
+  const div1 = page.locator('.tiny-user-head__portrait')
+  await expect(div1).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+})

package/resources/pc/demo/user-head/custom-user-head-content.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义图像内容', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/user-head/custom-user-head-content')
+  const svg1 = page.locator('.tiny-user-head .tiny-svg path')
+  await expect(await svg1.getAttribute('d')).not.toContain('M19.2 18.6c-.4-.9-1-1.8-1.7-2.5S16 14.8 15')
+})

package/resources/pc/demo/user-head/icon-user-head.spec.ts

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

package/resources/pc/demo/user-head/image-user-head.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('图片头像', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/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')
+})

package/resources/pc/demo/user-head/label-user-head.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('文字头像', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/user-head/label-user-head')
+  const minBox = page.locator('.tiny-user-head__portrait')
+  await expect(minBox).toHaveText('文字')
+})

package/resources/pc/demo/user-head/message-count-limit.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('消息计数上限', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/user-head/message-count-limit')
+  const messageBox = page.locator('.tiny-user-head__message')
+  await expect(messageBox).toHaveText('99+')
+})

package/resources/pc/demo/user-head/message-count-total.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('头像消息计数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/user-head/message-count-total')
+  const messageBox = page.locator('.tiny-user-head__message')
+  await expect(messageBox).toHaveText('100')
+})

package/resources/pc/demo/user-head/message-count-type.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('使用小红点代替具体数值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/user-head/message-count-type')
+  const messageBox = page.locator('.tiny-user-head__message')
+  await expect(messageBox).toHaveCSS('background-color', 'rgb(255, 0, 0)')
+})

package/resources/pc/demo/user-head/min-user-head.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('小头像', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/user-head/min-user-head')
+  const minBox = page.locator('.tiny-user-head__portrait.min')
+  await expect(minBox).toHaveCSS('width', '30px')
+  await expect(minBox).toHaveCSS('height', '30px')
+})

package/resources/pc/demo/user-head/render-user-head-in-grid.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('Grid 单元格展示头像', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/user-head/render-user-head-in-grid')
+  const iconBox = page.getByRole('cell', { name: '800 GFD科技YX公司' }).locator('svg')
+  await expect(iconBox).toBeVisible()
+  const iconBox1 = page.getByRole('cell', { name: '300 WWW科技YX公司' }).locator('svg')
+  await expect(iconBox1).toBeVisible()
+})

package/resources/pc/demo/user-head/round-user-head.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('圆形头像', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/user-head/round-user-head')
+  const minBox = page.locator('.tiny-user-head__portrait')
+  await expect(minBox).toHaveCSS('border-radius', '50%')
+})

package/resources/pc/demo/wizard/base-flow.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/wizard/base-flow')
+
+  const stepItems = page.locator('.tiny-wizard__steps-item')
+  const charts = stepItems.locator('.tiny-wizard__chart')
+  const names = stepItems.locator('.tiny-wizard__name')
+  const chartCount = 5
+  const itemStatus = [/is-ready/, /is-doing/]
+  const descs = ['出差信息填写', '项目信息填写', '主管审批', '权签人审批', '完成申请']
+  const readyColor = 'rgb(94, 124, 224)'
+
+  await expect(charts).toHaveCount(chartCount)
+  for (let i = 0; i < chartCount; i++) {
+    const items = charts.nth(i)
+    const itemList = items.locator('span')
+    const first = itemList.nth(0)
+    const middle = itemList.nth(1)
+    const last = itemList.nth(2)
+
+    await expect(items).toHaveCSS('width', '120px')
+    await expect(items).toHaveCSS('height', '20px')
+    await expect(first).toHaveClass('tiny-wizard__chart-line')
+    await expect(middle).toHaveClass(/tiny-wizard__chart-icon/)
+    await expect(middle).toHaveText(String(i + 1))
+    await expect(last).toHaveClass('tiny-wizard__chart-line')
+    await expect(names.nth(i)).toHaveText(descs[i])
+
+    if (i < 2) {
+      await expect(stepItems.nth(i)).toHaveClass(itemStatus[i])
+      await expect(first).toHaveCSS('background-color', readyColor)
+      await expect(middle).toHaveCSS('background-color', readyColor)
+    } else {
+      await expect(first).toHaveCSS('background-color', 'rgb(194, 196, 199)')
+      await expect(middle).toHaveCSS('background-color', 'rgb(223, 225, 230)')
+    }
+  }
+})

package/resources/pc/demo/wizard/page-guide.spec.ts

@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test'
+
+test('页向导流程图', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/wizard/page-guide')
+
+  const stepItems = page.locator('.tiny-wizard__steps-item')
+  const buttons = page.locator('.tiny-wizard__button')
+  const prev = buttons.getByRole('button', { name: '上一步' })
+  const next = buttons.getByRole('button', { name: '下一步' })
+  const save = buttons.getByRole('button', { name: '保存' })
+  const charts = stepItems.locator('.tiny-wizard__chart')
+  const prevClasss = [/is-ready/, /is-doing/]
+  const nextClasss = [/is-ready/, /is-ready/, /is-doing/]
+
+  await save.isVisible()
+  await expect(charts).toHaveCount(5)
+  for (let i = 0; i < 2; i++) {
+    await expect(stepItems.nth(i)).toHaveClass(prevClasss[i])
+    if (i === 1) {
+      const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
+      const { width, height } = await currentNode.boundingBox()
+      await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
+      await expect(width).toBeCloseTo(20)
+      await expect(height).toBeCloseTo(22.67, 2)
+    }
+  }
+
+  await next.click()
+  for (let i = 0; i < 3; i++) {
+    await expect(stepItems.nth(i)).toHaveClass(nextClasss[i])
+    if (i === 2) {
+      const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
+      const { width, height } = await currentNode.boundingBox()
+      await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
+      await expect(width).toBeCloseTo(20)
+      await expect(height).toBeCloseTo(22.67, 2)
+    }
+  }
+
+  await prev.click()
+  for (let i = 0; i < 2; i++) {
+    await expect(stepItems.nth(i)).toHaveClass(prevClasss[i])
+    if (i === 1) {
+      const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
+      const { width, height } = await currentNode.boundingBox()
+      await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
+      await expect(width).toBeCloseTo(20)
+      await expect(height).toBeCloseTo(22.67, 2)
+    }
+  }
+})

package/resources/pc/demo/wizard/slot-base.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('基本插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/wizard/slot-base')
+
+  const stepItems = page.locator('.tiny-wizard__steps-item')
+  const names = stepItems.locator('.tiny-wizard__name')
+  const descs = ['出差信息填写', '项目信息填写', '主管审批', '权签人审批', '完成申请']
+
+  for (let i = 0; i < 5; i++) {
+    await expect(names.nth(i)).toHaveText(descs[i])
+  }
+})

package/resources/pc/demo/wizard/slot-step-button.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('步骤插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/wizard/slot-step-button')
+
+  const buttons = page.locator('.tiny-wizard__button').getByRole('button')
+  const texts = ['第一步', '第二步', '第三步']
+  const modal = page.locator('.tiny-modal')
+
+  await expect(buttons).toHaveCount(3)
+  for (let i = 0; i < 3; i++) {
+    await expect(buttons.nth(i)).toHaveText(texts[i])
+    await buttons.nth(i).click()
+    await expect(modal.nth(i)).toHaveText(`步骤${i + 1}`)
+  }
+})

package/resources/pc/demo/wizard/time-line-flow.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from '@playwright/test'
+
+test('时间线流程图', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/wizard/time-line-flow')
+
+  const wizard = page.locator('.tiny-wizard__vertical.is-time-line-flow')
+  const nodeLines = wizard.locator('.tiny-wizard__chart-line.is-time-line')
+  const nodeIcons = wizard.locator('.tiny-wizard__time-wrapper > svg')
+  const nodeDates = wizard.locator('.tiny-wizard__date > span').filter({ hasText: /2013-12-1/ })
+  const wizardChilds = page.locator('.tiny-wizard__chart-children.is-ready')
+  const childNodeLines = wizardChilds.locator('.tiny-wizard__chart-line')
+  const childNodeIcons = wizardChilds.locator('.tiny-wizard__chart-icon')
+  const childNodeDates = wizardChilds.locator('.tiny-wizard__date.time-line-text')
+  const details = wizardChilds.locator('.tiny-wizard__chart-detail')
+  const userNames = wizardChilds.getByRole('link')
+  const texts = [/提交小红/, /转他人处理小胡/, /主管审批小张/]
+  const expandBtns = page.getByRole('listitem').locator('svg')
+  const xiaoHongTop = page
+    .getByRole('tooltip', { name: '小红 部门：某部门 邮件：example@example.com 手机：1234567890' })
+    .locator('div')
+    .filter({ hasText: '小红工号：123456890' })
+    .nth(3)
+  const xiaoHongBottom = page
+    .getByRole('tooltip', { name: '小红 部门：某部门 邮件：example@example.com 手机：1234567890' })
+    .getByText('部门：某部门邮件：example@example.com手机：1234567890')
+
+  await expect(nodeLines).toHaveCount(2)
+  await expect(nodeDates).toHaveCount(2)
+  await expect(childNodeLines).toHaveCount(3)
+  await expect(childNodeIcons).toHaveCount(3)
+  await expect(childNodeDates).toHaveCount(3)
+  await expect(details).toHaveCount(3)
+  await expect(userNames).toHaveCount(3)
+  for (let i = 0; i < 3; i++) {
+    await expect(childNodeLines.nth(i)).toHaveCSS('width', '4px')
+    await expect(childNodeLines.nth(i)).toHaveCSS('height', '88px')
+    await expect(details.nth(i)).toHaveText(texts[i])
+    await expect(childNodeDates.nth(i)).toHaveText(/20*1*:50/)
+
+    if (i === 2) {
+      await expect(childNodeLines.nth(i)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+    }
+    if (i < 2) {
+      await expect(nodeIcons.nth(i)).toHaveCSS('width', '16px')
+      await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
+      await expect(nodeLines.nth(i)).toHaveCSS('width', '4px')
+      await expect(nodeLines.nth(i)).toHaveCSS('height', '88px')
+    }
+  }
+
+  await userNames.first().hover()
+  await expect(xiaoHongTop).toBeVisible()
+  await expect(xiaoHongBottom).toBeVisible()
+  await expandBtns.nth(0).click()
+  await expect(nodeLines).toHaveCount(2)
+  await expect(nodeDates).toHaveCount(2)
+  await expect(childNodeLines).toHaveCount(1)
+  await expect(childNodeIcons).toHaveCount(1)
+  await expect(childNodeDates).toHaveCount(1)
+  await expect(details).toHaveCount(1)
+  await expect(userNames).toHaveCount(1)
+})

package/resources/pc/demo/wizard/vertical.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test'
+
+test('垂直流程图', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/wizard/vertical')
+
+  const wizard = page.locator('.tiny-wizard__vertical')
+  const nodeLines = wizard.locator('.tiny-wizard__chart-line')
+  const nodeIcons = wizard.locator('.tiny-wizard__chart-icon')
+  const nodeNames = wizard.locator('.tiny-wizard__chart-name')
+  const nodeCount = 5
+  const names = ['提交提交', '直接主管审批通过', '二级主管审批同意', '一级审批', '完成完成']
+
+  await expect(nodeLines).toHaveCount(nodeCount)
+  await expect(nodeIcons).toHaveCount(nodeCount)
+  await expect(nodeNames).toHaveCount(nodeCount)
+  for (let i = 0; i < nodeCount; i++) {
+    await expect(nodeNames.nth(i)).toHaveText(names[i])
+    await expect(nodeLines.nth(i)).toHaveCSS('width', '4px')
+    await expect(nodeLines.nth(i)).toHaveCSS('height', '88px')
+    await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
+    await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
+
+    if (i === 3) {
+      await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(194, 196, 199)')
+      await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(223, 225, 230)')
+    } else {
+      await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+      await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+    }
+  }
+})

package/resources/pc/demo-config/en-US/action-menu.json

@@ -78,5 +78,13 @@
     "component": " ActionMenu",
     "findIntroStr": "ActionMenu",
     "demoId": "slot-item"
+  },
+  {
+    "title": "Drop-down menu visible change",
+    "content": "When the drop-down menu change to be visible or hidden, the <code>visible-change</code> event is triggered.",
+    "link": "action-menu/visible-change",
+    "component": " ActionMenu",
+    "findIntroStr": "ActionMenu",
+    "demoId": "visible-change"
   }
 ]

package/resources/pc/demo-config/en-US/alert.json

@@ -65,7 +65,7 @@
   },
   {
     "title": "Customized prompt content",
-    "content": "<p>When <code>size</code> is set to large, you can customize the prompt content through the <code>description</code> attribute or slot. </p>\n",
+    "content": "<p>You can customize the prompt content through the <code>description</code> attribute or slot. </p>\n",
     "link": "alert/custom-description",
     "component": "Alert",
     "findIntroStr": "Alert alarms, including warning, error, info, and success.",

package/resources/pc/demo-config/en-US/badge.json

@@ -39,6 +39,14 @@
     "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
     "demoId": "target"
   },
+  {
+    "title": "Custom Class Name",
+    "content": "<p><code>badge-class</code> Custom Class Name</p>\n",
+    "link": "badge/badge-class",
+    "component": "Badge flag",
+    "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+    "demoId": "badge-class"
+  },
   {
     "title": "Custom Tag Target",
     "content": "<p><code>default slot</code> Tag Content Custom</p>\n",
@@ -62,5 +70,13 @@
     "component": "Badge flag",
     "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
     "demoId": "dynamic-hidden"
+  },
+  {
+    "title": "Tag Offset",
+    "content": "<p><code>offset</code> Custom Tag Offset</p>\n",
+    "link": "badge/offset",
+    "component": "Badge flag",
+    "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+    "demoId": "offset"
   }
 ]

package/resources/pc/demo-config/en-US/country.json

@@ -14,5 +14,13 @@
     "component": "Country",
     "findIntroStr": "Country: country/region component, which is used to display and select country/region names. The options are obtained by configuring the data source.",
     "demoId": "custom-service"
+  },
+  {
+    "title": "Custom Data Fields",
+    "content": "When a user-defined data body is used, <code>fields</code> must be used to specify fields.",
+    "link": "country/fields",
+    "component": "Country",
+    "findIntroStr": "Country: country/region component, which is used to display and select country/region names. The options are obtained by configuring the data source.",
+    "demoId": "fields"
   }
-]
+]

package/resources/pc/demo-config/en-US/dropdown.json

@@ -23,6 +23,14 @@
     "findIntroStr": "Dropdown drop-down list.",
     "demoId": "trigger"
   },
+  {
+    "title": "Custom Text",
+    "content": "<p>DropdownYou can customize the text of DropdownMenu through the <code>title</code> attribute.</p>\n",
+    "link": "dropdown/options",
+    "component": "Dropdown drop-down list",
+    "findIntroStr": "Dropdown drop-down list.",
+    "demoId": "options"
+  },
   {
     "title": "Menu hiding mode",
     "content": "The <p> drop-down menu is hidden by default after a menu item is clicked. You can disable this function by setting <code>hide-on-click</code> to <code>false</code>. </p>\n",
@@ -62,5 +70,13 @@
     "component": "Dropdown drop-down list",
     "findIntroStr": "Dropdown drop-down list.",
     "demoId": "events"
+  },
+  {
+    "title": "Default Slot",
+    "content": "<p>Dropdown can customize content through the <code>default</code> slot</p>\n",
+    "link": "dropdown/slot-default",
+    "component": "Dropdown drop-down list",
+    "findIntroStr": "Dropdown drop-down list.",
+    "demoId": "slot-default"
   }
 ]

package/resources/pc/demo-config/en-US/ip-address.json

@@ -86,5 +86,13 @@
     "component": "IpAddress text box",
     "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
     "demoId": "select"
+  },
+  {
+    "title": "input event",
+    "content": "The <code>input</code> event is triggered when a user enters a text box. ",
+    "link": "ip-address/input",
+    "component": "IpAddress text box",
+    "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+    "demoId": "input"
   }
-]
+]

package/resources/pc/demo-config/en-US/modal.json

@@ -1,7 +1,7 @@
 [
   {
     "title": "Basic Usage",
-    "content": "<p>You can use the <code>Modal.alert</code> method to set a pop-up box, and use the <code>Modal.confirm</code> method to set a confirmation pop-up box. </p>\n",
+    "content": "<p>You can use the <code>Modal.alert</code> method to set a pop-up box, and use the <code>Modal.confirm</code> method to set a confirmation pop-up box. The function returns a <code>Promise</code> object, where the property <code>vm</code> can be used to close the current Modal.</p>\n",
     "link": "modal/base",
     "component": "Modal modal box",
     "findIntroStr": "Modal modal box",
@@ -247,4 +247,4 @@
     "findIntroStr": "Modal modal box",
     "demoId": "grid"
   }
-]
+]

package/resources/pc/demo-config/en-US/pop-editor.json

@@ -254,5 +254,13 @@
     "component": "PopEditor pop-up editing",
     "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
     "demoId": "show-history"
+  },
+  {
+    "title": "Remote Data Request",
+    "content": "<p>Configure the <code>auto-lookup</code> to false, set initialization to not request data, or call this $ref.popuptor.handleSearch() Proactively calls the request method</p>\n",
+    "link": "popeditor/auto-lookup",
+    "component": "PopEditor pop-up editing",
+    "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+    "demoId": "auto-lookup"
   }
 ]

package/resources/pc/demo-config/en-US/popover.json

@@ -17,7 +17,7 @@
   },
   {
     "title": "Arrow Offset",
-    "content": "<p><code>arrow-offset</code> Sets the offset of the arrow to change the position of the arrow. </p>\n",
+    "content": "<p><code>arrow-offset</code> Sets the offset of the arrow to change the position of the arrow.By default, the arrow retains at least 8px of space to ensure that the arrow does not stick to the left. </p>\n",
     "link": "popover/arrow-offset",
     "component": " Popover",
     "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",

package/resources/pc/demo-config/en-US/select.json

@@ -415,6 +415,14 @@
     "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
     "demoId": "cache-usage"
   },
+  {
+    "title": "Hide drop-down",
+    "content": "<p>Use the <code>hide-drop</code> attribute to disable the display of the drop-down list. </p>\n",
+    "link": "select/hide-select-input-border",
+    "component": "Select Selector",
+    "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+    "demoId": "hide-select-input-border"
+  },
   {
     "title": "Slot Mode",
     "content": "<p>If the list rendering component is set to <code>vue-option</code> through slot to output the drop-down list, you need to manually add the cache function. </p>\n",

package/resources/pc/demo-config/en-US/time-picker.json

@@ -10,10 +10,10 @@
   {
     "title": "Selection Range",
     "content": "<p>picker-options Set the time range</p>\n",
-    "link": "time-picker/basic-usage",
+    "link": "time-picker/picker-options",
     "component": "TimePicker Time Selector",
     "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
-    "demoId": "basic-usage1"
+    "demoId": "picker-options"
   },
   {
     "title": "Arrow Selection",
@@ -135,9 +135,17 @@
     "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
     "demoId": "editable"
   },
+  {
+    "title": "Disabled status",
+    "content": "<p>You can set <code>disabled</code> to true, you can disabled the time picker。</p>\n",
+    "link": "time-picker/disabled",
+    "component": " TimePicker Time Selector",
+    "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+    "demoId": "disabled"
+  },
   {
     "title": "Event",
-    "content": "<p>When focusing or out of focus, the focus and bulr events are triggered. When the selected value is determined, the change event is triggered.</p>\n",
+    "content": "<p>When focusing or out of focus, the focus and blur events are triggered. When the selected value is determined, the change event is triggered.</p>\n",
     "link": "time-picker/event-blur",
     "component": "TimePicker Time Selector",
     "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",

package/resources/pc/demo-config/en-US/transfer.json

@@ -137,7 +137,7 @@
   },
   {
     "title": "Panel Slot",
-    "content": "<p>You can use <code>left-panel</code> and <code>right-panel</code> to customize the contents of the left and right panels. Use <code>button</code> to customize the shuttle button</p>\n",
+    "content": "<p>You can use <code>left-panel</code> and <code>right-panel</code> to customize the contents of the left and right panels. Use <code>button-panel</code> to customize the shuttle button</p>\n",
     "link": "transfer/panel-slot",
     "component": "Transfer shuttle box",
     "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",

package/resources/pc/demo-config/zh-CN/action-menu.json

@@ -78,5 +78,13 @@
     "component": " ActionMenu 菜单按钮",
     "findIntroStr": "ActionMenu 菜单按钮",
     "demoId": "slot-item"
+  },
+  {
+    "title": "下拉面板显示事件",
+    "content": "当下拉面板出现或者隐藏时触发 <code>visible-change</code> 事件",
+    "link": "action-menu/visible-change",
+    "component": " ActionMenu 菜单按钮",
+    "findIntroStr": "ActionMenu 菜单按钮",
+    "demoId": "visible-change"
   }
 ]

package/resources/pc/demo-config/zh-CN/alert.json

@@ -65,7 +65,7 @@
   },
   {
     "title": "自定义提示内容",
-    "content": "<p>当 <code>size</code> 为 large时，可通过 <code>description</code> 属性或插槽设置自定义提示内容。</p>\n",
+    "content": "<p>可通过 <code>description</code> 属性或插槽设置自定义提示内容。</p>\n",
     "link": "alert/custom-description",
     "component": " Alert 警告",
     "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",