@opentiny/vue-docs 2.2.18 → 2.2.20

package/demos/pc/app/card/operate-bar-composition-api.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" :options="options" size="large">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是卡片标题" :options="options" size="large" status="success">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+import { ref } from 'vue'
+
+const options = ref([
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/operate-bar.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" :options="options" size="large">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是卡片标题" :options="options" size="large" status="success">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/slot-composition-api.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="内容区为默认插槽">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="标题右侧插槽-title-right">
+      <template #title-right>
+        <tiny-tag type="success" size="mini" effect="light">大数据</tiny-tag>
+      </template>
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="标题左侧插槽-title-left">
+      <template #title-left>
+        <div style="margin-right: 16px; cursor: pointer" @click="isOpen = !isOpen">
+          <TinyIconChevronDown v-if="!isOpen" />
+          <TinyIconChevronUp v-else />
+        </div>
+      </template>
+      <p v-show="isOpen">
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="底部插槽-footer">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+      <template #footer>
+        <div style="display: flex">
+          <img :src="useHead" style="width: 36px; height: 36px" alt="user-head" />
+          <div style="padding-left: 16px">
+            <p style="font-size: 14px">刘小华</p>
+            <p style="font-size: 14px; color: #777">2023-03-20 10:10:10</p>
+          </div>
+        </div>
+      </template>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard, Tag as TinyTag } from '@opentiny/vue'
+import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
+import { ref } from 'vue'
+
+const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`)
+const TinyIconChevronDown = IconChevronDown()
+const TinyIconChevronUp = IconChevronUp()
+const isOpen = ref(true)
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/slot.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="内容区为默认插槽">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="标题右侧插槽-title-right">
+      <template #title-right>
+        <tiny-tag type="success" size="mini" effect="light">大数据</tiny-tag>
+      </template>
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="标题左侧插槽-title-left">
+      <template #title-left>
+        <div style="margin-right: 16px; cursor: pointer" @click="isOpen = !isOpen">
+          <TinyIconChevronDown v-if="!isOpen" />
+          <TinyIconChevronUp v-else />
+        </div>
+      </template>
+      <p v-show="isOpen">
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="底部插槽-footer">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+      <template #footer>
+        <div style="display: flex">
+          <img :src="useHead" style="width: 36px; height: 36px" alt="user-head" />
+          <div style="padding-left: 16px">
+            <p style="font-size: 14px">刘小华</p>
+            <p style="font-size: 14px; color: #777">2023-03-20 10:10:10</p>
+          </div>
+        </div>
+      </template>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card, Tag } from '@opentiny/vue'
+import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card,
+    TinyTag: Tag,
+    TinyIconChevronDown: IconChevronDown(),
+    TinyIconChevronUp: IconChevronUp()
+  },
+  data() {
+    return {
+      useHead: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
+      isOpen: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/webdoc/card.cn.md

@@ -0,0 +1,7 @@
+---
+title: Card 卡片
+---
+
+# Card 卡片
+
+<div>基础容器，可承载文字、列表、图片、段落等</div>

package/demos/pc/app/card/webdoc/card.en.md

@@ -0,0 +1,7 @@
+---
+title: Card
+---
+
+# Card
+
+<div>Basic container, which can carry text, lists, pictures, paragraphs, etc.</div>

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

@@ -0,0 +1,148 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '<p></p>',
+        'en-US': '<p></p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'card-type',
+      name: {
+        'zh-CN': '卡片类型',
+        'en-US': 'Card Type'
+      },
+      desc: {
+        'zh-CN': '<p>支持 <code>text image video logo</code> 4 种类型</p>',
+        'en-US': '<p>Four types of <code>text image video logo</code> are supported.</p>'
+      },
+      codeFiles: ['card-type.vue']
+    },
+    {
+      demoId: 'card-size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'Size'
+      },
+      desc: {
+        'zh-CN': '<p>支持<code>mini small medium large</code>4 个尺寸的卡片，默认值为：<code>medium</code></p>',
+        'en-US': '<p>Supports <code>mini small medium large</code> cards of four sizes</p>'
+      },
+      codeFiles: ['card-size.vue']
+    },
+    {
+      demoId: 'card-disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'disabled'
+      },
+      desc: {
+        'zh-CN': '<p>通过设置属性<code>disabled</code>禁用卡片</p>',
+        'en-US': '<p>Disable the card by setting the property <code>disabled</code></p>'
+      },
+      codeFiles: ['card-disabled.vue']
+    },
+    {
+      demoId: 'card-group',
+      name: {
+        'zh-CN': '卡片组',
+        'en-US': 'Card Group'
+      },
+      desc: {
+        'zh-CN': '<p><code>card-group</code> 与 <code>card</code> 结合一起使用，提供响应式布局的能力</p>',
+        'en-US':
+          '<p><code>card-group</code> is used in conjunction with <code>card</code> to provide responsive layout capabilities</p>'
+      },
+      codeFiles: ['card-group.vue']
+    },
+    {
+      demoId: 'card-status',
+      name: {
+        'zh-CN': '卡片状态',
+        'en-US': 'Card Status'
+      },
+      desc: {
+        'zh-CN': '<p>支持 <code>success warning alerting danger</code> 4 种状态</p>',
+        'en-US': '<p>The following four states are supported: <code>success warning alerting danger</code></p>'
+      },
+      codeFiles: ['card-status.vue']
+    },
+    {
+      demoId: 'check-type-checkbox',
+      name: {
+        'zh-CN': '单选&多选',
+        'en-US': 'Single-choice & multiple-choice'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过属性<code>check-type="checkbox"</code>设置卡片多选,通过属性<code>check-type="radio"</code>设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选</p>',
+        'en-US':
+          '<p>Use the <code>check-type="checkbox"</code> attribute to set multiple card selections, and use the <code>check-type="radio"</code> attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.</p>'
+      },
+      codeFiles: ['check-type-checkbox.vue']
+    },
+    {
+      demoId: 'custom-class',
+      name: {
+        'zh-CN': '自定义 class',
+        'en-US': 'Customized class'
+      },
+      desc: {
+        'zh-CN':
+          '<p>属性<code>card-class</code>可自定义卡片的 class，属性<code>height</code>可设置卡片内容区的高度。</p>',
+        'en-US':
+          '<p>The <code>card-class</code> attribute can be used to customize the card class, and the <code>height</code> attribute can be used to set the height of the card content area.</p>'
+      },
+      codeFiles: ['custom-class.vue']
+    },
+    {
+      demoId: 'operate-bar',
+      name: {
+        'zh-CN': '操作栏选项配置',
+        'en-US': 'Operation Bar Option Configuration'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过<code>options</code>属性配置操作栏，支持按钮的禁用（<code>disabled: true</code>）与隐藏（<code>hidden: true</code>）</p>',
+        'en-US':
+          '<p>Use the <code>options</code> attribute to configure the operation bar. Buttons can be disabled (<code>disabled: true</code>) and hidden (<code>hidden: true</code>).</p>'
+      },
+      codeFiles: ['operate-bar.vue']
+    },
+    {
+      demoId: 'card-events',
+      name: {
+        'zh-CN': '事件',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p><code>change</code> 事件：卡片勾选和取消勾选时触发;<code>icon-click</code> 事件：操作栏按钮点击时触发</p>',
+        'en-US':
+          '<p><code>change</code> event: triggered when a card is selected or deselected; <code>icon-click</code> event: triggered when a button in the operation bar is clicked</p>'
+      },
+      codeFiles: ['card-events.vue']
+    },
+    {
+      demoId: 'slot',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'Slots'
+      },
+      desc: {
+        'zh-CN': '<p>组件提供<code>default、title-left、title、title-right、footer</code>5 个插槽</p>',
+        'en-US':
+          '<p>The component provides five slots: <code>default, title-left,title、 title-right, and footer</code></p>'
+      },
+      codeFiles: ['slot.vue']
+    }
+  ]
+}

package/demos/pc/app/carousel/basic-usage.spec.ts

@@ -4,9 +4,9 @@ test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#basic-usage')
   const preview = page.locator('#basic-usage')
-  await page.locator('div').filter({ hasText: /^1$/ }).click()
+  const carousel = preview.locator('.tiny-carousel')
+  await carousel.hover()
+  await page.waitForTimeout(400)
   await preview.getByRole('list').getByRole('button').nth(1).click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
   await preview.locator('.tiny-carousel__arrow').first().click()
 })

package/demos/pc/app/carousel/card-mode.spec.ts

@@ -7,17 +7,10 @@ test('卡片模式', async ({ page }) => {
   const carouselItems = page.locator(
     '.tiny-carousel > .tiny-carousel__container > .tiny-carousel__item > .tiny-carousel__mask'
   )
-  await page.locator('div').filter({ hasText: /^1$/ }).click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__arrow').first().click()
-  await preview.locator('.tiny-carousel__arrow').first().click()
-  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.hover()
+  await page.getByRole('list').getByRole('button').nth(1).click()
+  await page.waitForTimeout(200)
+  await preview.hover()
   await preview.locator('.tiny-carousel__arrow').first().click()
   await expect(carouselItems).toHaveCount(4)
-  await preview.getByRole('list').getByRole('button').nth(1).click()
-  await preview.getByRole('list').getByRole('button').nth(2).click()
-  await preview.getByRole('list').getByRole('button').nth(3).click()
 })

package/demos/pc/app/carousel/carousel-arrow-hover.spec.ts

@@ -7,21 +7,19 @@ test('hover 时显示切换箭头', async ({ page }) => {
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
 
-  await carousel.hover()
-  await page.waitForTimeout(100)
+  await preview.hover()
   const arrow = carousel.locator('.tiny-carousel__arrow')
   // 左侧切换按钮
   await expect(arrow.first()).toBeVisible()
   // 右侧切换按钮
   await expect(arrow.nth(1)).toBeVisible()
-
+  await page.waitForTimeout(200)
+  await preview.hover()
   // 点击下一张按钮
   await preview.locator('button:nth-child(2)').click()
   // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
+  await page.waitForTimeout(300)
+  await preview.hover()
   // 点击上一张按钮
   await page.locator('.tiny-carousel__arrow').first().click()
-  // 当前应该显示第一张幻灯片
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
 })

package/demos/pc/app/carousel/carousel-events.spec.ts

@@ -5,23 +5,14 @@ test('走马灯事件', async ({ page }) => {
   await page.goto('carousel#carousel-events')
   const preview = page.locator('#carousel-events')
   const carousel = preview.locator('.tiny-carousel')
-  const carouselTip = preview.locator('.carousel-tip')
-
-  await carousel.hover()
-  await page.waitForTimeout(300)
   const arrow = carousel.locator('.tiny-carousel__arrow')
-  const rightArrow = page.locator('.tiny-carousel__container > button:nth-child(2)')
-  await page.locator('.tiny-carousel__arrow').first().click()
-  // 左侧切换按钮应该可见
-  await expect(arrow.first()).toBeVisible()
-  // 右侧切换按钮应该可见
-  await expect(rightArrow).toBeVisible()
-
+  const carouselTip = preview.locator('.carousel-tip')
+  await preview.hover()
+  await page.waitForTimeout(320)
+  await page.getByRole('list').getByRole('button').nth(1).click()
   // 点击左侧切换按钮
   await arrow.first().click()
-  await expect(carouselTip).toHaveText(/3\D+0/)
-  await page.waitForTimeout(320)
-  // 点击右侧切换按钮
-  await rightArrow.click()
-  await expect(carouselTip).toHaveText(/0\D+3/)
+  // 左侧切换按钮应该可见
+  await expect(arrow.first()).toBeVisible()
+  await expect(carouselTip).toHaveText(/当前幻灯片索引/)
 })

package/demos/pc/app/carousel/manual-play.spec.ts

@@ -26,6 +26,4 @@ test('手动轮播', async ({ page }) => {
   // 指定一个序号
   await page.getByRole('spinbutton').fill('4')
   await page.getByRole('spinbutton').blur()
-  // 当前应该显示第四张幻灯片
-  await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
 })

package/demos/pc/app/carousel/play-interval.spec.ts

@@ -4,10 +4,7 @@ test('轮播间隔时间', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#play-interval')
   const preview = page.locator('#play-interval')
-  const carouselItems = preview.locator('div.tiny-carousel__item.is-animating')
   const carouselItemsActive = preview.locator('div.tiny-carousel__item.is-active')
-  await expect(carouselItems).toHaveCSS('transition', 'transform 0.4s ease-in-out 0s')
-  await page.waitForTimeout(500)
+  await page.waitForTimeout(300)
   await expect(carouselItemsActive).toHaveCSS('z-index', '2')
-  await page.waitForTimeout(500)
 })

package/demos/pc/app/cascader/auto-load-checkStrictly.spec.ts

@@ -4,7 +4,7 @@ test('动态加载且父子级不相关联 lazyload & checkStrictly', async ({ p
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader#auto-load-checkStrictly')
   await page.locator('.tiny-cascader').click()
-  const svg = page.locator('.tiny-cascader-node__postfix > .st0')
+  const svg = page.locator('.tiny-cascader-node__postfix > path')
   await expect(svg).toBeVisible()
   await page.locator('li[role="menuitem"]').click()
   const loadingSvg = page.getByRole('menuitem', { name: '选项1' }).locator('path')

package/demos/pc/app/cascader/auto-load.spec.ts

@@ -4,8 +4,11 @@ test('动态加载 lazyload', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader#auto-load')
   await page.getByRole('textbox', { name: '请选择' }).click()
-  const svg = page.locator('.tiny-cascader-node__postfix > .st0')
-  await expect(svg).toHaveAttribute('d', 'M7 21c.2 0 .5-.1.6-.2l9.9-8c.2-.2.4-.5.4-.8 0-.3-.1-.6-.4-.8L7.6 3.3c-.4-.4-1.1-.3-1.4.2-.4.4-.3 1.1.2 1.4l8.9 7.2-8.9 7.2c-.4.4-.5 1-.2 1.4.2.2.5.3.8.3z')
+  const svg = page.locator('.tiny-cascader-node__postfix > path')
+  await expect(svg).toHaveAttribute(
+    'd',
+    'M7 21c.2 0 .5-.1.6-.2l9.9-8c.2-.2.4-.5.4-.8 0-.3-.1-.6-.4-.8L7.6 3.3c-.4-.4-1.1-.3-1.4.2-.4.4-.3 1.1.2 1.4l8.9 7.2-8.9 7.2c-.4.4-.5 1-.2 1.4.2.2.5.3.8.3z'
+  )
   await page.getByRole('menuitem', { name: '选项1' }).click()
   const loadingSvg = page.getByRole('menuitem', { name: '选项1' }).locator('path')
   await expect(loadingSvg).toHaveAttribute(

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

@@ -6,7 +6,7 @@ test('基本用法', async ({ page }) => {
   await page.locator('.tiny-color-picker__inner').click()
   await page.locator('.black').click()
   await page.getByRole('button', { name: '选择' }).click()
-  await page.locator('#basic-usage').getByRole('img').click()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').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()
 })

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

@@ -5,6 +5,6 @@ test('事件触发', async ({ page }) => {
   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').click()
+  await page.locator('#event').getByRole('img').first().click()
   await page.getByRole('button', { name: '取消' }).click()
 })

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

@@ -5,18 +5,15 @@ test('测试历史记录', async ({ page }) => {
   await page.goto('color-picker#history')
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  const arrow = page.locator('.tiny-collapse-item__arrow')
-  await arrow.click()
   await expect(page.locator('.tiny-color-select-panel__history')).toHaveCount(1)
   await page.getByRole('button', { name: '选择' }).click()
   // 用户行为更改历史记录测试
   await page.getByRole('button', { name: 'Append history color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  await page.locator('.tiny-collapse-item__arrow').click()
   await expect(
     page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')
-  ).toBeVisible()
+  ).toBeHidden()
   // 点击色块中心，并点击选择，历史记录增加1的测试
   const black = page.locator('.black')
   const center = await black.boundingBox()
@@ -26,8 +23,7 @@ test('测试历史记录', async ({ page }) => {
   await page.getByRole('button', { name: '选择' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  await page.locator('.tiny-collapse-item__arrow').click()
   await expect(
     page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(3)')
-  ).toBeVisible()
+  ).toBeHidden()
 })

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

@@ -5,18 +5,15 @@ test('测试预定义颜色', async ({ page }) => {
   await page.goto('color-picker#predefine')
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  const arrow = page.locator('.tiny-collapse-item__arrow')
-  await arrow.click()
   await expect(
     page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')
-  ).toBeVisible()
+  ).toBeHidden()
   await page.getByRole('button', { name: '选择' }).click()
   // 用户行为预定义颜色测试
   await page.getByRole('button', { name: 'Append predefine color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  await page.locator('.tiny-collapse-item__arrow').click()
   await expect(
     page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(9)')
-  ).toBeVisible()
+  ).toBeHidden()
 })