@opentiny/vue-docs 3.24.6 → 3.26.0

package/demos/pc/app/action-menu/disabled-composition-api.vue

@@ -15,7 +15,7 @@ import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机',
@@ -38,7 +38,7 @@ const options = ref([
 
 const options1 = ref([
   {
-    label: '远程登陆',
+    label: '远程登录',
     icon: iconWebPlus()
   },
   {

package/demos/pc/app/action-menu/disabled.vue

@@ -20,7 +20,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机',
@@ -43,7 +43,7 @@ export default {
       ],
       options1: [
         {
-          label: '远程登陆',
+          label: '远程登录',
           icon: iconWebPlus()
         },
         {

package/demos/pc/app/action-menu/events-composition-api.vue

@@ -15,7 +15,7 @@ import { TinyActionMenu, TinyNotify } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/events.vue

@@ -20,7 +20,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/icon-composition-api.vue

@@ -23,7 +23,7 @@ import { iconWebPlus, iconSuccessful, iconShutdown, iconEllipsis } from '@openti
 
 const options = ref([
   {
-    label: '远程登陆',
+    label: '远程登录',
     icon: iconWebPlus()
   },
   {
@@ -45,7 +45,7 @@ const options = ref([
 
 const options1 = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/icon.vue

@@ -27,7 +27,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆',
+          label: '远程登录',
           icon: iconWebPlus()
         },
         {
@@ -48,7 +48,7 @@ export default {
       ],
       options1: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/max-show-num-composition-api.vue

@@ -8,7 +8,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/max-show-num.vue

@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/more-text-composition-api.vue

@@ -8,7 +8,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/more-text.vue

@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/popper-class-composition-api.vue

@@ -8,7 +8,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/popper-class.vue

@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/slot-item-composition-api.vue

@@ -14,7 +14,7 @@ import { iconSmile } from '@opentiny/vue-icon'
 
 const options = ref([
   {
-    name: '远程登陆'
+    name: '远程登录'
   },
   {
     name: '开机'

package/demos/pc/app/action-menu/slot-item.vue

@@ -20,7 +20,7 @@ export default {
     return {
       options: [
         {
-          name: '远程登陆'
+          name: '远程登录'
         },
         {
           name: '开机'

package/demos/pc/app/action-menu/spacing-composition-api.vue

@@ -12,7 +12,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    label: '远程登陆'
+    label: '远程登录'
   },
   {
     label: '开机'

package/demos/pc/app/action-menu/spacing.vue

@@ -17,7 +17,7 @@ export default {
     return {
       options: [
         {
-          label: '远程登陆'
+          label: '远程登录'
         },
         {
           label: '开机'

package/demos/pc/app/action-menu/text-field-composition-api.vue

@@ -8,7 +8,7 @@ import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
-    name: '远程登陆'
+    name: '远程登录'
   },
   {
     name: '开机'

package/demos/pc/app/action-menu/text-field.spec.ts

@@ -8,6 +8,6 @@ test('映射字段', async ({ page }) => {
   const actionMenu = wrap.locator('.tiny-action-menu')
   const visibleItem = actionMenu.locator('.tiny-action-menu__item')
 
-  await expect(visibleItem.first()).toHaveText('远程登陆')
+  await expect(visibleItem.first()).toHaveText('远程登录')
   await expect(visibleItem.nth(1)).toHaveText('开机')
 })

package/demos/pc/app/action-menu/text-field.vue

@@ -13,7 +13,7 @@ export default {
     return {
       options: [
         {
-          name: '远程登陆'
+          name: '远程登录'
         },
         {
           name: '开机'

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/button/icon-composition-api.vue

@@ -3,7 +3,9 @@
     <tiny-layout>
       <tiny-row>
         <tiny-button type="primary" :icon="TinyIconEdit"> 图标按钮 </tiny-button>
-        <tiny-button :icon="TinyIconSearch"> 图标按钮 </tiny-button>
+        <tiny-button :icon="TinyIconSearch" :custom-style="{ maxWidth: 'none' }">
+          图标按钮图标按钮图标按钮图标按钮
+        </tiny-button>
         <tiny-button type="success" :icon="TinyIconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="TinyIconMail"> 图标按钮 </tiny-button>
         <tiny-button type="warning" :icon="TinyIconStarO"> 图标按钮 </tiny-button>

package/demos/pc/app/button/icon.vue

@@ -3,7 +3,9 @@
     <tiny-layout>
       <tiny-row>
         <tiny-button type="primary" :icon="IconEdit"> 图标按钮 </tiny-button>
-        <tiny-button :icon="IconSearch"> 图标按钮 </tiny-button>
+        <tiny-button :icon="IconSearch" :custom-style="{ maxWidth: 'none' }">
+          图标按钮图标按钮图标按钮图标按钮
+        </tiny-button>
         <tiny-button type="success" :icon="IconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="IconMail"> 图标按钮 </tiny-button>
         <tiny-button type="warning" :icon="IconStarO"> 图标按钮 </tiny-button>

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

@@ -47,8 +47,9 @@ export default {
         'en-US': 'Icon Button'
       },
       desc: {
-        'zh-CN': '通过 <code>icon</code> 属性，设置按钮展示图标。',
-        'en-US': 'Display icons and receive an icon component through the <code>icon</code> settings button'
+        'zh-CN': '通过 <code>icon</code> 属性，设置按钮展示图标。<code>custom-style</code>属性设置按钮样式。',
+        'en-US':
+          'Display icons and receive an icon component through the <code>icon</code> settings button. The <code>custom-style</code> property sets the button style.'
       },
       codeFiles: ['icon.vue']
     },

package/demos/pc/app/calendar-view/calendar-mode-composition-api.vue

@@ -1,5 +1,11 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="6"
+    :modes="['month', 'timeline', 'schedule']"
+    :show-back-today="false"
+  >
   </tiny-calendar-view>
 </template>
 

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

@@ -9,6 +9,9 @@ test('显示模式', async ({ page }) => {
   const dmonthDom = page.locator('.tiny-calendar-view-month__main')
   const timelineDom = page.locator('.tiny-calendar-view-week__timeline')
   const scheduleDom = page.locator('.tiny-calendar-view-week__schedule')
+
+  const calendarHeader = page.locator('.tiny-calendar-view__header')
+  await expect(calendarHeader.locator('div').first()).not.toHaveClass('.tiny-button .tiny-button--default')
   // 验证按钮是否选中，验证时间组件页面是否正确
   await expect(monthBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
   await expect(dmonthDom).toBeVisible()

package/demos/pc/app/calendar-view/calendar-mode.vue

@@ -1,5 +1,11 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="6"
+    :modes="['month', 'timeline', 'schedule']"
+    :show-back-today="false"
+  >
   </tiny-calendar-view>
 </template>
 

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

@@ -174,24 +174,6 @@ export default {
       },
       codeFiles: ['carousel-events.vue']
     },
-    {
-      demoId: 'swipeable',
-      name: {
-        'zh-CN': '触屏轮播',
-        'en-US': 'Touchscreen Carousel'
-      },
-      desc: {
-        'zh-CN': ` 
-          通过<code>swipeable</code> 属性，让多端模板支持触屏轮播。<br>
-          通过 <code>lite</code> 属性打开精简模式，不显示切换按钮和指示器。
-        `,
-        'en-US': `
-          The <code>swipeable</code> attribute is used to support touchscreen carousel.<br>
-          Enable the compact mode with the <code>lite</code> attribute. The toggle button and indicator are not displayed.
-        `
-      },
-      codeFiles: ['swipeable.vue']
-    },
     {
       demoId: 'card-show',
       name: {

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 {