@opentiny/vue-docs 3.25.0 → 3.26.0

package/.stylelintrc.js

@@ -1,11 +1,11 @@
 module.exports = {
-  extends: 'stylelint-config-standard', //stylelint-config-airbnb
+  extends: 'stylelint-config-standard',
   rules: {
     'string-quotes': 'single',
     'property-no-unknown': true,
     'selector-pseudo-class-no-unknown': true,
     'at-rule-empty-line-before': 'always',
     'block-no-empty': true,
-    'indentation': 4 // http://cui.ulanqab.huawei.com/#/articalDetail?id=b76da810d8ed8
+    'indentation': 4
   }
 }

package/demos/apis/modal.js

@@ -241,7 +241,7 @@ export default {
             'en-US': "Whether the 'message' type pop-up window displays a close button"
           },
           mode: ['pc'],
-          pcDemo: 'message-closable'
+          pcDemo: 'message-close'
         },
         {
           name: 'min-height',

package/demos/apis/numeric.js

@@ -460,13 +460,13 @@ export default {
         },
         {
           name: 'input',
-          type: 'Function(value)',
+          type: '(event: InputEvent) => void',
           defaultValue: '',
           desc: {
             'zh-CN': '输入值时触发事件',
-            'en-US': ''
+            'en-US': 'Trigger event when input value is entered '
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
           mfDemo: ''
         }
       ],

package/demos/apis/search.js

@@ -218,6 +218,34 @@ export default {
           mode: ['pc'],
           pcDemo: 'events'
         },
+        {
+          name: 'collapse',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'mini模式的搜索框收回时触发的回调函数',
+            'en-US': 'The callback function triggered when the search box in mini mode is retracted'
+          },
+          meta: {
+            stable: '3.26.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'events'
+        },
+        {
+          name: 'expand',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'mini模式的搜索框展开时触发的回调函数',
+            'en-US': 'The callback function triggered when the search box in mini mode expands'
+          },
+          meta: {
+            stable: '3.26.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'events'
+        },
         {
           name: 'input',
           typeAnchorName: 'ITypeValue',

package/demos/apis/slider-button.js

@@ -5,6 +5,28 @@ export default {
       name: 'slider-button',
       type: 'component',
       props: [
+        {
+          name: 'disabled',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置滑块项禁用态',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'displayed',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '按钮内容是否全部展示，默认false',
+            'en-US': 'Set whether the button content is fully displayed, default is false'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
         {
           name: 'disabled',
           type: 'Boolean',

package/demos/apis/split.js

@@ -86,6 +86,17 @@ export default {
           mode: ['pc'],
           pcDemo: 'three-areas'
         },
+        {
+          name: 'trigger-simple',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用简易模式',
+            'en-US': 'Whether to enable simplified mode.'
+          },
+          mode: ['pc'],
+          pcDemo: 'trigger-simple'
+        },
         {
           name: 'border',
           type: 'boolean',

package/demos/apis/steps.js

@@ -120,13 +120,13 @@ export default {
           type: 'Object',
           defaultValue: '{}',
           meta: {
-            stable: '3.24.0'
+            stable: '3.26.0'
           },
           desc: {
             'zh-CN':
-              '自定义单链型步骤条块的内联样式，数据类型为{ [statusName: string]: styleObject },，不同状态可根据key值差异化配置， key值为status字段的值，value值为对应节点的样式对象',
+              '步骤条块的内联样式，数据类型为{ [statusName: string]: styleObject },，不同状态可根据key值差异化配置， key值为status字段的值，value值为对应节点的样式对象',
             'en-US':
-              'Customize the inline style of single chain step blocks, with data type {[statusName: string]: styleObject}. Different states can be configured differently based on key values, where the key value is the value of the status field and the value value is the style object of the corresponding node'
+              'Customize the inline style of step blocks, with data type {[statusName: string]: styleObject}. Different states can be configured differently based on key values, where the key value is the value of the status field and the value value is the style object of the corresponding node'
           },
           mode: ['mobile-first']
         },

package/demos/apis/tabs.js

@@ -294,6 +294,18 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'overflow-title',
           mfDemo: ''
+        },
+        {
+          name: 'header-only',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '当 header-only 为 true 时，页签内容不再渲染',
+            'en-US': 'When header-only is true, the tab content is no longer rendered'
+          },
+          mode: ['pc'],
+          pcDemo: 'header-only',
+          mfDemo: ''
         }
       ],
       events: [

package/demos/apis/time-line.js

@@ -199,6 +199,17 @@ export default {
           mode: ['mobile-first'],
           mfDemo: 'sub-field'
         },
+        {
+          name: 'text-position',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': `节点文案位置。默认名称和时间分别展示在图标上下方；可选值：'right'，只有名称展示名称在右方`,
+            'en-US': `Node copy position. The default name and time are displayed above and below the icon, respectively; optional value: 'right', where only the name is displayed on the right side. `
+          },
+          mode: ['pc'],
+          pcDemo: 'text-position'
+        },
         {
           name: 'time-field',
           type: 'string',
@@ -249,6 +260,15 @@ export default {
       ],
       methods: [],
       slots: [
+        {
+          name: 'default',
+          desc: {
+            'zh-CN': '组件默认插槽。组件显示为插槽内容',
+            'en-US': 'Component default slot. The component displays as the slot content. '
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-default'
+        },
         {
           name: 'bottom',
           desc: {

package/demos/mobile-first/app/slider-button/basic-usage.vue

@@ -1,9 +1,9 @@
 <template>
-  <tiny-slider-button-group v-model="radio2">
-    <tiny-slider-button label="1">选项</tiny-slider-button>
-    <tiny-slider-button label="2">选项选项选选项</tiny-slider-button>
-    <tiny-slider-button label="3">选项</tiny-slider-button>
-    <tiny-slider-button label="4">选项选项</tiny-slider-button>
+  <tiny-slider-button-group v-model="radio2" :displayed="false">
+    <tiny-slider-button label="1">选项选项选项选项选项选项</tiny-slider-button>
+    <tiny-slider-button label="2">选项选项选项选项选项选项</tiny-slider-button>
+    <tiny-slider-button label="3">选项选项</tiny-slider-button>
+    <tiny-slider-button label="4">选项</tiny-slider-button>
   </tiny-slider-button-group>
 </template>
 

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

@@ -10,7 +10,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>v-model</code> 绑定变量，设置的变量值为默认选中的 <code>Button</code>，变量值对应 <code>label</code> 属性的值。<br>\n          通过 <code>text</code> 也可以配置显示文本，与默认插槽配置纯文本的结果一致<br>\n          <code>label</code> 可以是 <code>String、Number 或 Boolean</code>。</p>',
+          '<p>通过 <code>v-model</code> 绑定变量，设置的变量值为默认选中的 <code>Button</code>，变量值对应 <code>label</code> 属性的值。<br>\n          通过 <code>text</code> 也可以配置显示文本，与默认插槽配置纯文本的结果一致<br>\n          <code>label</code> 可以是 <code>String、Number 或 Boolean</code>。<code>displayed</code>按钮内容是否全部展示。</p>',
         'en-US': '<p>button type</p>'
       },
       codeFiles: ['basic-usage.vue']

package/demos/mobile-first/app/steps/advanced-steps.vue

@@ -1,5 +1,12 @@
 <template>
-  <tiny-steps ref="steps" advanced :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
+  <tiny-steps
+    ref="steps"
+    advanced
+    :item-style="{ disabled: { background: 'yellow', maxWidth: '360px' } }"
+    :data="data"
+    :active="advancedActive"
+    @click="advancedClick"
+  ></tiny-steps>
 </template>
 
 <script>

package/demos/mobile-first/menus.js

@@ -8,6 +8,15 @@ export const standaloneMenus = [
 export const docMenus = []
 
 export const cmpMenus = [
+  {
+    'label': '基础',
+    'labelEn': 'Basic',
+    'key': 'cmp-frame-style',
+    'children': [
+      { 'nameCn': '按钮', 'name': 'Button', 'key': 'button' },
+      { 'nameCn': '分割线', 'name': 'Divider', 'key': 'divider' }
+    ]
+  },
   {
     label: '导航组件',
     labelEn: 'Navigation',
@@ -21,9 +30,6 @@ export const cmpMenus = [
       { name: 'Steps ', nameCn: '步骤条', key: 'steps' },
       { name: 'Tabs ', nameCn: '标签页', key: 'tabs' },
       { name: 'Menu ', nameCn: '菜单', key: 'menu' },
-      { name: 'TimeLine ', nameCn: '时间线', key: 'time-line' },
-      //  测试时打开该行---------------
-      // { name: 'TimeLineNew ', nameCn: '时间线AUI', key: 'time-line-new' },
       { name: 'Dropdown ', nameCn: '下拉菜单', key: 'dropdown' },
       { name: 'Flowchart ', nameCn: '流程图', key: 'flowchart' }
     ]
@@ -56,7 +62,6 @@ export const cmpMenus = [
       { name: 'DatePickerMobile', nameCn: '日期选择器', key: 'date-picker-mobile' },
       { name: 'DatePicker', nameCn: '日期选择器多端', key: 'date-picker' },
       { name: 'TimePickerMobile', nameCn: '时间选择器', key: 'time-picker-mobile' },
-      { name: 'Button', nameCn: '按钮', key: 'button' },
       { name: 'Checkbox', nameCn: '复选框', key: 'checkbox' },
       { name: 'FluentEditor', nameCn: '富文本', key: 'fluent-editor' },
       { name: 'Form', nameCn: '表单', key: 'form' },
@@ -78,7 +83,7 @@ export const cmpMenus = [
     ]
   },
   {
-    label: '数据组件',
+    label: '数据展示',
     labelEn: 'Data',
     key: 'cmp-data-components',
     children: [
@@ -86,7 +91,10 @@ export const cmpMenus = [
       { name: 'StandardListItem', nameCn: '标准列表项', key: 'standard-list-item' },
       { name: 'Progress', nameCn: '进度条', key: 'progress' },
       { name: 'PullRefresh', nameCn: '下拉刷新', key: 'pull-refresh' },
-      { name: 'Pager', nameCn: '分页', key: 'pager' }
+      { name: 'Pager', nameCn: '分页', key: 'pager' },
+      { name: 'TimeLine ', nameCn: '时间线', key: 'time-line' }
+      //  测试时打开该行---------------
+      // { name: 'TimeLineNew ', nameCn: '时间线AUI', key: 'time-line-new' },
     ]
   },
   {
@@ -96,7 +104,7 @@ export const cmpMenus = [
     'children': [{ 'nameCn': '基本用法', 'name': 'Grid', 'key': 'grid' }]
   },
   {
-    label: '提示组件',
+    label: '反馈',
     labelEn: 'Tooltip',
     key: 'cmp-tips-components',
     children: [
@@ -125,8 +133,7 @@ export const cmpMenus = [
       { name: 'Amount', nameCn: '金额', key: 'amount' },
       { name: 'currency', nameCn: '币种', key: 'currency' },
       { name: 'CalendarView', nameCn: '日历', key: 'calendar-view' },
-      { name: 'FloatingButton', nameCn: '悬浮按钮', key: 'floating-button' },
-      { name: 'Divider', nameCn: '分割线', key: 'divider' }
+      { name: 'FloatingButton', nameCn: '悬浮按钮', key: 'floating-button' }
     ]
   }
 ]

package/demos/pc/app/amount/custom-service.spec.js

@@ -10,9 +10,9 @@ test('自定义服务', async ({ page }) => {
     .filter({ hasText: /^币种MZNCNY$/ })
     .getByRole('textbox')
     .click()
-  await page.getByRole('listitem').filter({ hasText: 'MZN' }).click()
-  await page.getByRole('textbox').nth(3).click()
-  await page.getByRole('textbox').nth(3).fill('100')
+  await page.getByRole('listitem').filter({ hasText: /MZN/ }).locator('div').click()
+  await page.getByRole('tooltip', { name: '币种 MZN 金额 确定 重置' }).getByRole('textbox').nth(1).click()
+  await page.getByRole('tooltip', { name: '币种 MZN 金额 确定 重置' }).getByRole('textbox').nth(1).fill('100')
   await page.getByRole('button', { name: '确定' }).click()
-  expect(await page.locator('.reference-wrapper input').inputValue()).toEqual('$100.00')
+  expect(await demo.locator('.reference-wrapper input').inputValue()).toEqual('$100.00')
 })

package/demos/pc/app/base-select/slot-reference.spec.ts

@@ -12,5 +12,5 @@ test('custom-reference', async ({ page }) => {
 
   await expect(option).toHaveCount(0)
   await reference.click()
-  await page.getByRole('listitem', { name: '北京' }).locator('span').click()
+  await page.getByRole('listitem').filter({ hasText: /北京/ }).locator('span').click()
 })

package/demos/pc/app/color-picker/alpha-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-color-picker @confirm="onConfirm" @cancel="onCancel" alpha />
+  <tiny-color-picker @confirm="onConfirm" v-model="color" @cancel="onCancel" alpha />
 </template>
 
 <script setup>

package/demos/pc/app/color-picker/alpha.spec.ts

@@ -8,7 +8,7 @@ test('测试 Alpha', async ({ page }) => {
   await page.getByRole('button', { name: '取消' }).click()
   await page.getByText('用户选择了取消').click()
   await page.locator('.tiny-color-picker__inner').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   // default is hex
-  await page.getByText('#804040FF').click()
+  await page.getByText('#66CCFFFF').click()
 })

package/demos/pc/app/color-picker/alpha.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-color-picker @confirm="onConfirm" @cancel="onCacnel" alpha />
+  <tiny-color-picker @confirm="onConfirm" v-model="color" @cancel="onCacnel" alpha />
 </template>
 
 <script>

package/demos/pc/app/color-picker/base.spec.ts

@@ -5,8 +5,8 @@ test('基本用法', async ({ page }) => {
   await page.goto('color-picker#basic-usage')
   await page.locator('.tiny-color-picker__inner').click()
   await page.locator('.black').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.locator('.tiny-color-picker__inner').click()
   await page.locator('.tiny-color-select-panel__inner__color-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/color-picker/default-visible.spec.ts

@@ -4,5 +4,5 @@ test('默认显示色盘', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#default-visible')
   await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/color-picker/event-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-color-picker @confirm="onConfirm" @cancel="onCancel" />
+  <tiny-color-picker v-model="color" @confirm="onConfirm" @cancel="onCancel" />
 </template>
 
 <script setup>
@@ -15,7 +15,7 @@ const onConfirm = (hex) => {
   TinyNotify({
     type: 'success',
     position: 'top-right',
-    title: '用户点击了选择',
+    title: '用户点击了确定',
     message: hex
   })
 }

package/demos/pc/app/color-picker/event.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('事件触发', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#event')
-  await page.locator('#event').getByRole('img').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.locator('#event').getByRole('img').first().click()
-  await page.getByRole('button', { name: '取消' }).click()
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await page.getByText('用户点击了确定').click()
 })

package/demos/pc/app/color-picker/event.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-color-picker @confirm="onConfirm" @cancel="onCacnel" />
+  <tiny-color-picker v-model="color" @confirm="onConfirm" @cancel="onCacnel" />
 </template>
 
 <script>

package/demos/pc/app/color-picker/format.spec.ts

@@ -12,9 +12,9 @@ test('hex 时应该为#xxx', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#format')
   await page.locator('.tiny-color-picker__inner').click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.locator('.tiny-input__suffix-inner svg').click()
   await page.getByRole('list').getByText('hex').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText('颜色值：#66CCFF')
 })
 
@@ -22,9 +22,9 @@ test('hsl 时应该为 hsl(xxx,xxx,xxx)', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#format')
   await page.locator('.tiny-color-picker__inner').click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.locator('.tiny-input__suffix-inner svg').click()
   await page.getByRole('list').getByText('hsl').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText('颜色值：hsl')
 })
 
@@ -32,8 +32,8 @@ test('hsv 时候应该为 hsv(xx,xx,xx)', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#format')
   await page.locator('.tiny-color-picker__inner').click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.locator('.tiny-input__suffix-inner svg').click()
   await page.getByRole('list').getByText('hsv').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText('颜色值：hsv')
 })

package/demos/pc/app/color-picker/history.spec.ts

@@ -5,11 +5,5 @@ test('测试历史记录', async ({ page }) => {
   await page.goto('color-picker#history')
   await page.getByRole('button', { name: 'Toggle History visibility' }).click()
   await page.locator('.tiny-color-picker__inner').click()
-  await expect(page.getByRole('button', { name: '历史记录' })).toBeVisible()
-  await page.getByRole('button', { name: '历史记录' }).click()
-  await expect(page.getByText('暂无', { exact: true })).toBeVisible()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.getByRole('button', { name: 'Append history color' }).click()
-  await page.locator('.tiny-color-picker__inner').click()
-  await page.getByRole('button', { name: '历史记录' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/color-picker/predefine.spec.ts

@@ -5,23 +5,16 @@ test('测试预定义颜色', async ({ page }) => {
   await page.goto('color-picker#predefine')
   await page.getByRole('button', { name: 'Toggle predefine visibility' }).click()
   await page.locator('.tiny-color-picker__inner').click()
-  await expect(page.getByRole('button', { name: '预定义颜色' })).toBeVisible()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
   await expect(page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)')).toBeVisible()
-  await page.getByText('取消选择预定义颜色Append predefine').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.getByRole('button', { name: 'Append predefine color' }).click()
   await page.locator('.tiny-color-picker__inner').click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
   await expect(page.locator('.tiny-color-select-panel__predefine > div:nth-child(9)')).toBeVisible()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.getByRole('button', { name: 'Pop predefine color' }).click()
   await page.locator('.tiny-color-picker').click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
   await expect(page.locator('.tiny-color-select-panel__predefine > div:nth-child(9)')).not.toBeVisible()
   await expect(page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)')).toBeVisible()
   await page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.locator('.tiny-color-picker__inner').click()
-  await page.getByText('取消选择预定义颜色Append predefine').click()
+  await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/color-picker/size.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('测试尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#size')
-  await expect(page.locator('.tiny-color-picker.tiny-color-picker--large')).toHaveCSS('width', '48px')
-  await expect(page.locator('.tiny-color-picker.tiny-color-picker--medium')).toHaveCSS('width', '40px')
-  await expect(page.locator('.tiny-color-picker.tiny-color-picker--small')).toHaveCSS('width', '28px')
-  await expect(page.locator('.tiny-color-picker.tiny-color-picker--mini')).toHaveCSS('width', '24px')
+  await expect(page.locator('.tiny-color-picker.tiny-color-picker--large')).toHaveCSS('width', '32px')
+  await expect(page.locator('.tiny-color-picker.tiny-color-picker--medium')).toHaveCSS('width', '24px')
+  await expect(page.locator('.tiny-color-picker.tiny-color-picker--small')).toHaveCSS('width', '20px')
+  await expect(page.locator('.tiny-color-picker.tiny-color-picker--mini')).toHaveCSS('width', '16px')
 })

package/demos/pc/app/color-select-panel/format.spec.ts

@@ -12,7 +12,7 @@ test('hex', async ({ page }) => {
   await page.getByRole('button', { name: 'Toggle' }).click()
   await page.getByRole('textbox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hex').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('#format')).toContainText('颜色值：#66CCFF')
 })
 
@@ -20,12 +20,6 @@ test('hsl 时应该为 hsl(xxx,xxx,xxx)', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#format')
   await page.getByRole('button', { name: 'Toggle' }).click()
-  await page
-    .locator('div')
-    .filter({ hasText: /^rgbhexhslhsv取消选择$/ })
-    .getByRole('img')
-    .click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
   await page.getByRole('textbox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hsl').click()
 })
@@ -36,6 +30,6 @@ test('hsv 时候应该为 hsv(xx,xx,xx)', async ({ page }) => {
   await page.getByRole('button', { name: 'Toggle' }).click()
   await page.getByRole('textbox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hsv').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('#format')).toContainText('颜色值：hsv(199.99999999999997, 60%, 100%)')
 })

package/demos/pc/app/color-select-panel/history.spec.ts

@@ -5,8 +5,6 @@ test('历史记录', async ({ page }) => {
   await page.goto('color-select-panel#history')
   await page.getByRole('button', { name: 'Toggle History visibility' }).click()
   await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await expect(page.getByRole('button', { name: '历史记录' })).toBeVisible()
   await page.getByRole('button', { name: 'Toggle History visibility' }).click()
   await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await expect(page.getByRole('button', { name: '历史记录' })).not.toBeVisible()
 })

package/demos/pc/app/color-select-panel/predefine.spec.ts

@@ -6,15 +6,12 @@ test('预定义颜色', async ({ page }) => {
 
   await page.getByRole('button', { name: 'Toggle Predefine color' }).click()
   await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
   expect(page.locator('.tiny-color-select-panel__predefine__color-block')).toHaveCount(8)
   await page.getByRole('button', { name: 'Append predefine color' }).click()
   await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
   expect(page.locator('.tiny-color-select-panel__predefine__color-block')).toHaveCount(9)
   await page.getByRole('button', { name: 'Pop predefine color' }).click()
   await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
   expect(page.locator('.tiny-color-select-panel__predefine__color-block')).toHaveCount(8)
   await page.getByRole('button', { name: 'Toggle Predefine color' }).click()
   await page.getByRole('button', { name: 'Show Color select panel' }).click()

package/demos/pc/app/container/basic-usage-composition-api.vue

@@ -58,27 +58,27 @@ const pattern = ref('default')
 }
 
 .demo-container .tiny-container :deep(.tiny-container__header) {
-  background-color: var(--tv-color-info-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-info-text);
+  background-color: var(--tv-color-info-bg-light, #0067d1);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-info-text, #fff);
   line-height: 48px;
 }
 
 .demo-container .tiny-container :deep(.tiny-container__aside) {
-  background-color: var(--tv-color-error-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-error-text);
+  background-color: var(--tv-color-error-bg-light, #0067d180);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-error-text, #fff);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__main) {
-  background-color: var(--tv-color-warn-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-warn-bg-light, #0067d133);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-warn-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__footer) {
-  background-color: var(--tv-color-success-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-success-bg-light, #f0f7ff);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-success-text);
 }
 .demo-center {