feat: Adapts to x-design specifications (#1872)

examples/sites/demos/pc/app/autocomplete/clearable.spec.ts

@@ -3,10 +3,12 @@ import { test, expect } from '@playwright/test'
 test('可清除', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('autocomplete#clearable')
-  await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
+
+  const demo = page.locator('#clearable')
+  await demo.getByRole('textbox', { name: '请输入内容', exact: true }).click()
   await page.getByRole('option', { name: 'WWWW科技YX公司' }).click()
-  await page.getByRole('textbox', { name: '请输入内容', exact: true }).hover()
-  await page.getByRole('combobox').locator('path').click()
+  await demo.getByRole('textbox', { name: '请输入内容', exact: true }).hover()
+  await demo.getByRole('combobox').locator('.tiny-input__clear').click()
 
   await expect(page.getByRole('textbox', { name: '请输入内容', exact: true })).toHaveValue('')
 })

examples/sites/demos/pc/app/base-select/collapse-tags.spec.ts

@@ -20,13 +20,13 @@ test('collapse-tags', async ({ page }) => {
   await expect(option.filter({ hasText: '上海' })).toHaveClass(/selected/)
 
   // 取消选中一个
-  await option.filter({ hasText: '北京' }).locator('span').nth(2).click()
+  await option.filter({ hasText: '北京' }).click()
   await expect(tag.filter({ hasText: '+ 1' })).toBeHidden()
   await expect(tag).toHaveCount(1)
 
   // 再选中2个
-  await option.filter({ hasText: '天津' }).locator('span').nth(2).click()
-  await option.filter({ hasText: '深圳' }).locator('span').nth(2).click()
+  await option.filter({ hasText: '天津' }).click()
+  await option.filter({ hasText: '深圳' }).click()
   await expect(tag.filter({ hasText: '+ 2' })).toBeVisible()
   await expect(tag).toHaveCount(2)
 })

examples/sites/demos/pc/app/base-select/size.spec.ts

@@ -9,7 +9,7 @@ test('默认尺寸', async ({ page }) => {
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '30px')
+  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '28px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--light/)
 })
 

examples/sites/demos/pc/app/carousel/autoplay.spec.ts

@@ -7,7 +7,7 @@ test('自动切换', async ({ page }) => {
   await page.waitForTimeout(100)
   const preview = page.locator('#autoplay')
   const carousel = preview.locator('.tiny-carousel')
-  const carouselItems = preview.locator('div.tiny-carousel__item')
+  const carouselItems = preview.locator('.tiny-carousel__item')
   // 默认显示第一张幻灯片
   await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
 

examples/sites/demos/pc/app/checkbox/checkbox-button-multiple.spec.ts

@@ -19,14 +19,4 @@ test('多行按钮', async ({ page }) => {
   let groupBox = await checkboxGroup.boundingBox()
   let checkboxButtonBox = await checkboxButton.boundingBox()
   expect(groupBox?.height).toBe(((checkboxButtonBox?.height || 0) + bottomSpace) * 2)
-
-  // 测试三行场景
-  page.setViewportSize({
-    width: 500,
-    height: 700
-  })
-  await page.waitForTimeout(200)
-  groupBox = await checkboxGroup.boundingBox()
-  checkboxButtonBox = await checkboxButton.boundingBox()
-  expect(groupBox?.height).toBe(((checkboxButtonBox?.height || 0) + bottomSpace) * 3)
 })

examples/sites/demos/pc/app/color-select-panel/alpha.spec.ts

@@ -3,7 +3,11 @@ import { test, expect } from '@playwright/test'
 test('测试Alpha', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#alpha')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  const demo = await page.locator('#alpha')
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
   await page.locator('.black').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  const v1 = await page.evaluate('document.querySelector("input[type=text]").value = "#377820"')
+  await page.locator('.tiny-color-select-panel__alpha__slider').click()
+  const v2 = await page.evaluate('document.querySelector("input[type=text]").value = "#406a8080"')
+  expect(v1).not.toContainEqual(v2)
 })

examples/sites/demos/pc/app/color-select-panel/base.spec.ts

@@ -2,8 +2,12 @@ import { test, expect } from '@playwright/test'
 
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('color-select-panel#basic-usage')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.goto('color-select-panel#alpha')
+  const demo = await page.locator('#alpha')
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  const v1 = await page.evaluate('document.querySelector("input[type=text]").value = "#377820"')
   await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  const v2 = await page.evaluate('document.querySelector("input[type=text]").value = "#206578"')
+  expect(v1).not.toContainEqual(v2)
 })

examples/sites/demos/pc/app/color-select-panel/event.spec.ts

@@ -3,10 +3,9 @@ import { test, expect } from '@playwright/test'
 test('事件触发', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#event')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.locator('.black').click()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '取消' }).click()
+  const demo = await page.locator('#event')
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await demo.getByRole('button', { name: '取消' }).click()
+  expect(page.locator('.tiny-notify')).toHaveText('用户点击了取消')
+  await page.locator('.tiny-notify__icon-close > .tiny-svg').click()
 })

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

@@ -3,13 +3,11 @@ import { test, expect } from '@playwright/test'
 test('历史记录', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#history')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.locator('.black').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.getByRole('button', { name: 'Append history color' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '历史记录' }).click()
-  await page.getByRole('button', { name: 'Pop history color' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '历史记录' }).click()
+  const demo = await page.locator('#history')
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await demo.locator('.tiny-color-select-panel__inner__hue-select > div').dblclick()
+  await demo.getByRole('button', { name: '选择' }).click()
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await demo.getByRole('button', { name: '历史记录' }).click()
+  expect(page.locator('.tiny-color-select-panel__history__color-block')).toHaveCount(2)
 })

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

@@ -3,23 +3,9 @@ import { test, expect } from '@playwright/test'
 test('预定义颜色', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#predefine')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.locator('.black').click()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  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()
-  await page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)').click()
+  const demo = await page.locator('#predefine')
   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()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
-  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()
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await demo.getByRole('button', { name: '预定义颜色' }).click()
+  expect(page.locator('.tiny-color-select-panel__predefine__color-block')).toHaveCount(7)
 })

examples/sites/demos/pc/app/config-provider/tag.spec.ts

@@ -3,10 +3,11 @@ import { test, expect } from '@playwright/test'
 test('测试自定义标签', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('config-provider#tag')
-  await page.getByText('这是一个Tag被DOM包裹').click()
-  await page.locator('#tag span').nth(2).click()
+  const demo = await page.locator('#tag span')
+  await demo.nth(2).click()
   await page.waitForTimeout(300)
-  await page.locator('#tag span').nth(2).click()
+  await demo.nth(2).click()
   await page.waitForTimeout(300)
-  await expect(page.locator('.tiny-switch').nth(2)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+  const elements = await page.locator('.tiny-config-provider')
+  await expect(elements.nth(1)).toHaveCSS('padding', '16px')
 })

examples/sites/demos/pc/app/date-picker/align.spec.ts

@@ -8,6 +8,7 @@ test('[DatePicker] 测试对齐方式', async ({ page }) => {
   const leftDateInputDom = page.getByRole('textbox').nth(1)
   const leftDatePanelDom = page.locator('.tiny-picker-panel').nth(2)
   const leftClosePanel = page.getByText('左对齐：')
+  await page.waitForTimeout(200)
 
   await leftDateInputDom.click()
   await page.waitForTimeout(200)

examples/sites/demos/pc/app/date-picker/clear.spec.ts

@@ -12,9 +12,9 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 默认显示清除按钮
   await datePickerDefaultClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path')).toHaveAttribute(
+  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
     'd',
-    'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z'
+    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
   )
 
   // 隐藏清除按钮
@@ -24,9 +24,9 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 自定义清除图标
   await datePickerCustomClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path')).toHaveAttribute(
+  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
     'd',
-    'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z'
+    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
   )
 
   // 测试清除功能

examples/sites/demos/pc/app/date-picker/custom-suffix-icon.spec.ts

@@ -6,6 +6,6 @@ test('[DatePicker] 测试自定义后置图标', async ({ page }) => {
   const svgPathDom = page.locator('i path')
   await expect(svgPathDom).toHaveAttribute(
     'd',
-    'M19.1 13H4.9c-.5 0-.9-.4-.9-1s.4-1 .9-1h14.2c.5 0 .9.4.9 1s-.4 1-.9 1z'
+    'M12.99 7.5c.28 0 .5.22.5.5s-.22.5-.5.5H3.01c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h9.98z'
   )
 })

examples/sites/demos/pc/app/dialog-box/custom-dialog-content.spec.ts

@@ -7,7 +7,7 @@ test('dialogBox 自定义内容', async ({ page }) => {
   const dialogBox = page.locator('.tiny-dialog-box')
   await button.click()
   await expect(dialogBox).toBeVisible()
-  await page.locator('#custom-dialog-content path').nth(2).click()
+  await page.locator('.tiny-alert > .tiny-alert__close').click()
   await page.waitForTimeout(300)
   await page.getByRole('button', { name: /确 定/ }).click()
   await expect(dialogBox).toBeHidden()

examples/sites/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')
 })

examples/sites/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')
 })

examples/sites/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(/登录/)
+})

examples/sites/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()

examples/sites/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()

examples/sites/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)')
   })
 })

examples/sites/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)')

examples/sites/demos/pc/app/split/moveend-event.spec.ts

@@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test'
 test('moveend 事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('split#moveend-event')
-  const centerBtn = page.locator('.tiny-split-trigger')
+  const demo = page.locator('#moveend-event')
+  const centerBtn = demo.locator('.tiny-split-trigger')
   const { x, y } = await centerBtn.boundingBox()
   // 鼠标按下
   await centerBtn.hover()
@@ -11,6 +12,6 @@ test('moveend 事件', async ({ page }) => {
   await page.mouse.move(20 + x, y)
   await page.mouse.up()
   //   向右移动之后判断是否出现提示
-  const moveDiv = page.getByText('拖拽结束').nth(1)
+  const moveDiv = page.locator('.tiny-modal').getByText('拖拽结束')
   await expect(moveDiv).toBeVisible()
 })

examples/sites/demos/pc/app/split/movestart-event.spec.ts

@@ -11,6 +11,6 @@ test('movestart 事件', async ({ page }) => {
   await page.mouse.move(20 + x, y)
   await page.mouse.up()
   //   向右移动之后判断是否出现提示
-  const moveDiv = page.getByText('拖拽开始').nth(1)
+  const moveDiv = page.locator('.tiny-modal').getByText('拖拽开始')
   await expect(moveDiv).toBeVisible()
 })

examples/sites/demos/pc/app/tabs/basic-usage.spec.ts

@@ -4,7 +4,8 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#basic-usage')
 
-  const tabs = page.locator('.tiny-tabs')
+  const container = page.locator('#basic-usage')
+  const tabs = container.locator('.tiny-tabs')
   const tabItems = tabs.getByRole('tab')
   const item1 = tabItems.nth(0)
   const item2 = tabItems.nth(1)

examples/sites/demos/pc/app/tabs/before-leave.spec.ts

@@ -4,7 +4,8 @@ test('阻止切换', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#before-leave')
 
-  const tabs = page.locator('.tiny-tabs')
+  const container = page.locator('#before-leave')
+  const tabs = container.locator('.tiny-tabs')
   const tabItem = tabs.getByRole('tab', { name: '表单组件' })
   const activeItem = page.getByRole('tab', { name: '数据组件' })
   const notify = page.locator('.tiny-notify')

examples/sites/demos/pc/app/tabs/custom-more-icon.spec.ts

@@ -4,7 +4,8 @@ test('"定义更多按钮"', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#custom-more-icon')
 
-  const tabs = page.locator('.tiny-tabs')
+  const container = page.locator('#custom-more-icon')
+  const tabs = container.locator('.tiny-tabs')
   const moreIcon = tabs.locator('.tiny-tabs__more-icon > svg')
   const tabItems = tabs.getByRole('tab')
   const lastItem = tabItems.nth(7)

examples/sites/demos/pc/app/tabs/custom-tab-title.spec.ts

@@ -4,7 +4,8 @@ test('定义标签页标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#custom-tab-title')
 
-  const tabs = page.locator('.tiny-tabs')
+  const container = page.locator('#custom-tab-title')
+  const tabs = container.locator('.tiny-tabs')
   const svg = page.getByRole('tab', { name: '数据组件' }).locator('svg')
   const content = tabs.getByRole('tabpanel')
 

examples/sites/demos/pc/app/tabs/lazy.spec.ts

@@ -4,7 +4,8 @@ test('懒加载验证，点击逐个加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#lazy')
 
-  const tabs = page.locator('.tiny-tabs')
+  const container = page.locator('#lazy')
+  const tabs = container.locator('.tiny-tabs')
   const tabItems = tabs.getByRole('tab')
   const panels = tabs.locator('.tiny-tabs__content>.tiny-tab-pane')
 

examples/sites/demos/pc/app/tabs/more-show-all.spec.ts

@@ -4,9 +4,9 @@ test('超长数据下拉展示全部，面板长宽可控', async ({ page }) =>
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#more-show-all')
 
-  const tabNav = page.locator('.tiny-tabs__nav.is-top.is-show-active-bar')
-  const showMoreBtn = page.locator('#more-show-all').getByRole('button')
-  const triggerBtn = page.locator('.tiny-tabs__more-container .tiny-dropdown__trigger.tiny-dropdown-trigger')
+  const container = page.locator('#more-show-all')
+  const showMoreBtn = container.getByRole('button')
+  const triggerBtn = container.locator('.tiny-tabs__more-container .tiny-dropdown__trigger.tiny-dropdown-trigger')
   const panel = page.locator('.tiny-tabs__more-dropdown')
 
   await showMoreBtn.hover()
@@ -47,7 +47,7 @@ test('超长数据下拉展示全部，面板长宽可控', async ({ page }) =>
     .filter({ hasText: /^Tab 1$/ })
     .nth(1)
     .click()
-  const tab1 = page.getByRole('tab', { name: 'Tab 1', exact: true })
+  const tab1 = container.getByRole('tab', { name: 'Tab 1', exact: true })
   await tab1.isVisible()
   await expect(tab1).toHaveClass(/is-active/)
 })

examples/sites/demos/pc/app/tabs/position.spec.ts

@@ -4,8 +4,9 @@ test('位置：四种显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#position')
 
-  const tabs = page.locator('.tiny-tabs')
-  const tabsList = page.locator('.tiny-tabs > div')
+  const container = page.locator('#position')
+  const tabs = container.locator('.tiny-tabs')
+  const tabsList = container.locator('.tiny-tabs > div')
   const top = tabsList.first()
   const bottom = tabsList.last()
 
@@ -27,21 +28,21 @@ test('位置：四种显示', async ({ page }) => {
   await expect(content).toHaveText(/2/)
 
   // top显示
-  await page.getByRole('radio', { name: 'top 显示' }).filter({ hasText: 'top 显示' }).click()
+  await container.getByRole('radio', { name: 'top 显示' }).filter({ hasText: 'top 显示' }).click()
   await expect(tabs).toHaveClass(/tiny-tabs--top/)
   await expect(tabsList).toHaveCount(2)
   await expect(top).toHaveClass(/tiny-tabs__header/)
   await expect(bottom).toHaveClass('tiny-tabs__content')
 
   // bottom显示
-  await page.getByRole('radio', { name: 'bottom 显示' }).filter({ hasText: 'bottom 显示' }).click()
+  await container.getByRole('radio', { name: 'bottom 显示' }).filter({ hasText: 'bottom 显示' }).click()
   await expect(tabs).toHaveClass(/tiny-tabs--bottom/)
   await expect(tabsList).toHaveCount(2)
   await expect(top).toHaveClass('tiny-tabs__content')
   await expect(bottom).toHaveClass(/tiny-tabs__header/)
 
   // right显示
-  await page.getByRole('radio', { name: 'right 显示' }).filter({ hasText: 'right 显示' }).click()
+  await container.getByRole('radio', { name: 'right 显示' }).filter({ hasText: 'right 显示' }).click()
   await expect(tabs).toHaveClass(/tiny-tabs--right/)
   await expect(tabsList).toHaveCount(2)
   await expect(top).toHaveClass(/tiny-tabs__header/)

examples/sites/demos/pc/app/tabs/show-different-grid-data.spec.ts

@@ -4,9 +4,10 @@ test('切换grid', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#show-different-grid-data')
 
-  const tabA = page.getByRole('tab', { name: '表格组件A' })
-  const tabB = page.getByRole('tab', { name: '表格组件B' })
-  const content = page.getByRole('tabpanel').locator('.tiny-grid-header__column').first()
+  const container = page.locator('#show-different-grid-data')
+  const tabA = container.getByRole('tab', { name: '表格组件A' })
+  const tabB = container.getByRole('tab', { name: '表格组件B' })
+  const content = container.getByRole('tabpanel').locator('.tiny-grid-header__column').first()
 
   await expect(content).toHaveCSS('width', '50px')
   await tabA.click()

examples/sites/demos/pc/app/tabs/size.spec.ts

@@ -4,12 +4,13 @@ test('小尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#size')
 
-  const headerBox = page.locator('.tiny-tabs .tiny-tabs__nav-scroll')
+  const container = page.locator('#size')
+  const headerBox = container.locator('.tiny-tabs .tiny-tabs__nav-scroll')
 
   await expect(headerBox.nth(0)).toHaveCSS('height', '40px')
   await expect(headerBox.nth(0)).toHaveCSS('font-size', '16px')
   await expect(headerBox.nth(1)).toHaveCSS('height', '24px')
-  await expect(headerBox.nth(1)).toHaveCSS('font-size', '14px')
+  await expect(headerBox.nth(1).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '14px')
   await expect(headerBox.nth(2)).toHaveCSS('height', '24px')
-  await expect(headerBox.nth(2)).toHaveCSS('font-size', '12px')
+  await expect(headerBox.nth(2).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '12px')
 })

examples/sites/demos/pc/app/tabs/stretch-wh.spec.ts

@@ -4,7 +4,8 @@ test('自动撑宽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#stretch-wh')
 
-  const tabItem = page.getByRole('tab', { name: '表单组件，测试标签页宽度根据标题长度自动撑开' })
+  const container = page.locator('#stretch-wh')
+  const tabItem = container.getByRole('tab', { name: '表单组件，测试标签页宽度根据标题长度自动撑开' })
 
   await tabItem.isVisible()
   await expect(tabItem).toHaveCSS('flex-grow', '1')

examples/sites/demos/pc/app/tabs/tab-style-bordercard.spec.ts

@@ -4,7 +4,8 @@ test('bordercard类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#tab-style-bordercard')
 
-  const tabs = page.locator('.tiny-tabs')
+  const container = page.locator('#tab-style-bordercard')
+  const tabs = container.locator('.tiny-tabs')
   const tabHeader = tabs.locator('.tiny-tabs__header')
   const tabItems = tabs.getByRole('tab')
   const firstItem = tabItems.first()

examples/sites/demos/pc/app/tabs/tab-style-card.spec.ts

@@ -4,7 +4,8 @@ test('card类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#tab-style-card')
 
-  const tabs = page.locator('.tiny-tabs')
+  const container = page.locator('#tab-style-card')
+  const tabs = container.locator('.tiny-tabs')
   const tabItems = tabs.getByRole('tab')
   const firstItem = tabItems.first()
   const item5 = tabItems.nth(4)

examples/sites/demos/pc/app/tabs/tabs-draggable.spec.ts

@@ -4,15 +4,16 @@ test('可拖拽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#tabs-draggable')
 
-  const items = page.getByRole('tab')
-  const box2 = await page.getByRole('tab', { name: 'Tab 2' }).boundingBox()
-  const box3 = await page.getByRole('tab', { name: 'Tab 3' }).boundingBox()
+  const container = page.locator('#tabs-draggable')
+  const items = container.getByRole('tab')
+  const box2 = await container.getByRole('tab', { name: 'Tab 2' }).boundingBox()
+  const box3 = await container.getByRole('tab', { name: 'Tab 3' }).boundingBox()
   const arr2 = ['2', '3', '1']
 
   for (let i = 0; i < 3; ++i) {
     await expect(items.nth(i)).toHaveText(`Tab ${i + 1}`)
   }
-  await page.getByRole('tab', { name: 'Tab 1' }).hover()
+  await container.getByRole('tab', { name: 'Tab 1' }).hover()
   await page.mouse.down()
   await page.mouse.move(box3.x + box3.width / 2, box3.y + box3.height / 2)
   await page.mouse.up()

examples/sites/demos/pc/app/tabs/tabs-events-click.spec.ts

@@ -4,9 +4,10 @@ test('点击事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#tabs-events-click')
 
-  const items = page.getByRole('tab')
+  const container = page.locator('#tabs-events-click')
+  const items = container.getByRole('tab')
   const modal = page.locator('.tiny-modal')
 
   await items.nth(1).click()
-  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await expect(modal).toHaveCount(1)
 })

examples/sites/demos/pc/app/tabs/tabs-events-close.spec.ts

@@ -4,7 +4,8 @@ test('删除事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#tabs-events-close')
 
-  const tabs = page.locator('.tiny-tabs')
+  const container = page.locator('#tabs-events-close')
+  const tabs = container.locator('.tiny-tabs')
   const tabItem = tabs.getByRole('tab', { name: '其他组件' })
   const close = tabItem.locator('.tiny-tabs__icon-close')
   const modal = page.locator('.tiny-modal').first()

examples/sites/demos/pc/app/tabs/tabs-second-layer.spec.ts

@@ -4,7 +4,8 @@ test('多层级标签页', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#tabs-second-layer')
 
-  const tabs1 = page.locator('.tiny-tabs').first()
+  const container = page.locator('#tabs-second-layer')
+  const tabs1 = container.locator('.tiny-tabs').first()
   const content1 = tabs1.getByRole('tabpanel').locator('.tiny-tabs')
 
   await expect(content1.first()).toHaveClass(/tiny-tabs--button-card/)

examples/sites/demos/pc/app/tabs/tabs-separator.spec.ts

@@ -4,7 +4,8 @@ test('分隔符', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#tabs-separator')
 
-  const tabs1 = page.locator('.tiny-tabs')
+  const container = page.locator('#tabs-separator')
+  const tabs1 = container.locator('.tiny-tabs')
   const content1 = tabs1.locator('.tiny-tabs__item-separator')
 
   const { width, height } = await content1.first().boundingBox()

examples/sites/demos/pc/app/tabs/tooltip.spec.ts

@@ -4,8 +4,9 @@ test('提示是否正常', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#tooltip')
 
-  const tabs = page.locator('.tiny-tabs')
-  const tabsList = page.locator('.tiny-tabs > div')
+  const container = page.locator('#tooltip')
+  const tabs = container.locator('.tiny-tabs')
+  const tabsList = container.locator('.tiny-tabs > div')
   const top = tabsList.first()
 
   await top.hover()

examples/sites/demos/pc/app/tabs/with-add.spec.ts

@@ -4,7 +4,8 @@ test('添加功能', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#with-add')
 
-  const tabs = page.locator('.tiny-tabs')
+  const container = page.locator('#with-add')
+  const tabs = container.locator('.tiny-tabs')
   const tabItems = tabs.getByRole('tab')
   const newTabItem = tabItems.last()
   const add = tabs.locator('.tiny-tabs__new-tab')

examples/sites/demos/pc/app/time-picker/clearable.spec.ts

@@ -12,7 +12,6 @@ test('清除按钮', async ({ page }) => {
   // 默认显示清除按钮
   await timePickerDefaultClearIcon.hover()
   await expect(closeIcon).toBeVisible()
-  await expect(closeIcon.locator('path')).toHaveAttribute('d', 'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z')
 
   // 隐藏清除按钮
   await timePickerHideClearIcon.hover()
@@ -21,8 +20,6 @@ test('清除按钮', async ({ page }) => {
   // 自定义清除按钮图标
   await timePickerCustomClearIcon.hover()
   await expect(closeIcon).toBeVisible()
-  await expect(closeIcon.locator('path').first()).toHaveAttribute('d', 'M14 7c0 3.87-3.13 7-7 7s-7-3.13-7-7 3.13-7 7-7 7 3.13 7 7z')
-  await expect(closeIcon.locator('path').nth(1)).toHaveAttribute('d', 'M9.96 9.29c.09.09.14.21.14.34 0 .13-.05.25-.14.33a.47.47 0 0 1-.67 0L7 7.67 4.71 9.96c-.18.18-.49.18-.67 0a.483.483 0 0 1 0-.67L6.33 7 4.04 4.71c-.09-.09-.14-.21-.14-.34s.05-.25.14-.34c.18-.18.49-.18.67 0L7 6.33l2.29-2.29c.19-.18.49-.18.67 0 .09.09.14.21.14.34s-.05.25-.14.34L7.67 7l2.29 2.29z')
 
   // 测试清除功能
   await timePickerDefaultClearIcon.hover()

examples/sites/demos/pc/app/time-picker/editable.spec.ts

@@ -7,14 +7,9 @@ test('文本框不可输入', async ({ page }) => {
   const timePicker = page.locator('.tiny-date-editor input')
   await timePicker.hover()
   await page.waitForTimeout(100)
-  const closeIcon = page.locator('#editable path').first()
 
   await expect(timePicker).toHaveValue('18:40:00')
-  await timePicker.hover()
-  await page.waitForTimeout(100)
-  await closeIcon.click()
-  await expect(timePicker).toHaveValue('')
   await timePicker.click()
   await page.keyboard.type('19:40:00')
-  await expect(timePicker).toHaveValue('')
+  await expect(timePicker).toHaveValue('18:40:00')
 })

examples/sites/demos/pc/app/time-picker/format.spec.ts

@@ -14,18 +14,21 @@ test('时间格式化', async ({ page }) => {
   await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '08 pm' }).locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
+  await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '20:40:00 pm' })).toBeVisible()
 
   await page.getByRole('textbox', { name: '8:40:0 PM' }).click()
   await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '09 PM' }).locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
+  await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '9:40:0 PM' })).toBeVisible()
 
   await page.getByRole('textbox', { name: '21:40:0 PM' }).click()
   await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '10 PM' }).locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
+  await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '22:40:0 PM' })).toBeVisible()
 
   // value-format: 选中值的格式
@@ -33,6 +36,7 @@ test('时间格式化', async ({ page }) => {
   await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '19' }).first().click()
   await page.getByRole('button', { name: '确定' }).click()
+  await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '19:30:00' })).toBeVisible()
 
   // picker-options.format: 下拉框中显示的格式

examples/sites/demos/pc/app/time-picker/suffix-icon.spec.ts

@@ -5,5 +5,8 @@ test('自定义后置图标', async ({ page }) => {
   await page.goto('time-picker#suffix-icon')
 
   const customIcon = page.locator('#suffix-icon svg path')
-  await expect(customIcon).toHaveAttribute('d', 'M19.1 13H4.9c-.5 0-.9-.4-.9-1s.4-1 .9-1h14.2c.5 0 .9.4.9 1s-.4 1-.9 1z')
+  await expect(customIcon).toHaveAttribute(
+    'd',
+    'M12.99 7.5c.28 0 .5.22.5.5s-.22.5-.5.5H3.01c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h9.98z'
+  )
 })

examples/sites/demos/pc/app/tooltip/basic-usage.spec.js

@@ -10,7 +10,7 @@ test('测试Tooltip的是否能出现', async ({ page }) => {
   let tooltip = page.getByRole('tooltip', { name: 'Top Left 提示文字' })
 
   await page.waitForTimeout(100)
-  await page.mouse.move(600, 300)
+  await button.hover()
   await expect(tooltip).toBeVisible()
 
   // 测试Tooltip的位置是否正确

examples/sites/demos/pc/app/tooltip/delay.spec.js

@@ -15,12 +15,12 @@ test('测试延迟显示隐藏', async ({ page }) => {
   await button1.hover()
   await page.waitForTimeout(100)
   await expect(tip1).toBeHidden()
-  await page.mouse.move(370, 320) // button1 上方
+  await button1.hover() // button1 上方
   await page.waitForTimeout(2010)
   await expect(tip1).toBeVisible()
 
   // 延迟关闭
-  await page.mouse.move(500, 320) // button2 上方
+  await button2.hover() // button2 上方
   await page.waitForTimeout(10)
   await expect(tip2).toBeVisible()
   await page.mouse.move(0, 0)
@@ -28,7 +28,7 @@ test('测试延迟显示隐藏', async ({ page }) => {
   await expect(tip2).toBeHidden()
 
   // 自动隐藏
-  await page.mouse.move(620, 320) // button3 上方
+  await button3.hover() // button3 上方
   await page.waitForTimeout(10)
   await expect(tip3).toBeVisible()
   await page.waitForTimeout(2010)

examples/sites/demos/pc/app/tooltip/pre.spec.js

@@ -1,36 +1,17 @@
 import { test, expect } from '@playwright/test'
 
-test('测试Tooltip的是否能出现', async ({ page }) => {
+test('测试文本预格式化', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
-  await page.goto('tooltip#basic-usage')
+  await page.goto('tooltip#pre')
 
   const preview = page.locator('.pc-demo-container')
-  let button = preview.getByRole('button', { name: '上左' })
-  let tooltip = page.getByRole('tooltip', { name: 'Top Left 提示文字' })
+  let button = preview.getByRole('button', { name: '文本预格式化' })
+  let tooltip = page.getByRole('tooltip', { name: '空山新雨后' })
 
   await page.waitForTimeout(100)
-  await page.mouse.move(600, 300)
+  await button.hover()
   await expect(tooltip).toBeVisible()
-
-  // 测试Tooltip的位置是否正确
-  button = preview.getByRole('button', { name: '上右' })
-  tooltip = page.getByRole('tooltip', { name: 'Top Right 提示文字' })
-
-  await button.hover()
-  let buttonBox = await button.boundingBox()
-  let tooltipBox = await tooltip.boundingBox()
-
-  // tooltip + 高度 要小于button的y
-  expect(tooltipBox.y + tooltipBox.height).toBeLessThan(buttonBox.y)
-
-  button = preview.getByRole('button', { name: '下左' })
-  tooltip = page.getByRole('tooltip', { name: 'Bottom Left 提示文字' })
-
-  await button.hover()
-  buttonBox = await button.boundingBox()
-  tooltipBox = await tooltip.boundingBox()
-
-  // button + 高度 要小于 tooltip 的y
-  expect(buttonBox.y + buttonBox.height).toBeLessThan(tooltipBox.y)
+  const box = await tooltip.boundingBox()
+  expect(box.height).toBeGreaterThan(80) // 预期应该是多行
 })

examples/sites/demos/pc/app/user-contact/not-displayed-content.spec.ts

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/test'
 test('定制弹框不显示的内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('user-contact#not-displayed-content')
-  const noneBox = page.locator('.no-arrow')
+  const demo = page.locator('#not-displayed-content')
+  const noneBox = demo.locator('.no-arrow')
   await expect(noneBox).toHaveCSS('display', 'none')
 })

examples/sites/demos/pc/app/user-link/custom-service.spec.ts

@@ -1,12 +1,14 @@
 import { test, expect } from '@playwright/test'
 
 test('user-link-custom-service', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
   await page.goto('user-link#custom-service')
+  const demo = page.locator('#custom-service')
   const card = page.locator('.tiny-popper.tiny-user-card')
-  const reference = page.locator('.reference-wrapper')
+  const reference = demo.locator('.reference-wrapper')
   const img = card.locator('.card-top-img img')
 
-  await expect(reference).toHaveText('test3')
   await expect(card).toBeHidden()
   await reference.click()
   await page.waitForTimeout(1000)

examples/sites/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "license": "MIT",
   "scripts": {
     "start": "vite",
@@ -53,7 +53,7 @@
     "@playwright/test": "~1.42.0",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^17.0.45",
-    "@unocss/preset-icons": "^0.61.9",
+    "@unocss/preset-icons": "^0.38.2",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.37",
@@ -74,7 +74,7 @@
     "stylelint": "^14.9.1",
     "stylelint-config-standard": "^26.0.0",
     "typescript": "^5.0.2",
-    "unocss": "^0.61.9",
+    "unocss": "^0.39.3",
     "unplugin-vue-components": "^0.19.9",
     "uslug": "^1.0.4",
     "vite": "^4.3.8",
@@ -86,4 +86,4 @@
     "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^1.8.5"
   }
-}
+}

examples/sites/src/style.css

@@ -3,6 +3,11 @@ html {
   font-size: 16px;
 }
 
+/* reset.css 引入后造成site官网中 b 和 strong 标签没有粗体，此处还原粗体  */
+b, strong {
+  font-weight: 700;
+}
+
 :root {
   --docs-markdown-top-body-zindex: 99;
   --docs-tabs-header-zindex: 100;

examples/vue2/vite.config.ts

@@ -30,17 +30,20 @@ export default defineConfig((config) => {
       }),
       scriptSetupPlugin(),
       vue2SvgPlugin(),
-      importPlugin([
-        {
-          libraryName: '@opentiny/vue'
-        },
-        ...['icon', 'icon-saas'].map((lib) => ({
-          libraryName: `@opentiny/vue-${lib}`,
-          customName: (name: string) => {
-            return name === 'default' ? `@opentiny/vue-${lib}$` : `@opentiny/vue-${lib}/${name.replace(/^icon-/, '')}`
-          }
-        }))
-      ]),
+      importPlugin({
+        options: [
+          {
+            libraryName: '@opentiny/vue'
+          },
+          ...['icon', 'icon-saas'].map((lib) => ({
+            libraryName: `@opentiny/vue-${lib}`,
+            customName: (name: string) => {
+              return name === 'default' ? `@opentiny/vue-${lib}$` : `@opentiny/vue-${lib}/${name.replace(/^icon-/, '')}`
+            }
+          }))
+        ],
+        exclude: [/\.md\?.+\.js/]
+      }),
       dynamicImportPlugin(),
       Unocss({
         include: [/\.js$/, /\.ts$/, /\.vue$/, /\.html$/, /\.jsx$/, /\.tsx$/], // 增加js ,ts扫描

internals/cli/src/shared/config.ts

@@ -6,7 +6,6 @@ const EXTENERAL = [
   'echarts-wordcloud',
   '@vue/composition-api',
   '@opentiny/vue-renderless',
-  '@originjs/fluent-editor',
   'streamsaver',
   'shepherd.js',
   './label-wrap',

internals/cli/src/shared/module-utils.ts

@@ -14,7 +14,7 @@ const moduleMap = require(pathFromWorkspaceRoot('packages/modules.json'))
 type mode = 'pc' | 'mobile' | 'mobile-first'
 
 // 需要在入口文件中排除的组件，比如：富文本
-export const excludeComponents = ['RichText', 'FluentEditor']
+export const excludeComponents = ['RichText']
 
 export interface Module {
   /** 源码路径，如 vue/src/button/index.ts */

internals/vue-vite-import/README.md

@@ -52,3 +52,40 @@ export default {
   // ...
 }
 ```
+
+_1.2.0版本新增参数重载_
+
+```js
+// vite.config.js
+
+// ...
+import importPlugin from '@opentiny/vue-vite-import'
+// ...
+export default {
+  // ...
+  plugins: [
+    // ...
+    importPlugin(
+      {
+        options: [
+          {
+            libraryName: '@opentiny/vue',
+            split: '-' // 自定义分隔符
+          },
+          {
+            libraryName: '@opentiny/vue-icon',
+            customName: (name) => {
+              // 自定义模块名称
+              return `@opentiny/vue-icon/lib/${name.replace(/^icon-/, '')}.js`
+            }
+          }
+        ],
+        mode: 'pc', // mode可选，表示只打包pc或者移动模板 pc | mobile | undefined
+        exclude: [/test\.vue/] // 可选，表示需要剔除掉的文件
+      },
+      'pc'
+    )
+  ]
+  // ...
+}
+```

internals/vue-vite-import/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-vite-import",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "A TinyVue vite import plugin",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

internals/vue-vite-import/src/index.ts

@@ -30,19 +30,43 @@ export interface PluginOption {
   libraryChangeCase?: ChangeCaseType | ((name: string) => string)
 }
 
+export interface allOptions {
+  options: PluginOptions
+  mode?: ModeType
+  exclude?: Array<RegExp | string>
+}
+
 export type PluginOptions = Array<PluginOption>
 
 type ModeType = 'pc' | 'mobile' | undefined
 
-export default function vitePluginBabelImport(plgOptions: PluginOptions, mode?: ModeType): Plugin {
+const matchExclude = (exclude, id) => exclude.some((item) => item === id || item?.test?.(id))
+
+export default function vitePluginBabelImport(plgOptions: PluginOptions | allOptions, modeType?: ModeType): Plugin {
+  let pluginOption
+  let mode
+  let exclude
+  if (Array.isArray(plgOptions)) {
+    pluginOption = plgOptions
+    mode = modeType
+  } else if (plgOptions && typeof plgOptions === 'object') {
+    pluginOption = plgOptions.options
+    mode = plgOptions.mode
+    exclude = plgOptions.exclude
+  }
   return {
     name: '@opentiny/vue-vite-import',
     transform(code, id) {
+      if (Array.isArray(exclude) && matchExclude(exclude, id)) {
+        return code
+      }
+
       const isCheckMode = mode && /@opentiny\/vue-.+?\/lib\/index.js$/.test(id) && code.includes(`./${mode}`)
+
       // 不处理node_modules内的依赖
       if (/\.(?:[jt]sx?|vue)$/.test(id) && !/(node_modules)/.test(id)) {
         return {
-          code: transformCode(code, transformOptions(plgOptions)),
+          code: transformCode(code, transformOptions(pluginOption)),
           map: null
         }
       } else if (isCheckMode) {
@@ -116,7 +140,9 @@ const transformImport = (matchRes: string, opt: PluginInnerOption) => {
         itemName = allName[0]
         asName = allName[1]
       }
-      const importName = opt.customName?.(itemName) || opt.libraryResolve(itemName)
+      // 1.2.0版本新增，组件版本新增Tiny前缀导出，因此需要特殊处理一下
+      const importItemName = itemName?.startsWith('Tiny') ? itemName.substr(4) : itemName
+      const importName = opt.customName?.(importItemName) || opt.libraryResolve(importItemName)
       const compImportName = isImportWithAs ? asName : itemName
       return `import ${compImportName} from '${importName}'`
     })
@@ -133,7 +159,6 @@ const getCompRegExp = (libraryName: any) =>
 
 function transformCode(code: string, plgOptions: PluginInnerOptions): string {
   let resultCode = code
-
   plgOptions.forEach((opt) => {
     const compRegexp = getCompRegExp(opt.libraryName)
     if (compRegexp.test(resultCode)) {

packages/design/aurora/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-design-aurora",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "main": "index.ts",
   "sideEffects": false,
   "type": "module",

packages/design/saas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-design-saas",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "main": "index.ts",
   "sideEffects": false,
   "type": "module",

packages/design/smb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-design-smb",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "sideEffects": false,
   "type": "module",
   "main": "index.ts",

packages/fluent-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/fluent-editor",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "main": "dist/index.js",
   "files": [
     "dist/*"

packages/modules.json

@@ -1360,9 +1360,20 @@
     "type": "component",
     "exclude": false,
     "mode": [
+      "mobile-first",
       "pc"
     ]
   },
+  "FluentEditorMobileFirst": {
+    "path": "vue/src/fluent-editor/src/mobile-first.vue",
+    "type": "template",
+    "exclude": false
+  },
+  "FluentEditorPc": {
+    "path": "vue/src/fluent-editor/src/pc.vue",
+    "type": "template",
+    "exclude": false
+  },
   "Form": {
     "path": "vue/src/form/index.ts",
     "type": "component",

packages/renderless/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.17.6",
+  "version": "3.18.0",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
@@ -43,4 +43,4 @@
     "esno": "^4.7.0",
     "tsup": "7.2.0"
   }
-}
+}

packages/renderless/src/picker/vue.ts

@@ -287,6 +287,8 @@ const initWatch = ({ api, state, props, watch, markRaw }) => {
     { immediate: true }
   )
 
+  watch(() => props.type, api.mountPicker)
+
   watch(() => props.isRange, api.watchIsRange)
 
   watch(() => props.modelValue, api.watchModelValue)

packages/theme-mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme-mobile",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "main": "index.css",

packages/theme-saas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme-saas",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "main": "index.css",

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme",
-  "version": "3.17.4",
+  "version": "3.18.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -87,4 +87,4 @@
       ]
     }
   }
-}
+}

packages/theme/src/color-select-panel/index.less

@@ -13,7 +13,7 @@
     gap: var(--ti-color-select-panel-spacing);
     padding: var(--ti-color-select-panel-padding-vertical) var(--ti-color-select-panel-padding-horizontal);
     box-shadow: var(--ti-color-select-panel-box-shadow);
-
+    
     &__tools {
       display: flex;
       line-height: var(--ti-color-select-panel-tools-line-height);
@@ -138,10 +138,15 @@
           width: 20px;
           height: 20px;
           border-radius: var(--ti-color-select-panel-border-radius-sm);
-          margin-right: 8px;
           margin: 0 4px 4px 0;
         }
       }
+      .tiny-collapse-item__arrow {
+        display: none;
+      }
+      .tiny-collapse-item__wrap {
+        background: transparent;
+      }
     }
     .tiny-collapse-item__wrap{
       background: transparent;

packages/theme/src/form-item/index.less

@@ -126,7 +126,7 @@
     color: var(--ti-form-item-label-text-color);
     height: var(--ti-form-item-label-line-height);
     line-height: var(--ti-form-item-label-line-height);
-    padding-right: 8px;
+    padding-right: var(--ti-form-item-label-padding-right);
     box-sizing: border-box;
     overflow: hidden;
     white-space: nowrap;

packages/theme/src/form-item/smb-theme.js

@@ -1,13 +1,14 @@
 export const tinyFormItemSmbTheme = {
   'ti-form-item-label-text-color': 'var(--ti-common-color-text-secondary)',
-  'ti-form-item-margin-bottom-default': '24px',
-  'ti-form-item-margin-bottom-mini': '12px',
-  'ti-form-item-margin-bottom-small': '20px',
-  'ti-form-item-margin-bottom-medium': '24px',
-  'ti-form-item-input-mini-height': '20px',
-  'ti-form-item-input-small-height': '24px',
-  'ti-form-item-input-medium-height': '32px',
-  'ti-form-item-mini-line-height': '20px',
-  'ti-form-item-small-line-height': '24px',
-  'ti-form-item-medium-line-height': '32px'
+  'ti-form-item-margin-bottom-default': 'var(--ti-common-space-6x)',
+  'ti-form-item-margin-bottom-mini': 'var(--ti-common-space-3x)',
+  'ti-form-item-margin-bottom-small': 'var(--ti-common-space-5x)',
+  'ti-form-item-margin-bottom-medium': 'var(--ti-common-space-6x)',
+  'ti-form-item-input-mini-height': 'var(--ti-common-space-5x)',
+  'ti-form-item-input-small-height': 'var(--ti-common-space-6x)',
+  'ti-form-item-input-medium-height': 'var(--ti-common-space-8x)',
+  'ti-form-item-mini-line-height': 'var(--ti-common-space-5x)',
+  'ti-form-item-small-line-height': 'var(--ti-common-space-6x)',
+  'ti-form-item-medium-line-height': 'var(--ti-common-space-8x)',
+  'ti-form-item-label-padding-right': 'var(--ti-common-space-6x)'
 }

packages/theme/src/form-item/vars.less

@@ -19,6 +19,8 @@
   --ti-form-item-mini-line-height: var(--ti-common-line-height-5, 24px);
   // 表单输入框左侧文本行高
   --ti-form-item-label-line-height: var(--ti-common-size-height-normal, 28px);
+  // 表单输入框左侧文本内边距
+  --ti-form-item-label-padding-right: var(--ti-common-space-2x, 8px);
   // 迷你尺寸表单的输入框高度
   --ti-form-item-input-mini-height: var(--ti-common-size-6x, 24px);
   // 小型尺寸表单的输入框高度

packages/theme/src/index.less

@@ -18,6 +18,7 @@
 @import './autocomplete/index.less';
 @import './badge/index.less';
 @import './base/index.less';
+@import './base-select/index.less';
 @import './breadcrumb/index.less';
 @import './breadcrumb-item/index.less';
 @import './bulletin-board/index.less';
@@ -75,6 +76,7 @@
 @import './float-button/index.less';
 @import './floatbar/index.less';
 @import './flowchart/index.less';
+@import './fluent-editor/index.less';
 @import './form/index.less';
 @import './form-item/index.less';
 @import './fullscreen/index.less';

packages/theme/src/pager/index.less

@@ -177,7 +177,7 @@
     &-text {
       color: var(--ti-pager-normal-text-color);
       font-size: var(--ti-pager-font-size);
-      padding-left: 14px;
+      padding-left: var(--ti-pager-normal-text-padding-left);
       margin-right: 8px;
       line-height: var(--ti-pager-input-height);
       &-sufix {

packages/theme/src/pager/smb-theme.js

@@ -1,42 +1,44 @@
 export const tinyPagerSmbTheme = {
   'ti-pager-primary-bg-color': 'var(--ti-common-color-bg-white-emphasize)',
-  'ti-pager-active-bg-color': '#0000000D',
-  'ti-pager-li-border-radius': '20px',
-  'ti-pager-height': '32px',
-  'ti-pager-input-height': '32px',
-  'ti-pager-poplist-item-padding-horizontal': '8px',
+  // 缺少f5f5f5common变量
+  'ti-pager-active-bg-color': '#F5F5F5',
+  'ti-pager-li-border-radius': 'var(--ti-common-border-radius-6)',
+  'ti-pager-height': 'var(--ti-common-size-height-normal)',
+  'ti-pager-input-height': 'var(--ti-common-size-height-normal)',
+  'ti-pager-poplist-item-padding-horizontal': 'var(--ti-common-space-2x)',
   'ti-pager-active-font-color': 'var(--ti-common-color-text-primary)',
   'ti-pager-li-item-hover-text-color': 'var(--ti-pager-text-color)',
   'ti-pager-goto-btn-text-hover-color': 'var(--ti-common-color-selected-text-color)',
-  'ti-pager-total-font-size': '14px',
-  'ti-pager-total-height': '22px',
-  'ti-pager-total-line-height': '22px',
-  'ti-pager-input-border-color': '#C2C2C2',
+  'ti-pager-total-font-size': 'var(--ti-common-font-size-base)',
+  'ti-pager-total-height': 'var(--ti-common-line-height-2)',
+  'ti-pager-total-line-height': 'var(--ti-common-line-height-2)',
+  'ti-pager-input-border-color': 'var(--ti-common-color-line-normal)',
   'ti-pager-total-svg-fill-color': 'var(--ti-common-color-icon-normal)',
-  'ti-pager-input-padding-vertical': '12px',
-  'ti-pager-svg-font-size': '16px',
-  'ti-pager-prev-padding-left': '0px',
-  'ti-pager-prev-padding-right': '0px',
-  'ti-pager-prev-margin-left': '16px',
-  'ti-pager-prev-margin-right': '8px',
-  'ti-pager-next-margin-left': '8px',
-  'ti-pager-next-margin-right': '0px',
-  'ti-pager-next-padding-right': '0px',
+  'ti-pager-input-padding-vertical': 'var(--ti-common-space-3x)',
+  'ti-pager-svg-font-size': 'var(--ti-common-font-size-2)',
+  'ti-pager-prev-padding-left': 'var(--ti-common-space-0)',
+  'ti-pager-prev-padding-right': 'var(--ti-common-space-0)',
+  'ti-pager-prev-margin-left': 'var(--ti-common-space-4x)',
+  'ti-pager-prev-margin-right': 'var(--ti-common-space-2x)',
+  'ti-pager-next-margin-left': 'var(--ti-common-space-2x)',
+  'ti-pager-next-margin-right': 'var(--ti-common-space-0)',
+  'ti-pager-next-padding-right': 'var(--ti-common-space-0)',
   'ti-pager-btn-svg-fill-color': 'var(--ti-common-color-icon-normal)',
-  'ti-pager-active-font-weight': '600',
-  'ti-pager-dot-is-popup-svg-font-size': '16px',
-  'ti-pager-poplist-item-hover-bg-color': '#0000000D',
-  'ti-pager-poplist-item-hover-text-color': '#191919',
+  'ti-pager-active-font-weight': 'var(--ti-common-font-weight-bold)',
+  'ti-pager-dot-is-popup-svg-font-size': 'var(--ti-common-font-size-2)',
+  'ti-pager-poplist-item-hover-bg-color': '#F5F5F5',
+  'ti-pager-poplist-item-hover-text-color': 'var(--ti-common-color-text-primary)',
   'ti-pager-li-item-hover-font-weight': 'var(--ti-common-font-weight-6)',
-  'ti-pager-min-width': '32px',
+  'ti-pager-min-width': 'var(--ti-common-size-height-normal)',
   'ti-pager-prev-next-hover-bg-color': 'transparent',
-  'ti-pager-group-sizes-margin-right': '0px',
+  'ti-pager-group-sizes-margin-right': 'var(--ti-common-space-0)',
   'ti-pager-sizes-input-hover-text-color': '#595959',
-  'ti-pager-input-btn-width': '24px',
-  'ti-pager-selector-padding-vertical': '8px',
-  'ti-pager-pop-body-margin-top': '4px',
-  'ti-pager-poplist-item-selected-bg-color': '#0000000D',
-  'ti-pager-poplist-item-min-height': '32px',
-  'ti-pager-mini-min-width': '24px',
-  'ti-pager-sizes-num-margin-right': '2px'
+  'ti-pager-input-btn-width': 'var(--ti-common-size-width-mini)',
+  'ti-pager-selector-padding-vertical': 'var(--ti-common-space-2x)',
+  'ti-pager-pop-body-margin-top': 'var(--ti-common-space-base)',
+  'ti-pager-poplist-item-selected-bg-color': '#F5F5F5',
+  'ti-pager-poplist-item-min-height': 'var(--ti-common-line-height-6)',
+  'ti-pager-mini-min-width': 'var(--ti-common-size-width-mini)',
+  'ti-pager-sizes-num-margin-right': 'var(--ti-common-dropdown-gap)',
+  'ti-pager-normal-text-padding-left': 'var(--ti-common-space-4x)'
 }

packages/theme/src/pager/vars.less

@@ -46,9 +46,10 @@
   --ti-pager-input-height: var(--ti-common-size-height-mini, 24px);
   // 分页输入框纵向内边距
   --ti-pager-input-padding-vertical: 10px;
-
   // 分页字号(不含总条数项)
   --ti-pager-font-size: var(--ti-common-font-size-base, 12px);
+  // 分页文字左边内边距
+  --ti-pager-normal-text-padding-left: calc(var(--ti-common-space-base) * 3 + 2px, 14px);;
   // 分页前往按钮|页码项文本色
   --ti-pager-text-color: var(--ti-common-color-text-secondary, #575d6c);
   // 分页下拉框按钮图标色

packages/theme/src/tabs/vars.less

@@ -60,9 +60,9 @@
   // card类型small尺寸标签栏高度
   --ti-tabs-small-height: var(--ti-common-size-10x, 40px);
   // 分隔符类型small尺寸标签栏高度
-  --ti-tabs-small-separator-height: var(--ti-common-line-height-2, 24px);
+  --ti-tabs-small-separator-height: var(--ti-common-size-height-mini, 24px);
   // button-card类型small尺寸标签栏高度
-  --ti-tabs-small-button-card-height: var(--ti-common-line-height-2, 24px);
+  --ti-tabs-small-button-card-height: var(--ti-common-size-height-mini, 24px);
   // button-card类型small尺寸标签栏字号
   --ti-tabs-small-button-card-font-size: var(--ti-common-font-size-0, 12px);
   // card类型small尺寸标签项右外边距(new)

packages/theme/src/theme.config.js

@@ -86,5 +86,7 @@ export default {
   'year-table': 'year-table',
   'skeleton-item': 'skeleton-item',
   'radio-button': 'radio-button',
+  'color-select-panel': 'color-select-panel',
+  'color-picker': 'color-picker',
   'split': 'split-wrapper'
 }

packages/vue-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-common",
   "private": true,
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [

packages/vue-directive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-directive",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "module": "index.ts",
   "main": "index.ts",

packages/vue-icon-saas/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-icon-saas",
   "private": true,
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "main": "index.ts",

packages/vue-icon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-icon",
   "private": true,
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "main": "index.ts",

packages/vue-locale/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-locale",
   "private": true,
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "src/index.ts",
   "license": "MIT",

packages/vue-runtime/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-runtime",
   "type": "module",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -31,4 +31,4 @@
     "dist2",
     "dist3"
   ]
-}
+}

packages/vue-saas-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-saas-common",
   "private": true,
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [

packages/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue",
   "private": true,
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
@@ -131,6 +131,7 @@
     "@opentiny/vue-floatbar": "workspace:~",
     "@opentiny/vue-floating-button": "workspace:~",
     "@opentiny/vue-flowchart": "workspace:~",
+    "@opentiny/vue-fluent-editor": "workspace:~",
     "@opentiny/vue-form": "workspace:~",
     "@opentiny/vue-form-item": "workspace:~",
     "@opentiny/vue-fullscreen": "workspace:~",

packages/vue/src/action-menu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-action-menu",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/action-sheet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-action-sheet",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-alert",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/amount/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-amount",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/anchor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-anchor",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "sideEffects": false,

packages/vue/src/area/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-area",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/async-flowchart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-async-flowchart",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/autocomplete/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-autocomplete",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-avatar",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-badge",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/base-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-base-select",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",