@opentiny/vue-docs 3.28.0 → 3.30.0

package/demos/apis/tree.js

@@ -23,7 +23,7 @@ export default {
           desc: {
             'zh-CN': '禁止添加的节点 key 值列表，也可通过 setAddDisabledKeys 方法设置',
             'en-US':
-              'List of key values of nodes that cannot be added. You can also use the setAddDisabledKeys method to set the key values.'
+              'List of key values of nodes that cannot be added. You can also use the setAddDisabledKeys method to set the key values'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -45,7 +45,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '判断节点能否被拖拽',
-            'en-US': 'Whether a node can be dragged.'
+            'en-US': 'Whether a node can be dragged'
           },
           mode: ['pc'],
           pcDemo: 'drag'
@@ -58,7 +58,7 @@ export default {
             'zh-CN':
               "拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后",
             'en-US':
-              "Whether the target node can be placed during dragging. The type parameter has three situations: 'prev',' inner', and'next', which indicate that it is placed before the target node, inserted into the target node, and placed after the target node respectively"
+              "Whether the target node can be placed during dragging. The type parameter has three situations: 'prev', 'inner', and 'next', which indicate that it is placed before the target node, inserted into the target node, and placed after the target node respectively"
           },
           mode: ['pc'],
           pcDemo: 'drag'
@@ -137,7 +137,7 @@ export default {
           desc: {
             'zh-CN': '默认展开节点的keys。当属性变化时，会自动收起全部并重新展开指定的数据项。 ',
             'en-US':
-              'The keys of the node are expanded by default.When the property changes, it automatically collapses all and reexpands the specified data item.'
+              'The keys of the node are expanded by default. When the property changes, it automatically collapses all and reexpands the specified data item'
           },
           mode: ['pc'],
           pcDemo: 'expand-control'
@@ -149,7 +149,7 @@ export default {
           desc: {
             'zh-CN': '禁止删除的节点 key 值列表，也可通过 setDeleteDisabledKeys 方法设置',
             'en-US':
-              'Indicates the list of key values of nodes that cannot be deleted. You can also use the setDeleteDisabledKeys method to set the key values.'
+              'Indicates the list of key values of nodes that cannot be deleted. You can also use the setDeleteDisabledKeys method to set the key values'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -161,7 +161,7 @@ export default {
           desc: {
             'zh-CN': '删除节点的装置钩子函数，若返回 false 或者返回 Promise 且被 reject，则停止删除。 ',
             'en-US':
-              'Device hook function for deleting a node. If false is returned or Promise is returned and rejected, the deletion is stopped.'
+              'Device hook function for deleting a node. If false is returned or Promise is returned and rejected, the deletion is stopped'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -184,7 +184,7 @@ export default {
           desc: {
             'zh-CN': '禁止编辑的节点 key 值列表，也可通过 setEditDisabledKeys 方法设置',
             'en-US':
-              'List of key values of nodes that cannot be edited. You can also use the setEditDisabledKeys method to set the key values.'
+              'List of key values of nodes that cannot be edited. You can also use the setEditDisabledKeys method to set the key values'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -284,7 +284,7 @@ export default {
           defaultValue: '18',
           desc: {
             'zh-CN': '相邻级节点间的水平缩进，单位为像素',
-            'en-US': 'horizontal indentation between adjacent nodes, in pixels.'
+            'en-US': 'horizontal indentation between adjacent nodes, in pixels'
           },
           mode: ['pc'],
           pcDemo: 'basic-usage'
@@ -308,7 +308,7 @@ export default {
             'zh-CN':
               '加载子树数据的方法。点击节点后，组件开始调用load方法，只有在load函数内调用resolve(data)，才表示返回下级的数据成功。',
             'en-US':
-              'Method of loading subtree data. After the node is clicked, the component starts to call the load method. Only when resolve(data) is called in the load function, the data at the lower level is successfully returned.'
+              'Method of loading subtree data. After the node is clicked, the component starts to call the load method. Only when resolve(data) is called in the load function, the data at the lower level is successfully returned'
           },
           mode: ['pc'],
           pcDemo: 'lazy'
@@ -387,7 +387,7 @@ export default {
           desc: {
             'zh-CN': '在严格模式时，是否显示勾选父节点时，自动勾选子节点的功能区域',
             'en-US':
-              'In strict mode, when the parent node is displayed, the function area of the child node is automatically selected.'
+              'In strict mode, when the parent node is displayed, the function area of the child node is automatically selected'
           },
           mode: ['pc'],
           pcDemo: 'other'
@@ -453,7 +453,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '指示收缩的图标色',
-            'en-US': 'Icon indicating shrink  color'
+            'en-US': 'Icon indicating shrink color'
           },
           mode: ['pc'],
           pcDemo: 'icons'
@@ -488,7 +488,7 @@ export default {
           desc: {
             'zh-CN': '用于编辑模式下参数配置,指示新增节点的 id ,是否显示 id 重复的警告等',
             'en-US':
-              'Used for parameter configuration in editing mode, indicating the ID of a new node and whether to display a warning indicating duplicate IDs.'
+              'Used for parameter configuration in editing mode, indicating the ID of a new node and whether to display a warning indicating duplicate IDs'
           },
           mode: ['pc'],
           pcDemo: 'edit'
@@ -499,7 +499,7 @@ export default {
           defaultValue: 'false',
           desc: {
             'zh-CN': '通过 <code> highlightQuery </code> 属性，是否在匹配的节点中，高亮搜索文字。',
-            'en-US': 'Indicates whether to highlight the search text in the matched node.'
+            'en-US': 'Indicates whether to highlight the search text in the matched node'
           },
           mode: ['pc'],
           pcDemo: 'filter-view'
@@ -512,7 +512,7 @@ export default {
             'zh-CN':
               '通过设置 <code> showCheckedMark </code> 属性为true,且非多选模式时，可以在选中行的最右边显示 <code> √ </code> 号。',
             'en-US':
-              'By setting the <code> showCheckedMark </code> property to true, you can display the <code> √ </code> number on the far right when a line is selected.'
+              'By setting the <code> showCheckedMark </code> property to true, you can display the <code> √ </code> number on the far right when a line is selected'
           },
           mode: ['pc'],
           pcDemo: ''
@@ -564,7 +564,7 @@ export default {
             'zh-CN':
               '平铺模式下，勾选或取消勾选节点的事件，需要设置show-checkbox为true才生效。<br>参数说明：{ plainNode: 被点击的节点数据, value: 复选框是否选中，取值true或false }',
             'en-US':
-              'In tile mode, select or deselect node events to take effect only when show-checkbox is set to true. <br> Parameter description: {plainNode: indicates the node data to be clicked. value: indicates whether the check box is selected. The value can be true or false.'
+              'In tile mode, select or deselect node events to take effect only when show-checkbox is set to true. <br> Parameter description: {plainNode: indicates the node data to be clicked. value: indicates whether the check box is selected. The value can be true or false}'
           },
           mode: ['pc'],
           pcDemo: ''
@@ -874,7 +874,7 @@ export default {
           desc: {
             'zh-CN': '返回目前被选中的节点的 key 所组成的数组。当参数：leafOnly 为true时，只返回被选中的叶子节点。',
             'en-US':
-              'Returns an array of keys for the currently selected node. If the parameter: leafOnly is true, only the selected leaf nodes are returned.'
+              'Returns an array of keys for the currently selected node. If the parameter: leafOnly is true, only the selected leaf nodes are returned'
           },
           mode: ['pc'],
           pcDemo: 'check-op'
@@ -929,7 +929,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '返回目前半选中的节点所组成的数组',
-            'en-US': 'Returns an array of currently half-selected nodes.'
+            'en-US': 'Returns an array of currently half-selected nodes'
           },
           mode: ['pc'],
           pcDemo: 'check-op'
@@ -984,7 +984,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '在一个节点的前面增加一个节点',
-            'en-US': 'Add a node before a tree node.'
+            'en-US': 'Add a node before a tree node'
           },
           mode: ['pc'],
           pcDemo: 'node-op'
@@ -1007,7 +1007,7 @@ export default {
           desc: {
             'zh-CN': '删除节点。当参数：isSaveChildNode为true时，当前节点的子元素上移至删除节点的父节点中去。',
             'en-US':
-              'Delete a node. When isSaveChildNode is true, the child elements of the current node are moved up to the parent node of the deleted node.'
+              'Delete a node. When isSaveChildNode is true, the child elements of the current node are moved up to the parent node of the deleted node'
           },
           mode: ['pc'],
           pcDemo: 'node-op'
@@ -1040,7 +1040,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '设置禁止添加的节点 key 值列表',
-            'en-US': 'Sets the list of key values of nodes that cannot be added.'
+            'en-US': 'Sets the list of key values of nodes that cannot be added'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -1129,7 +1129,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '设置禁止删除的节点 key 值列表',
-            'en-US': 'Sets the list of key values of nodes that cannot be delete.'
+            'en-US': 'Sets the list of key values of nodes that cannot be delete'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -1140,7 +1140,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '设置禁止编辑的节点 key 值列表',
-            'en-US': 'Sets the list of key values of nodes that cannot be edit.'
+            'en-US': 'Sets the list of key values of nodes that cannot be edit'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -1224,7 +1224,7 @@ export default {
           desc: {
             'zh-CN': '在严格模式显示自动勾选子节点的功能时，自定义开关右侧的内容',
             'en-US':
-              'When the function of automatically selecting subnodes is displayed in strict mode, the content on the right of the customized switch is displayed.'
+              'When the function of automatically selecting subnodes is displayed in strict mode, the content on the right of the customized switch is displayed'
           },
           mode: ['pc'],
           pcDemo: 'other'

package/demos/mobile-first/app/button-group/display-mode.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <!-- 默认模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" />
+    <br>
+    <br>
+    
+    <!-- 圆角合并模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" display-mode="merged" />
+  </div>
+</template>
+
+<script>
+import { TinyButtonGroup } from "@opentiny/vue";
+
+export default {
+  components: {
+    TinyButtonGroup,
+  },
+  data() {
+    return {
+      checkedVal: "Button1",
+      groupData: [
+        { text: "Button1", value: "Button1" },
+        { text: "Button2", value: "Button2" },
+        { text: "Button3", value: "Button3" },
+      ],
+    };
+  },
+};
+</script>

package/demos/mobile-first/app/button-group/webdoc/button-group.js

@@ -52,6 +52,19 @@ export default {
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['enumeration.vue']
+    },
+    {
+      demoId: 'display-mode',
+      name: {
+        'zh-CN': '按钮组显示模式',
+        'en-US': 'button mode'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>display-mode</code> 属性设置按钮组显示模式，可选值有 <code>default</code>（默认）和 <code>merged</code>（选块合并）。</p>',
+        'en-US': '<p>button mode</p>'
+      },
+      codeFiles: ['display-mode.vue']
     }
   ]
 }

package/demos/mobile-first/app/calendar-view/webdoc/calendar-view.js

@@ -71,7 +71,7 @@ export default {
         'en-US': ''
       },
       desc: {
-        'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
+        'zh-CN': '<p>通过 dayTimes 属性配置时间线模式下所展示的时间范围，默认为 [8,18]，可配范围 [0,23]。</p>\n',
         'en-US': '<p></p>\n'
       },
       codeFiles: ['calendar-timeline-range.vue']
@@ -96,7 +96,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过showMark回调函数来标记某些日期，markColor属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor可选颜色同 theme</p>\n',
+          '<p>通过 showMark 回调函数来标记某些日期，markColor 属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor 可选颜色同 theme</p>\n',
         'en-US': '<p></p>\n'
       },
       codeFiles: ['calendar-day-mark.vue']
@@ -133,8 +133,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',
-        'en-US': '<p></p>\n'
+          '<p>自定义日期单元格背景色。</p>\n<p>目前支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey 和使用十六进制、rgb、rgba 的是自定义颜色</p>\n',
+        'en-US':
+          '<p>Customize the background color of date cells.</p>\n<p>Currently supports both preset colors (options include blue, green, red, yellow, purple, cyan, and grey) and custom colors defined using hexadecimal, RGB, or RGBA values.</p>'
       },
       codeFiles: ['custom-day-bg-color.vue']
     },

package/demos/mobile-first/app/modal/webdoc/modal.js

@@ -58,7 +58,8 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>可通过 `duration` 属性设置自动关闭的延迟时间，只对 type=message 有效。<p>',
+        'zh-CN':
+          '<p>可通过 `duration` 属性设置自动关闭的延迟时间，只对 type=message 有效，如果设置为0则窗口不会自动关闭。<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['duration.vue']

package/demos/pc/app/alert/center.spec.ts

@@ -4,8 +4,16 @@ test('文字居中', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#center')
 
+  // 等待网络空闲，确保页面完全加载
+  await page.waitForLoadState('networkidle')
+
   const alert = page.locator('.tiny-alert')
 
+  // 首先验证基础类存在
+  await expect(alert).toHaveClass(/tiny-alert--info/)
+  await expect(alert).toHaveClass(/tiny-alert--normal/)
+
+  // 然后验证居中类
   await expect(alert).toHaveClass(/is-center/)
   await expect(alert).toHaveCSS('justify-content', 'center')
 })

package/demos/pc/app/alert/custom-close.spec.ts

@@ -1,5 +1,36 @@
 import { test, expect } from '@playwright/test'
 
+// 测试所有 Alert 自定义图标
+test('测试所有 Alert 自定义图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#icon')
+
+  // 定义预期的图标路径
+  const expectedPaths = [
+    'M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.14 7-7-3.14-7-7-7Z',
+    'M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.14 7-7-3.14-7-7-7Z',
+    'M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.14 7-7-3.14-7-7-7Z',
+    'M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.14 7-7-3.14-7-7-7Z'
+  ]
+
+  // 获取页面上所有的 Alert 组件
+  const alerts = page.locator('.tiny-alert')
+
+  // 计算 Alert 组件的数量
+  const count = await alerts.count()
+
+  // 遍历所有 Alert 组件并验证图标路径
+  for (let i = 0; i < count; i++) {
+    // 定位第 i 个 Alert 组件
+    const alert = alerts.nth(i)
+    // 定位图标路径元素
+    const iconPath = alert.locator('.tiny-alert__icon path')
+    // 验证图标路径
+    await expect(iconPath).toHaveAttribute('d', expectedPaths[i])
+  }
+})
+
+// 测试关闭按钮
 test('关闭按钮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#custom-close')
@@ -27,31 +58,30 @@ test('关闭按钮', async ({ page }) => {
   await expect(customAlert).toBeVisible()
 })
 
+// 测试自定义关闭按钮文本
 test('自定义关闭按钮文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#custom-close')
 
-  const alertError = page.locator('.tiny-alert').nth(1)
-  const closeText = alertError.locator('.tiny-alert__close')
+  const closeText = await await page.getByLabel('Close', { exact: true })
 
-  // 自定义按钮文字
-  await expect(closeText).not.toBeVisible()
-  await expect(alertError.locator('.is-custom').getByText('关闭')).toBeVisible()
+  await expect(closeText).toHaveText(/关闭/)
 })
 
+// 测试关闭按钮事件
 test('关闭按钮事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#custom-close')
-
-  const alertWarning = page.locator('.tiny-alert--warning')
+  const demo = page.locator('#custom-close')
+  const alertWarning = demo.locator('.tiny-alert--warning')
   const close = alertWarning.locator('.tiny-alert__close')
 
-  // 点击关闭后警告消失，自定义事件 modalBox 提示出现
   await close.click()
+  // 点击关闭后警告消失
   await expect(alertWarning).not.toBeVisible()
-  await expect(page.locator('.tiny-notify__content').getByText('触发关闭事件')).toBeVisible()
 })
 
+// 测试不可关闭警告
 test('不可关闭警告', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#custom-close')

package/demos/pc/app/alert/icon.spec.ts

@@ -1,14 +1,25 @@
 import { test, expect } from '@playwright/test'
 
-test('测试 Alert 自定义图标', async ({ page }) => {
+test('测试所有 Alert 自定义图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('alert#icon')
 
-  // 自定义图标和默认图标不同
-  const iconCustomAlert = page.locator('.tiny-alert').nth(0)
+  const expectedPaths = [
+    'M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.14 7-7-3.14-7-7-7Z',
+    'M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.14 7-7-3.14-7-7-7Z',
+    'M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.14 7-7-3.14-7-7-7Z',
+    'M8 1C4.13 1 1 4.13 1 8s3.13 7 7 7 7-3.14 7-7-3.14-7-7-7Z'
+  ]
 
-  await expect(iconCustomAlert.locator('.tiny-alert__icon:nth-child(1) path')).toHaveAttribute(
-    'd',
-    /M13 3v1h-2V3h2zm-1.+1h2v-2h-2c-1\.4 0-2\.8-\.5-4-1\.3z/
-  )
+  // 获取页面上所有的 Alert 组件
+  const alerts = page.locator('.tiny-alert')
+
+  // 计算 Alert 组件的数量
+  const count = await alerts.count()
+
+  for (let i = 0; i < count; i++) {
+    const alert = alerts.nth(i)
+    const iconPath = alert.locator('.tiny-alert__icon path')
+    await expect(iconPath).toHaveAttribute('d', expectedPaths[i])
+  }
 })

package/demos/pc/app/alert/show-icon.spec.ts

@@ -5,5 +5,5 @@ test('测试 Alert 不显示图标', async ({ page }) => {
   await page.goto('alert#show-icon')
 
   const noIconAlert = page.locator('.tiny-alert').nth(1)
-  await expect(noIconAlert.locator('.tiny-alert__icon')).toHaveCount(1)
+  await expect(noIconAlert.locator('.tiny-alert__icon')).toHaveCount(0)
 })

package/demos/pc/app/anchor/webdoc/anchor.js

@@ -10,6 +10,7 @@ export default {
         'zh-CN': '基本用法',
         'en-US': 'Basic Usage'
       },
+      hideSaas: true,
       desc: {
         'zh-CN': '通过 <code>links</code> 设置导航数据， <code>type</code> 设置类型。',
         'en-US': 'Set navigation data through <code>links</code> , and <code>type</code> to set the type.'

package/demos/pc/app/base-select/copy-multi.spec.ts

@@ -10,7 +10,7 @@ test('多选复制单个标签', async ({ page }) => {
 
   await expect(tag).toContainText('北京')
   await page.waitForTimeout(200)
-  const tagBox = await tag.locator('span').boundingBox()
+  const tagBox = await tag.locator('span > span').boundingBox()
   const x = tagBox.x + tagBox.width
   const y = tagBox.y + tagBox.height - 5
 

package/demos/pc/app/button-group/display-mode-composition-api.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <!-- 默认模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" />
+    <br />
+    <br />
+
+    <!-- 圆角合并模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" display-mode="merged" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyButtonGroup } from '@opentiny/vue'
+
+const checkedVal = ref('Button1')
+const groupData = ref([
+  { text: 'Button1', value: 'Button1' },
+  { text: 'Button2', value: 'Button2' },
+  { text: 'Button3', value: 'Button3' }
+])
+</script>

package/demos/pc/app/button-group/display-mode.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <!-- 默认模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" />
+    <br />
+    <br />
+
+    <!-- 圆角合并模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" display-mode="merged" />
+  </div>
+</template>
+
+<script>
+import { TinyButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButtonGroup
+  },
+  data() {
+    return {
+      checkedVal: 'Button1',
+      groupData: [
+        { text: 'Button1', value: 'Button1' },
+        { text: 'Button2', value: 'Button2' },
+        { text: 'Button3', value: 'Button3' }
+      ]
+    }
+  }
+}
+</script>

package/demos/pc/app/button-group/sup-composition-api.vue

@@ -105,6 +105,7 @@ const groupDataTag = ref([
 }
 
 .tiny-button-group :deep(.sup-slot) {
+  display: flex;
   line-height: 1;
   padding: 0 4px;
   border-top-left-radius: 4px;

package/demos/pc/app/button-group/sup.vue

@@ -115,6 +115,7 @@ export default {
 }
 
 .tiny-button-group :deep(.sup-slot) {
+  display: flex;
   line-height: 1;
   padding: 0 4px;
   border-top-left-radius: 4px;

package/demos/pc/app/button-group/webdoc/button-group.js

@@ -149,6 +149,20 @@ export default {
         'en-US': '<p>The <code>change</code> event is triggered when the selected button is changed. </p>'
       },
       codeFiles: ['change-event.vue']
+    },
+    {
+      demoId: 'display-mode',
+      name: {
+        'zh-CN': '按钮组显示模式',
+        'en-US': 'Button Group Display Mode'
+      },
+      desc: {
+        'zh-CN':
+        '<p>通过 <code>display-mode</code> 属性设置按钮组显示模式，可选值有 <code>default</code>（默认）和 <code>merged</code>（选块合并）。</p>',
+        'en-US':
+        '<p>Set the display mode of the button group through the <code>display-mode</code> attribute. The optional values are: <code>default</code> (default) and <code>merged</code> (merged).</p>'
+      },
+      codeFiles: ['display-mode.vue']
     }
   ],
   features: [

package/demos/pc/app/calendar-view/calendar-event.spec.ts

@@ -4,7 +4,7 @@ test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar-view#calendar-event')
   const timeInput = page.locator('.tiny-calendar-view').locator('.tiny-input__inner')
-  const timeBtn = page.getByRole('textbox', { name: '年 05 月' })
+  const timeBtn = page.getByRole('combobox', { name: '年 05 月' })
   const leftYear = page.getByRole('button', { name: '前一年' })
   const month6 = page.getByText('6 月')
   const leftSvg = page.locator('.header-left > .tiny-svg')

package/demos/pc/app/calendar-view/custom-day-bg-color.vue

@@ -19,6 +19,16 @@ export default {
     setDayBgColor(date) {
       if (date.split('-')[2] === '10') {
         return 'red'
+      }else if (date.split('-')[2] === '15') {
+        return '#00FF00'
+      } else if (date.split('-')[2] === '20') {
+        return 'rgb(0,0,255)'
+      }else if (date.split('-')[2] === '25') {
+        return 'rgba(255,0,0,0.5)'
+      }else if( date.split('-')[2] === '5'){
+        return 'yellow'
+      }else if ( date.split('-')[2] === '8'){
+        return 'green'
       }
       return ''
     }

package/demos/pc/app/calendar-view/webdoc/calendar-view.js

@@ -139,9 +139,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey</p>\n',
+          '<p>自定义日期单元格背景色。</p>\n<p>目前支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey 和使用十六进制、rgb、rgba 的是自定义颜色</p>\n',
         'en-US':
-          '<p>Customize the background color of the date cell. </p>\n<p>Currently, only preset colors are supported. The options are blue, green, red, yellow, purple, cyan, and grey.</p>'
+          '<p>Customize the background color of date cells.</p>\n<p>Currently supports both preset colors (options include blue, green, red, yellow, purple, cyan, and grey) and custom colors defined using hexadecimal, RGB, or RGBA values.</p>'
       },
       codeFiles: ['custom-day-bg-color.vue']
     },
@@ -178,7 +178,7 @@ export default {
           '<p>mode-change：模式切换事件</p>',
         'en-US':
           '<p>Calendar throws the following events:</p>\n' +
-          '<p>date-click：日期点击事件: Date click event</p>\n' +
+          '<p>date-click：日期点击事件：Date click event</p>\n' +
           '<p>new-schedule: Add a schedule button click event</p>\n' +
           '<p>selected-date-change: selected date change event</p>\n' +
           '<p>prev-week-click: button click event of the last week</p>\n' +
@@ -346,7 +346,7 @@ export default {
         value: true
       },
       description:
-        '自定义日期单元格背景色，目前只支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey。',
+        '自定义日期单元格背景色，目前支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey 和使用十六进制、rgb、rgba 的是自定义颜色。',
       cloud: {
         value: false
       },

package/demos/pc/app/cascader/filter-mode-composition-api.vue

@@ -19,6 +19,8 @@
 import { ref } from 'vue'
 import { TinyCascader } from '@opentiny/vue'
 
+const value = ref('anzhuangcli')
+
 const options = ref([
   {
     value: 'zhinan',
@@ -167,6 +169,4 @@ const options = ref([
     ]
   }
 ])
-
-const value = 'anzhuangcli'
 </script>

package/demos/pc/app/checkbox/checked-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <tiny-checkbox-group v-model="checkedData">
-    <tiny-checkbox label="复选框 1" name="name1"></tiny-checkbox>
-    <tiny-checkbox label="复选框 2" name="name2" checked></tiny-checkbox>
-    <tiny-checkbox label="复选框 3" name="name3"></tiny-checkbox>
+    <tiny-checkbox label="复选框 1" name="name1" style="margin-bottom: 8px"></tiny-checkbox>
+    <tiny-checkbox label="复选框 2" name="name2" checked style="margin-bottom: 8px"></tiny-checkbox>
+    <tiny-checkbox label="复选框 3" name="name3" style="margin-bottom: 8px"></tiny-checkbox>
   </tiny-checkbox-group>
 </template>