@opentiny/vue-docs 3.28.1 → 3.30.0

package/demos/pc/app/checkbox/checked.vue

@@ -1,8 +1,8 @@
 <template>
   <tiny-checkbox-group v-model="checkedData">
-    <tiny-checkbox label="复选框 1" name="name1"></tiny-checkbox>
-    <tiny-checkbox label="复选框 2" name="name2" checked></tiny-checkbox>
-    <tiny-checkbox label="复选框 3" name="name3"></tiny-checkbox>
+    <tiny-checkbox label="复选框 1" name="name1" style="margin-bottom: 8px"></tiny-checkbox>
+    <tiny-checkbox label="复选框 2" name="name2" checked style="margin-bottom: 8px"></tiny-checkbox>
+    <tiny-checkbox label="复选框 3" name="name3" style="margin-bottom: 8px"></tiny-checkbox>
   </tiny-checkbox-group>
 </template>
 

package/demos/pc/app/date-picker/align.spec.ts

@@ -6,38 +6,35 @@ test.use({
 test('[DatePicker] 测试对齐方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#align')
-  await page.locator('.settings-btn').first().click()
-  await page.locator('label').filter({ hasText: '单示例' }).click()
-  await page.waitForSelector('.demo-date-picker-wrap', { state: 'visible' })
-
+  const demo = page.locator('#align')
   // 左对齐
-  const leftDateInputDom = page.getByRole('textbox').nth(1)
-  const leftDatePanelDom = page.locator('.tiny-picker-panel').nth(2)
+  const leftDateInputDom = demo.locator('.tiny-input__inner').nth(0)
+  const leftDatePanelDom = page.locator('body > .tiny-picker-panel').nth(0)
   const leftClosePanel = page.getByText('左对齐：')
   await page.waitForTimeout(200)
 
   await leftDateInputDom.click()
   await page.waitForTimeout(200)
-  await expect(leftDatePanelDom).toHaveAttribute('x-placement', /bottom-start|top-start/)
+  await expect(leftDatePanelDom).toHaveAttribute('x-placement', 'bottom-start')
   await leftClosePanel.click()
 
   // 居中对齐
-  const centerDateInputDom = page.getByRole('textbox').nth(2)
-  const centerDatePanelDom = page.locator('.tiny-picker-panel').nth(2)
+  const centerDateInputDom = demo.locator('.tiny-input__inner').nth(1)
+  const centerDatePanelDom = page.locator('body > .tiny-picker-panel').nth(1)
   const centerClosePanel = page.getByText('居中对齐：')
 
   await centerDateInputDom.click()
   await page.waitForTimeout(200)
-  await expect(centerDatePanelDom).toHaveAttribute('x-placement', /bottom|top/)
+  await expect(centerDatePanelDom).toHaveAttribute('x-placement', /bottom/)
   await centerClosePanel.click()
 
   // 右对齐
-  const rightDateInputDom = page.getByRole('textbox').nth(3)
-  const rightDatePanelDom = page.locator('.tiny-picker-panel').nth(2)
+  const rightDateInputDom = demo.locator('.tiny-input__inner').nth(2)
+  const rightDatePanelDom = page.locator('body > .tiny-picker-panel').nth(2)
   const rightClosePanel = page.getByText('右对齐：')
 
   await rightDateInputDom.click()
   await page.waitForTimeout(200)
-  await expect(rightDatePanelDom).toHaveAttribute('x-placement', /bottom-end|top-end/)
+  await expect(rightDatePanelDom).toHaveAttribute('x-placement', /bottom-end/)
   await rightClosePanel.click()
 })

package/demos/pc/app/date-picker/clear.spec.ts

@@ -6,9 +6,9 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
 
   const demo = page.locator('#clear')
 
-  const datePickerDefaultClearIcon = demo.getByRole('textbox').nth(0)
-  const datePickerHideClearIcon = demo.getByRole('textbox').nth(1)
-  const datePickerCustomClearIcon = demo.getByRole('textbox').nth(2)
+  const datePickerDefaultClearIcon = demo.getByRole('combobox').nth(0)
+  const datePickerHideClearIcon = demo.getByRole('combobox').nth(1)
+  const datePickerCustomClearIcon = demo.getByRole('combobox').nth(2)
   const clearIcon = demo.locator('.tiny-date-editor .tiny-input__icon-container .baseClearicon')
 
   // 默认显示清除按钮

package/demos/pc/app/date-picker/default-value.spec.ts

@@ -7,20 +7,20 @@ test('[DatePicker] 测试选择器打开时默认时间设置', async ({ page })
   await page.locator('label').filter({ hasText: '单示例' }).click()
 
   // default-value: 打开日期面板，默认显示的日期
-  await page.getByRole('textbox').nth(1).click()
+  await page.getByRole('combobox').nth(0).click()
   await expect(page.getByRole('button', { name: '2000 年' })).toBeVisible()
   await expect(page.getByRole('button', { name: '11 月' })).toBeVisible()
 
   // default-time: 日期时间 (范围)，选择日期之后默认显示的时间 (范围)
-  const dateInputDefaultTime = page.getByRole('textbox').nth(2)
+  const dateInputDefaultTime = page.getByRole('combobox').nth(1)
   await dateInputDefaultTime.fill('2023-05-20 09:00:00')
   await dateInputDefaultTime.press('Enter')
 
-  await page.getByRole('textbox', { name: '2023-05-20 09:00:00' }).click()
+  await page.getByRole('combobox', { name: '2023-05-20 09:00:00' }).click()
   await page.getByRole('cell', { name: '15' }).getByText('15').last().click()
   await expect(page.getByRole('textbox', { name: '选择时间' })).toHaveValue('09:00:00')
 
-  await page.getByRole('textbox').nth(3).click()
+  await page.getByRole('combobox').nth(2).click()
   await page.getByRole('cell', { name: '10' }).getByText('10').last().click()
   await page.getByRole('cell', { name: '10' }).getByText('10').nth(1).click()
   await expect(page.getByRole('textbox', { name: '开始时间' })).toHaveValue('09:00:00')

package/demos/pc/app/date-picker/events.spec.ts

@@ -19,7 +19,7 @@ test('[DatePicker] 测试事件', async ({ page }) => {
   await page
     .locator('div')
     .filter({ hasText: /^blur:$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
   await page.getByRole('cell', { name: '15' }).getByText('15').last().click()
   const blurEventMessageDom = page.locator('div').filter({ hasText: '触发 blur 事件' }).nth(1)
@@ -33,7 +33,7 @@ test('[DatePicker] 测试事件', async ({ page }) => {
   await page
     .locator('div')
     .filter({ hasText: /^change:$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
   await page.getByRole('cell', { name: '15' }).getByText('15').last().click()
   const changeEventMessageDom = page.locator('div').filter({ hasText: '触发 change 事件，组件绑定值为：' }).nth(1)

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

@@ -5,13 +5,13 @@ test('[DatePicker] 测试日期格式化', async ({ page }) => {
   await page.goto('date-picker#format')
 
   // format: 日期输入框中显示的格式
-  await page.getByRole('textbox', { name: '2023 年 05 月 24 日' }).first().click()
+  await page.getByRole('combobox', { name: '2023 年 05 月 24 日' }).first().click()
   await page.getByRole('cell', { name: '20' }).getByText('20').last().click()
-  await expect(page.getByRole('textbox', { name: '2023 年 05 月 20 日' }).first()).toBeVisible()
+  await expect(page.getByRole('combobox', { name: '2023 年 05 月 20 日' }).first()).toBeVisible()
 
   // time-format: 时间输入框中显示的格式
   await page.locator('.tiny-date-editor input').nth(1).click()
-  await page.getByRole('cell', { name: '24' }).locator('span').click();
+  await page.getByRole('cell', { name: '24' }).locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('.tiny-date-editor input').nth(1)).toHaveValue('2023 年 05 月 24 日 08 时 00 分 00 秒')
 

package/demos/pc/app/date-picker/now.spec.ts

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('“此刻”逻辑定制', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#now')
-  await page.getByRole('textbox', { name: '-11-11 10:10:11' }).first().click()
+  await page.getByRole('combobox', { name: '-11-11 10:10:11' }).first().click()
   await page.getByText('此刻（服务器时间）').click()
   await page.getByRole('button', { name: '确定' }).click()
-  await expect(page.getByRole('textbox', { name: '-12-11 18:18:18' })).toBeVisible()
-  await page.getByRole('textbox', { name: '-11-11 10:10:11' }).click()
+  await expect(page.getByRole('combobox', { name: '-12-11 18:18:18' })).toBeVisible()
+  await page.getByRole('combobox', { name: '-11-11 10:10:11' }).click()
   await page.getByRole('button', { name: '此刻' }).click()
-  await expect(page.getByRole('textbox', { name: '-10-08 18:18:18' })).toBeVisible()
+  await expect(page.getByRole('combobox', { name: '-10-08 18:18:18' })).toBeVisible()
 })

package/demos/pc/app/date-picker/shortcuts.spec.ts

@@ -5,7 +5,7 @@ test('[DatePicker] 测试选择快捷选项日期：今天/昨天/一周前', as
   await page.goto('date-picker#shortcuts')
 
   // 日期选择：今天/昨天/一周前
-  const datePickerDom = page.getByRole('textbox', { name: '请选择日期' })
+  const datePickerDom = page.getByRole('combobox', { name: '请选择日期' })
   await datePickerDom.click()
   await page.getByRole('button', { name: '今天' }).click()
   await page.locator('.tiny-date-editor input').first().click()

package/demos/pc/app/date-picker/slot.spec.ts

@@ -7,23 +7,23 @@ test('[DatePicker] 测试尺寸设置', async ({ page }) => {
   let btn = page.getByRole('button', { name: '自定义按钮' })
   let nowBtn = page.getByRole('button', { name: '自定义此刻' })
 
-  await page.locator('#slot').getByRole('textbox', { name: '请选择日期', exact: true }).click()
+  await page.locator('#slot').getByRole('combobox', { name: '请选择日期', exact: true }).click()
   await page.waitForTimeout(200)
   await expect(btn).toBeVisible()
 
-  await page.getByRole('textbox', { name: '请选择日期时间' }).click()
+  await page.getByRole('combobox', { name: '请选择日期时间' }).click()
   await page.waitForTimeout(200)
   await expect(nowBtn).toBeVisible()
 
-  await page.locator('#slot').getByRole('textbox', { name: '请选择周' }).click()
+  await page.locator('#slot').getByRole('combobox', { name: '请选择周' }).click()
   await page.waitForTimeout(200)
   await expect(btn.first()).toBeVisible()
 
-  await page.locator('#slot').getByRole('textbox', { name: '请选择月份' }).click()
+  await page.locator('#slot').getByRole('combobox', { name: '请选择月份' }).click()
   await page.waitForTimeout(200)
   await expect(btn.first()).toBeVisible()
 
-  await page.locator('#slot').getByRole('textbox', { name: '请选择年份' }).click()
+  await page.locator('#slot').getByRole('combobox', { name: '请选择年份' }).click()
   await page.waitForTimeout(200)
   await expect(btn.first()).toBeVisible()
 

package/demos/pc/app/dialog-box/basic-usage.spec.ts

@@ -5,22 +5,22 @@ test('dialogBox 基础用法', async ({ page }) => {
   await page.goto('dialog-box#basic-usage')
   const demo = page.locator('#basic-usage')
 
-  await page.getByRole('button', { name: /Dialog/ }).click()
+  await demo.getByRole('button', { name: /Dialog/ }).click()
   await demo.getByRole('button', { name: '确 定' }).click()
 
-  await page.getByRole('button', { name: /Dialog/ }).click()
+  await demo.getByRole('button', { name: /Dialog/ }).click()
   await demo.getByRole('button', { name: '取 消' }).click()
 
   // 点击 x 图标
-  await page.getByRole('button', { name: /Dialog/ }).click()
+  await demo.getByRole('button', { name: /Dialog/ }).click()
   await demo.getByLabel('Close').click()
 
   // 点击遮罩时，关闭 dialogBox
-  await page.getByRole('button', { name: /Dialog/ }).click()
+  await demo.getByRole('button', { name: /Dialog/ }).click()
   await demo.locator('.tiny-dialog-box__wrapper').click()
 
   // 按 ESC 键，关闭 dialogBox
-  await page.getByRole('button', { name: /Dialog/ }).click()
+  await demo.getByRole('button', { name: /Dialog/ }).click()
   await page.locator('body').press('Escape')
   expect(demo.locator('.tiny-dialog-box.is-center > .tiny-dialog-box__header')).toBeHidden()
 })

package/demos/pc/app/dialog-box/form-in-dialog.spec.ts

@@ -4,7 +4,7 @@ test('弹窗表单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#form-in-dialog')
   const demo = page.locator('#form-in-dialog')
-  const dialogBox = page.locator('.tiny-dialog-box')
+  const dialogBox = demo.locator('.tiny-dialog-box')
   await page.getByRole('button', { name: '弹出表单' }).click()
   await expect(dialogBox.locator('.tiny-form')).toBeVisible()
   await demo.getByRole('textbox').first().click()
@@ -17,6 +17,5 @@ test('弹窗表单', async ({ page }) => {
 
   // 验证下拉选择校验提示不会异常
   await demo.locator('.tiny-select__tags-group').click()
-  await page.waitForTimeout(200)
   await expect(page.locator('.tiny-form__valid.tiny-tooltip')).not.toBeVisible()
 })

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

@@ -3,12 +3,13 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#basic-usage')
+  const demo = page.locator('#basic-usage')
 
-  const drawer = page.locator('.tiny-drawer__main')
-  await page.getByRole('button', { name: '抽屉组件' }).click()
+  const drawer = demo.locator('.tiny-drawer__main')
+  await demo.getByRole('button', { name: '抽屉组件' }).click()
   await expect(drawer).toBeVisible()
   await expect(drawer.locator('.tiny-drawer__header')).toHaveText('标题')
   await expect(drawer.locator('.tiny-drawer__body')).toHaveText('内容区域')
   await drawer.getByRole('button', { name: 'Close' }).click()
-  await expect(page.locator('.tiny-drawer__main')).not.toBeVisible()
+  await expect(demo.locator('.tiny-drawer__main')).not.toBeVisible()
 })

package/demos/pc/app/drawer/close-on-press-escape.spec.ts

@@ -5,10 +5,12 @@ test('按 Esc 键关闭 Drawer（close-on-press-escape）', async ({ page }) =>
 
   await page.goto('drawer#close-on-press-escape')
 
-  const drawer = page.locator('.tiny-drawer__main')
+  const demo = page.locator('#close-on-press-escape')
+
+  const drawer = demo.locator('.tiny-drawer__main')
 
   // 打开 Drawer（用文本更稳定）
-  await page.getByText('抽屉组件').click()
+  await demo.getByText('抽屉组件').click()
   await expect(drawer).toBeVisible()
 
   // 按 Esc

package/demos/pc/app/drawer/placement.spec.ts

@@ -6,19 +6,19 @@ test('抽屉方向', async ({ page }) => {
   const demo = page.locator('#placement')
   const drawer = demo.locator('.tiny-drawer__main')
 
-  await page.getByRole('button', { name: 'left' }).click()
+  await demo.getByRole('button', { name: 'left' }).click()
   await expect(drawer).toHaveCSS('left', '0px')
   await page.locator('.tiny-drawer__mask').click()
 
-  await page.getByRole('button', { name: 'right' }).click()
+  await demo.getByRole('button', { name: 'right' }).click()
   await expect(drawer).toHaveCSS('right', '0px')
   await page.locator('.tiny-drawer__mask').click()
 
-  await page.getByRole('button', { name: 'top' }).click()
+  await demo.getByRole('button', { name: 'top' }).click()
   await expect(drawer).toHaveCSS('top', '0px')
   await page.locator('.tiny-drawer__mask').click()
 
-  await page.getByRole('button', { name: 'bottom' }).click()
+  await demo.getByRole('button', { name: 'bottom' }).click()
   await expect(drawer).toHaveCSS('bottom', '0px')
   await page.locator('.tiny-drawer__mask').click()
 })

package/demos/pc/app/drawer/show-header.spec.ts

@@ -4,8 +4,9 @@ test('头部显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#show-header')
 
-  const drawerHeader = page.locator('.tiny-drawer__header')
+  const demo = page.locator('#show-header')
+  const drawerHeader = demo.locator('.tiny-drawer__header')
 
-  await page.getByRole('button', { name: '隐藏头部' }).click()
+  await demo.getByRole('button', { name: '隐藏头部' }).click()
   await expect(drawerHeader).not.toBeVisible()
 })

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

@@ -227,6 +227,7 @@ export default {
         'zh-CN': `
           <p><code>open</code>：当抽屉打开时触发；</p>
           <p><code>confirm</code>：当抽屉底部确定按钮点击时触发，该按钮仅当设置 <code>show-footer</code> 属性为 true 时可见；</p>
+          <p><code>closed</code>：当抽屉关闭动画结束时触发；</p>
           <p><code>close</code>：当抽屉关闭时触发。关闭抽屉的途径有：</p>
             <ul>
               <li>点击右上角关闭按钮；</li>
@@ -416,11 +417,11 @@ export default {
       support: {
         value: true
       },
-      description: '支持 open、confirm、close 等事件。',
+      description: '支持 open、confirm、close、closed 等事件。',
       cloud: {
         value: true
       },
-      apis: ['open', 'confirm', 'close'],
+      apis: ['open', 'confirm', 'close', 'closed'],
       demos: ['events']
     }
   ]

package/demos/pc/app/dropdown/show-icon-composition-api.vue

@@ -64,7 +64,7 @@ p {
       .tiny-svg {
         fill: var(--tv-color-icon-control);
         &:hover {
-          fill: var(--tv-color-icon-control);
+          fill: var(--tv-color-info-icon);
         }
       }
     }

package/demos/pc/app/dropdown/show-icon.vue

@@ -74,7 +74,7 @@ p {
       .tiny-svg {
         fill: var(--tv-color-icon-control);
         &:hover {
-          fill: var(--tv-color-icon-control);
+          fill: var(--tv-color-info-icon);
         }
       }
     }

package/demos/pc/app/dropdown/tip-composition-api.vue

@@ -6,12 +6,14 @@
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景 2：使用 tip 和 tip-position 属性设置提示信息</p>
+    <p>场景 2：使用 tip、tip-position 和 tip-effect 属性设置提示信息</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu popper-class="my-class">
           <tiny-dropdown-item label="老友粉" tip="老友粉"></tiny-dropdown-item>
           <tiny-dropdown-item tip="黄金糕" tip-position="top">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item tip="深色主题提示" tip-position="right" tip-effect="dark">深色主题</tiny-dropdown-item>
+          <tiny-dropdown-item tip="浅色主题提示" tip-position="left" tip-effect="light">浅色主题</tiny-dropdown-item>
           <tiny-dropdown-item>狮子头</tiny-dropdown-item>
           <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
           <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
@@ -36,7 +38,8 @@ const options = ref([
     label: '狮子头',
     divided: true,
     tip: '很好',
-    tipPosition: 'left'
+    tipPosition: 'left',
+    tipEffect: 'light'
   },
   {
     label: '黄金糕',

package/demos/pc/app/dropdown/tip.vue

@@ -6,12 +6,14 @@
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景 2：使用 tip 和 tip-position 属性设置提示信息</p>
+    <p>场景 2：使用 tip、tip-position 和 tip-effect 属性设置提示信息</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu popper-class="my-class">
           <tiny-dropdown-item label="老友粉" tip="老友粉"></tiny-dropdown-item>
           <tiny-dropdown-item tip="黄金糕" tip-position="top">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item tip="深色主题提示" tip-position="right" tip-effect="dark">深色主题</tiny-dropdown-item>
+          <tiny-dropdown-item tip="浅色主题提示" tip-position="left" tip-effect="light">浅色主题</tiny-dropdown-item>
           <tiny-dropdown-item>狮子头</tiny-dropdown-item>
           <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
           <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
@@ -43,7 +45,8 @@ export default {
           label: '狮子头',
           divided: true,
           tip: '很好',
-          tipPosition: 'left'
+          tipPosition: 'left',
+          tipEffect: 'light'
         },
         {
           label: '黄金糕',

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

@@ -119,9 +119,9 @@ export default {
         'en-US': 'Prompt'
       },
       desc: {
-        'zh-CN': '通过 <p><code>tip</code> 属性设置提示信息，<code>tip-position</code> 属性设置提示信息的位置。</p>\n',
+        'zh-CN': '<p>通过 <code>tip</code> 属性设置提示信息，<code>tip-position</code> 属性设置提示信息的位置，<code>tip-effect</code> 属性设置提示信息的主题（light/dark）。</p>\n',
         'en-US':
-          '<p>Set the prompt information through the <code>tip</code> attribute, and set the position of the prompt information through the <code>tip-position</code> attribute.</p>\n'
+          '<p>Set the prompt information through the <code>tip</code> attribute, set the position of the prompt information through the <code>tip-position</code> attribute, and set the theme of the prompt information (light/dark) through the <code>tip-effect</code> attribute.</p>\n'
       },
       codeFiles: ['tip.vue']
     },

package/demos/pc/app/filter-panel/size-composition-api.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="mb10">
+      <span class="label">选择尺寸：</span>
+      <tiny-radio-group v-model="currentSize">
+        <tiny-radio label="">默认 (default)</tiny-radio>
+        <tiny-radio label="medium">中等 (medium)</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="box">
+      <tiny-filter-panel
+        ref="filterPanel"
+        label="物品数量"
+        :value="value"
+        :size="currentSize"
+        @handle-clear="handleClear"
+      >
+        <tiny-radio-group v-model="radioVal" size="mini">
+          <tiny-radio label="大于">大于</tiny-radio>
+          <tiny-radio label="等于">等于</tiny-radio>
+          <tiny-radio label="小于">小于</tiny-radio>
+        </tiny-radio-group>
+        <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
+      </tiny-filter-panel>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput } from '@opentiny/vue'
+
+// 表单数据
+const inputVal = ref('')
+const radioVal = ref('')
+const currentSize = ref('') // 默认尺寸
+
+// 计算显示的值
+const value = computed(() => {
+  return radioVal.value + inputVal.value
+})
+
+// 清空处理
+const handleClear = () => {
+  radioVal.value = ''
+  inputVal.value = ''
+}
+</script>
+
+<style scoped>
+.box {
+  display: flex;
+}
+.label {
+  margin-right: 10px;
+  font-weight: bold;
+}
+</style>

package/demos/pc/app/filter-panel/size.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('测试过滤器面板尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('filter-panel#size')
+
+  const demo = page.locator('#size')
+  const filterBox = demo.locator('.tiny-filter-box')
+
+  // 测试默认尺寸（不包含 medium class）
+  await expect(filterBox).toHaveClass(/tiny-filter-box/)
+  await expect(filterBox).not.toHaveClass(/tiny-filter-box--medium/)
+
+  // 测试 medium 尺寸
+  await demo.getByText('中等 (medium)').click()
+  await page.waitForTimeout(200)
+  await expect(filterBox).toHaveClass(/tiny-filter-box--medium/)
+
+  // 切换回默认尺寸
+  await demo.getByText('默认 (default)').click()
+  await page.waitForTimeout(200)
+  await expect(filterBox).not.toHaveClass(/tiny-filter-box--medium/)
+})

package/demos/pc/app/filter-panel/size.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="mb10">
+      <span class="label">选择尺寸：</span>
+      <tiny-radio-group v-model="currentSize">
+        <tiny-radio label="">默认 (default)</tiny-radio>
+        <tiny-radio label="medium">中等 (medium)</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="box">
+      <tiny-filter-panel
+        ref="filterPanel"
+        label="物品数量"
+        :value="value"
+        :size="currentSize"
+        @handle-clear="handleClear"
+      >
+        <tiny-radio-group v-model="radioVal" size="mini">
+          <tiny-radio label="大于">大于</tiny-radio>
+          <tiny-radio label="等于">等于</tiny-radio>
+          <tiny-radio label="小于">小于</tiny-radio>
+        </tiny-radio-group>
+        <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
+      </tiny-filter-panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyRadio,
+    TinyRadioGroup,
+    TinyFilterPanel,
+    TinyInput
+  },
+  data() {
+    return {
+      inputVal: '',
+      radioVal: '',
+      currentSize: '' // 默认尺寸
+    }
+  },
+  computed: {
+    value() {
+      return this.radioVal + this.inputVal
+    }
+  },
+  methods: {
+    handleClear() {
+      this.radioVal = ''
+      this.inputVal = ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box {
+  display: flex;
+}
+.label {
+  margin-right: 10px;
+  font-weight: bold;
+}
+</style>

package/demos/pc/app/filter-panel/webdoc/filter-panel.js

@@ -46,6 +46,19 @@ export default {
       },
       codeFiles: ['tip.vue']
     },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'Size'
+      },
+      desc: {
+        'zh-CN': '通过 <code>size</code> 设置过滤器面板的尺寸。支持 <code>medium</code> 中等尺寸，不设置则为默认尺寸。',
+        'en-US':
+          'Set the size of the filter panel through <code>size</code>. Supports <code>medium</code> size. If not set, the default size is used.'
+      },
+      codeFiles: ['size.vue']
+    },
     {
       demoId: 'manual-hide',
       name: {