@opentiny/vue-docs 3.17.4 → 3.18.0

package/demos/pc/app/fluent-editor/image-upload.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import { Modal } from '@opentiny/vue'
+import { TinyFluentEditor } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}',
+      imageUpload: {
+        url: 'https://run.mocky.io/v3/f34365b4-679d-4e8f-8313-ddb11d6750be',
+        method: 'POST',
+        name: 'image',
+        withCredentials: true,
+        headers: {},
+        success: (serverResponse, next) => {
+          let file = {}
+
+          // eslint-disable-next-line no-unreachable-loop
+          for (const key in serverResponse) {
+            file = serverResponse[key]
+            break
+          }
+
+          next(file.downloadUrl)
+        },
+        fail: (serverError) => {
+          Modal.message({
+            message: `上传失败回调事件：${serverError}`,
+            status: 'info'
+          })
+        }
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/fluent-editor/options-composition-api.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :options="options"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyFluentEditor } from '@opentiny/vue'
+
+const content = ref('')
+const options = ref({
+  placeholder: '请输入内容',
+  modules: {
+    // 工具栏
+    toolbar: [
+      ['bold', 'italic', 'underline', 'strike'],
+      [{ list: 'bullet' }, { list: 'ordered' }],
+      [{ align: '' }, { align: 'center' }, { align: 'right' }],
+      ['better-table'],
+      ['fullscreen']
+    ],
+    // 字数统计
+    counter: true,
+    // 表格
+    'better-table': {
+      operationMenu: {
+        color: {
+          text: '主题色',
+          colors: [
+            '#ffffff',
+            '#f2f2f2',
+            '#dddddd',
+            '#a6a6a6',
+            '#666666',
+            '#000000',
+            '#c00000',
+            '#ff0000',
+            '#ffc8d3',
+            '#ffc000',
+            '#ffff00',
+            '#fff4cb',
+            '#92d050',
+            '#00b050',
+            '#dff3d2',
+            '#00b0f0',
+            '#0070c0',
+            '#d4f1f5',
+            '#002060',
+            '#7030a0',
+            '#7b69ee',
+            '#1476ff',
+            '#ec66ab',
+            '#42b883'
+          ]
+        }
+      }
+    }
+  }
+})
+</script>

package/demos/pc/app/fluent-editor/options.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :options="options"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import { TinyFluentEditor } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '',
+      options: {
+        placeholder: '请输入内容',
+        modules: {
+          // 工具栏
+          toolbar: [
+            ['bold', 'italic', 'underline', 'strike'],
+            [{ list: 'bullet' }, { list: 'ordered' }],
+            [{ align: '' }, { align: 'center' }, { align: 'right' }],
+            ['better-table'],
+            ['fullscreen']
+          ],
+          // 字数统计
+          counter: true,
+          // 表格
+          'better-table': {
+            operationMenu: {
+              color: {
+                text: '主题色',
+                colors: [
+                  '#ffffff',
+                  '#f2f2f2',
+                  '#dddddd',
+                  '#a6a6a6',
+                  '#666666',
+                  '#000000',
+                  '#c00000',
+                  '#ff0000',
+                  '#ffc8d3',
+                  '#ffc000',
+                  '#ffff00',
+                  '#fff4cb',
+                  '#92d050',
+                  '#00b050',
+                  '#dff3d2',
+                  '#00b0f0',
+                  '#0070c0',
+                  '#d4f1f5',
+                  '#002060',
+                  '#7030a0',
+                  '#7b69ee',
+                  '#1476ff',
+                  '#ec66ab',
+                  '#42b883'
+                ]
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/fluent-editor/webdoc/fluent-editor.cn.md

@@ -0,0 +1,7 @@
+---
+title: FluentEditor 富文本
+---
+
+# FluentEditor 富文本
+
+<div>用于创建和编辑富文本内容。</div>

package/demos/pc/app/fluent-editor/webdoc/fluent-editor.en.md

@@ -0,0 +1,7 @@
+---
+title: FluentEditor
+---
+
+# FluentEditor
+
+<div>FluentEditor is a rich text component used to create and edit rich text content.</div>

package/demos/pc/app/fluent-editor/webdoc/fluent-editor.js

@@ -0,0 +1,69 @@
+export default {
+  column: '2',
+  owner: '',
+  metaData: {
+    experimental: '3.17.0'
+  },
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '通过 <code>v-model</code> 设置绑定值，默认数据保存格式为 Delta 数据格式。',
+        'en-US': 'You can refer to component label.'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用状态',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '<p>通过属性 <code>disabled</code> 可设置编辑器为不可编辑状态。</p>',
+        'en-US': ''
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'image-upload',
+      name: {
+        'zh-CN': '图片上传',
+        'en-US': 'Image Upload'
+      },
+      desc: {
+        'zh-CN': '通过 <code>image-upload</code> 设置图片上传模块的配置项。',
+        'en-US': ''
+      },
+      codeFiles: ['image-upload.vue']
+    },
+    {
+      demoId: 'options',
+      name: {
+        'zh-CN': '编辑器配置',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '通过 <code>options</code> 设置编辑器的配置项，支持的配置项和 Quill 的相同，可参考 <a href="https://quilljs.com/docs/configuration#options" target="_blank">Quill</a> 文档。',
+        'en-US': ''
+      },
+      codeFiles: ['options.vue']
+    },
+    {
+      demoId: 'data-switch',
+      name: {
+        'zh-CN': '数据格式转换',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>data-type</code> 指定富文本数据保存的格式。数据默认保存格式为 Delta 形式，若需要将数据保存格式设置为 HTML 形式，并关闭 HTML 格式自动转 Delta 格式，设置 <code>:data-type="false"</code>，<code>:data-upgrade="false"</code>。</p>',
+        'en-US': ''
+      },
+      codeFiles: ['data-switch.vue']
+    }
+  ]
+}

package/demos/pc/app/form/form-disabled.spec.js

@@ -26,7 +26,7 @@ test('测试表单禁用', async ({ page }) => {
   await expect(formItem.nth(5).locator('input').nth(1)).toBeDisabled()
   await expect(formItem.nth(6).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(7).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(8).locator('input')).toBeDisabled()
+  await expect(formItem.nth(8).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(9).locator('input')).toBeDisabled()
   await expect(formItem.nth(10).locator('input')).toBeDisabled()
   await expect(formItem.nth(11).locator('textarea')).toBeDisabled()
@@ -53,7 +53,7 @@ test('测试表单禁用', async ({ page }) => {
   await expect(formItem.nth(5).locator('input').nth(1)).not.toBeDisabled()
   await expect(formItem.nth(6).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(7).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(8).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(8).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(9).locator('input')).not.toBeDisabled()
   await expect(formItem.nth(10).locator('input')).not.toBeDisabled()
   await expect(formItem.nth(11).locator('textarea')).not.toBeDisabled()

package/demos/pc/app/input/show-password.spec.ts

@@ -4,22 +4,21 @@ test('[Input]show-password', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('input#show-password')
 
-  const svg = await page.locator('.demo-input .tiny-input__suffix > .tiny-input__suffix-inner svg path')
-  const input = await page.locator('.demo-input .tiny-input.tiny-input-suffix input')
+  const demo = page.locator('#show-password')
+
+  const svg = demo.locator('.tiny-input__suffix > .tiny-input__suffix-inner .tiny-input__icon')
+  const input = demo.locator('.tiny-input.tiny-input-suffix input')
 
   // 密码隐藏
   await expect(svg).toBeVisible()
   await expect(input).toHaveAttribute('type', 'password')
 
   // 值
-  await page.locator('input[type="password"]').fill('123123123')
-  const value = await page.locator('input[type="password"]').inputValue()
+  await demo.locator('input[type="password"]').fill('123123123')
+  const value = await demo.locator('input[type="password"]').inputValue()
   await expect(value).toBe('123123123')
-  
-  // 密码图标
-  await expect(svg).toHaveAttribute('d', 'm3.486 3.207.712.712-.233.187c-.154.127-.307.261-.458.402l-.287.276c-.374.373-.712.762-1.011 1.151l-.047.061-.044.06-.184.251.275.374.232.291c.318.388.675.773 1.066 1.136l.244.22C5.059 9.47 6.489 10.14 8 10.14l.295-.009a5.472 5.472 0 0 0 1.722-.392l.76.762-.295.13c-.792.33-1.62.51-2.482.51l-.298-.007c-1.78-.086-3.414-.937-4.876-2.294l-.312-.3A12.91 12.91 0 0 1 1.416 7.29l-.051-.068-.05-.065-.174-.237-.135-.197-.099-.153-.04-.083a.501.501 0 0 1-.001-.357l.041-.084.099-.153.135-.197.174-.237.101-.133.252-.317c.346-.421.732-.839 1.158-1.234.216-.201.437-.39.66-.568ZM3.757.858l.096.01a.506.506 0 0 1 .258.137l1.112 1.11A6.491 6.491 0 0 1 8 1.474l.298.007c1.78.086 3.414.937 4.876 2.294l.312.3c.406.406.772.829 1.098 1.251l.051.068.05.065.173.237.136.197.098.153.042.083a.497.497 0 0 1 0 .357l-.042.084-.098.153-.136.197-.173.237-.101.133-.252.317c-.346.42-.732.838-1.158 1.234l-.288.26c-.123.106-.247.209-.372.308l.789.788.058.07a.5.5 0 0 1-.058.637l-.07.058a.499.499 0 0 1-.637-.058l-.907-.907v.002l-.727-.728V9.27l-.841-.841-.707-.706v-.002l-6.01-6.009-.058-.07a.5.5 0 0 1 .411-.784Zm1.535 4.157.775.775-.037.169c-.02.114-.03.23-.03.35l.005.15A2 2 0 0 0 8 8.308l.177-.008c.116-.01.23-.03.34-.06l.777.774-.2.087A2.99 2.99 0 0 1 8 9.308l-.176-.005a3 3 0 0 1-2.532-4.288ZM8 2.475l-.28.008a5.465 5.465 0 0 0-1.736.393l.722.724c.392-.187.83-.292 1.294-.292l.176.005A3 3 0 0 1 11 6.31l-.007.205a2.977 2.977 0 0 1-.285 1.087L11.8 8.697c.235-.182.465-.378.692-.589l.287-.276c.374-.373.712-.762 1.011-1.151l.047-.062.044-.059.183-.253-.274-.372-.232-.291a11.566 11.566 0 0 0-1.066-1.136l-.244-.22C10.941 3.146 9.511 2.475 8 2.475Zm0 1.833-.182.008c-.115.01-.227.03-.335.06l2.45 2.45c.043-.165.067-.338.067-.517l-.005-.15A2 2 0 0 0 8 4.309Z') // TODO
 
   // 密码开放显示
-  await page.locator('.demo-input .tiny-input__suffix > .tiny-input__suffix-inner').click()
+  await demo.locator('.tiny-input__suffix > .tiny-input__suffix-inner').click()
   await expect(input).toHaveAttribute('type', 'text')
 })

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

@@ -1,19 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-test('logout-custom-service', async ({ page }) => {
-  await page.goto('logout#custom-service')
+test('基本用法', async ({ page }) => {
+  await page.goto('logout#basic-usage')
   const button = page.locator('.tiny-logout')
-  const status = page.locator('.status')
-
-  await expect(button).toHaveText(/登录/)
-  await expect(status).toContainText(['false'])
+  const status = page.locator('.demo-logout')
   await button.click()
   await page.getByRole('button', { name: /确定/ }).click()
   await page.waitForTimeout(1000)
-  await expect(button).toHaveText(/注销/)
-  await expect(status).toContainText(['true'])
   await button.click()
   await page.waitForTimeout(1000)
   await expect(button).toHaveText(/登录/)
-  await expect(status).toContainText(['true'])
+  await expect(status).toContainText('true')
 })

package/demos/pc/app/logout/redirecturl.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义配置', async ({ page }) => {
+  await page.goto('logout#redirecturl')
+  const button = page.locator('.tiny-logout')
+  await button.click()
+  await page.waitForTimeout(1000)
+  await expect(button).toHaveText(/登录/)
+})

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

@@ -19,7 +19,7 @@ test('基本用法', async ({ page }) => {
   // 成功提示框
   await page.getByRole('button', { name: /成功提示框/ }).click()
   await expect(modal).toHaveClass(/status__success/)
-  await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-icon-success/)
+  await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-modal-svg__success/)
   await page.getByRole('button', { name: /确定/, exact: true }).click()
   await expect(page.locator('.tiny-modal.type__alert.status__success')).not.toBeVisible()
 

package/demos/pc/app/modal/lock-view.spec.ts

@@ -5,6 +5,11 @@ test('锁住页面', async ({ page }) => {
   await page.goto('modal#lock-view')
 
   const modal = page.locator('.tiny-modal.active')
+
+  // 新版示例页单示例无滚动条，先展开代码保证有滚动条
+  await page.locator('.i-ti-code').click()
+  await page.waitForTimeout(100)
+
   await page.getByRole('button', { name: '不锁界面 且 隐藏遮罩层' }).click()
   await expect(modal).not.toHaveClass(/lock__view/)
 

package/demos/pc/app/modal/title-composition-api.vue

@@ -1,11 +1,16 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="customClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="noTitleClick" :reset-time="0">无标题</tiny-button>
 </template>
 
 <script setup>
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
-function btnClick() {
+function customClick() {
   Modal.alert({ message: '自定义标题', title: '自定义标题' })
 }
+
+function noTitleClick() {
+  Modal.alert({ message: '无标题', title: '' })
+}
 </script>

package/demos/pc/app/modal/title.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('标题', async ({ page }) => {
+test('自定义标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#title')
 
@@ -8,3 +8,12 @@ test('标题', async ({ page }) => {
   await page.getByRole('button', { name: '自定义标题' }).click()
   await expect(modal.locator('.tiny-modal__header')).toHaveText('自定义标题')
 })
+
+test('无标题', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('modal#title')
+
+  const modal = page.locator('.tiny-modal.active')
+  await page.getByRole('button', { name: '无标题' }).click()
+  await expect(modal.locator('.tiny-modal__title')).not.toBeVisible()
+})

package/demos/pc/app/modal/title.vue

@@ -1,5 +1,6 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="customClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="noTitleClick" :reset-time="0">无标题</tiny-button>
 </template>
 
 <script>
@@ -10,8 +11,12 @@ export default {
     TinyButton: Button
   },
   methods: {
-    btnClick() {
+    customClick() {
       Modal.alert({ message: '自定义标题', title: '自定义标题' })
+    },
+
+    noTitleClick() {
+      Modal.alert({ message: '无标题', title: '' })
     }
   }
 }

package/demos/pc/app/nav-menu/slot-logo-composition-api.vue

@@ -313,9 +313,4 @@ const TinyIconTotal = iconTotal()
 .preview {
   min-height: 450px;
 }
-
-.preview .icon-logo {
-  fill: white;
-  font-size: 24px;
-}
 </style>

package/demos/pc/app/nav-menu/slot-logo.vue

@@ -320,9 +320,4 @@ export default {
 .preview {
   min-height: 450px;
 }
-
-.preview .icon-logo {
-  fill: white;
-  font-size: 24px;
-}
 </style>

package/demos/pc/app/pop-upload/upload-tip-composition-api.vue

@@ -0,0 +1,40 @@
+<template>
+  <tiny-pop-upload
+    :action="action"
+    accept="image/*"
+    :limit="limit"
+    :upload-file-type="fileType"
+    :max-upload-file-size="fileSize"
+    upload-button-text="添加文件"
+  >
+    <template #uploadTip>
+      <tiny-alert type="info">
+        <template #description>
+          <p class="tips-item">1.上传数据应不超过{{ limit }}条，超过数量不允许上传；</p>
+          <p class="tips-item">2.相同数据不会重复发</p>
+          <p class="tips-item">
+            3.上传文件限{{ fileType.join(',') }}格式，文件不超过{{ fileSize / 1024 }}KB，点击<tiny-link
+              >下载模板</tiny-link
+            >
+          </p>
+        </template>
+      </tiny-alert>
+    </template>
+  </tiny-pop-upload>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { PopUpload as TinyPopUpload, Alert as TinyAlert, Link as TinyLink } from '@opentiny/vue'
+
+const action = ref('http://localhost:3000/api/upload')
+const limit = ref(500)
+const fileSize = ref(512000)
+const fileType = ref(['.png', '.jpg'])
+</script>
+
+<style scoped>
+.tips-item {
+  margin: 0;
+}
+</style>

package/demos/pc/app/pop-upload/upload-tip.vue

@@ -0,0 +1,50 @@
+<template>
+  <tiny-pop-upload
+    :action="action"
+    accept="image/*"
+    :limit="limit"
+    :upload-file-type="fileType"
+    :max-upload-file-size="fileSize"
+    upload-button-text="添加文件"
+  >
+    <template #uploadTip>
+      <tiny-alert type="info">
+        <template #description>
+          <p class="tips-item">1.上传数据应不超过{{ limit }}条，超过数量不允许上传；</p>
+          <p class="tips-item">2.相同数据不会重复发</p>
+          <p class="tips-item">
+            3.上传文件限{{ fileType.join(',') }}格式，文件不超过{{ fileSize / 1024 }}KB，点击<tiny-link
+              >下载模板</tiny-link
+            >
+          </p>
+        </template>
+      </tiny-alert>
+    </template>
+  </tiny-pop-upload>
+</template>
+
+<script lang="jsx">
+import { PopUpload, Alert, Link } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopUpload: PopUpload,
+    TinyAlert: Alert,
+    TinyLink: Link
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload',
+      limit: 500,
+      fileSize: 512000,
+      fileType: ['.png', '.jpg']
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tips-item {
+  margin: 0;
+}
+</style>

package/demos/pc/app/pop-upload/webdoc/pop-upload.js

@@ -65,9 +65,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '通过 <code>dialog-title</code> 设置弹框的标题，<code>cancel-button-text</code> 设置取消按钮的文本, \n          <code>submit-button-text</code> 设置提交按钮的文本， <code>cancel-button-text</code> 设置上传按钮的文本。',
+          '通过 <code>dialog-title</code> 设置弹框的标题，<code>cancel-button-text</code> 设置取消按钮的文本, \n          <code>submit-button-text</code> 设置提交按钮的文本， <code>upload-button-text</code> 设置上传按钮的文本。',
         'en-US':
-          'Set the title of the pop-up box through<code>dialog-title</code>, and set the text of the cancel button through<code>cancel-button-text</code>,\n          <code>submit-button-text</code>Set the text for the submit button,<code>cancel-button-text</code>Set the text for the upload button.'
+          'Set the title of the pop-up box through<code>dialog-title</code>, and set the text of the cancel button through<code>cancel-button-text</code>,\n          <code>submit-button-text</code>Set the text for the submit button,<code>upload-button-text</code>Set the text for the upload button.'
       },
       codeFiles: ['fill-button-text.vue']
     },
@@ -98,6 +98,18 @@ export default {
       },
       codeFiles: ['file-type.vue']
     },
+    {
+      demoId: 'upload-tip',
+      name: {
+        'zh-CN': '自定义上传提示',
+        'en-US': 'Customize upload prompts'
+      },
+      desc: {
+        'zh-CN': '通过 <code>uploadTip</code> 插槽自定义上传提示的内容块。',
+        'en-US': 'Customize the content block for upload prompts through the<code>uploadTip</code>slot.'
+      },
+      codeFiles: ['upload-tip.vue']
+    },
     {
       demoId: 'prevent-delete-file',
       name: {

package/demos/pc/app/popeditor/clearable.spec.ts

@@ -8,9 +8,9 @@ test('PopEditor 弹出窗筛选条件支持可清空', async ({ page }) => {
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const company = dialogBox.getByRole('listitem').filter({ hasText: '公司名' }).getByRole('textbox')
-  const companyDel = dialogBox.getByRole('listitem').filter({ hasText: '公司名' }).locator('path')
+  const companyDel = dialogBox.getByRole('listitem').filter({ hasText: '公司名' }).locator('.tiny-input__clear')
   const city = dialogBox.getByRole('listitem').filter({ hasText: '城市' }).getByRole('textbox')
-  const cityDel = page.getByRole('listitem').filter({ hasText: '城市' }).getByRole('img')
+  const cityDel = page.getByRole('listitem').filter({ hasText: '城市' }).locator('.tiny-input__clear')
 
   // 弹出框搜索框支持清空
   await textBox.click()

package/demos/pc/app/popeditor/events.spec.ts

@@ -8,11 +8,8 @@ test('PopEditor change 事件', async ({ page }) => {
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
-  const cancelBtn = dialogBox.getByRole('button', { name: '取 消' })
   const dataItem = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
-  const infoModal = page.getByText(
-    '值变为1,{"id":"1","name":"GFD科技YX公司","city":"福州","province":"福建","_$index_":"1"}'
-  )
+  const infoModal = page.getByText('值变为1,{"id":"1","name":"GFD科技YX公司","city":"福州","province":"福建"}')
 
   await textBox.click()
   await dataItem.click()

package/demos/pc/app/rate/not-selected-class.spec.js

@@ -6,12 +6,7 @@ test.describe('Rate 自定义未选中图标类名', () => {
     await page.goto('rate#not-selected-class')
 
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
-    const svg = page.locator('span:nth-child(5) > .tiny-svg > path')
 
-    await icon.nth(4).hover()
-    await expect(svg).toHaveAttribute(
-      'd',
-      'M12 1c-.4 0-.8.1-1.1.3-.4.2-.6.5-.8.9L7.8 7l-5 .8c-.8.1-1.4.7-1.7 1.4s-.1 1.6.5 2.2l3.7 3.8-.9 5.4c-.1.6.1 1.2.5 1.7s1 .8 1.6.8c.4 0 .7-.1 1-.3l4.4-2.5 4.4 2.5c.3.2.7.3 1 .3.6 0 1.2-.3 1.6-.8.4-.5.6-1.1.5-1.7l-.9-5.4 3.7-3.8c.6-.6.7-1.4.5-2.2-.3-.8-.9-1.3-1.7-1.4L16 7l-2.2-4.8c-.2-.4-.5-.7-.8-.9-.2-.2-.6-.3-1-.3z'
-    )
+    await expect(icon.nth(4)).toHaveCSS('fill', 'rgba(25, 25, 25, 0.05)')
   })
 })

package/demos/pc/app/rate/not-selected-color.spec.js

@@ -10,7 +10,7 @@ test.describe('Rate 自 定义未选中图标颜色', () => {
     await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 0, 0)')
 
     await icon.nth(4).hover()
-    await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 0, 0)')
+    await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 187, 51)')
 
     await icon.nth(4).click()
     await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 187, 51)')