From 919f9bbffb393d84f64eecd9178be941713f7c98 Mon Sep 17 00:00:00 2001 From: gimmyhehe <975402925@qq.com> Date: Thu, 31 Jul 2025 09:45:18 +0800 Subject: [PATCH] feat(grid): saas theme add filter select style (#3626) * feat(grid): saas theme add filter select style * test: fix e2e test case --- .../demos/pc/app/grid/data-source/auto-load.spec.js | 1 - .../grid/dynamically-columns/dynamically-columns.spec.js | 3 ++- .../sites/demos/pc/app/grid/filter/custom-filter.spec.js | 6 +++--- .../sites/demos/pc/app/grid/filter/simple-filter.spec.ts | 9 +++++---- packages/theme-saas/src/grid/filter.less | 8 ++++++++ packages/vue/src/grid/src/filter/src/panel.tsx | 5 ++--- 6 files changed, 20 insertions(+), 12 deletions(-) diff --git a/examples/sites/demos/pc/app/grid/data-source/auto-load.spec.js b/examples/sites/demos/pc/app/grid/data-source/auto-load.spec.js index 6f2a2f048..ae677a21a 100644 --- a/examples/sites/demos/pc/app/grid/data-source/auto-load.spec.js +++ b/examples/sites/demos/pc/app/grid/data-source/auto-load.spec.js @@ -4,7 +4,6 @@ test('自动加载数据', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('grid-data-source#data-source-auto-load') // 判断 auto-load 为 false 时不加载数据 - await page.getByRole('paragraph').nth(1).click() const demo = page.locator('#data-source-auto-load') await expect(demo.getByText('暂无数据')).toHaveText('暂无数据') }) diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js index 883a02024..11744bfc4 100644 --- a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js +++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js @@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test' test('根据日期动态生成列', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('grid-dynamically-columns#dynamically-columns-dynamically-columns') - await page.getByRole('textbox').nth(1).click() + const demo = page.locator('#dynamically-columns-dynamically-columns') + await demo.locator('.tiny-picker.tiny-date-container').click() await page.getByText('12 月').first().click() await page.getByText('2 月').nth(2).click() await expect(page.getByRole('cell', { name: '12' }).first()).toBeVisible() diff --git a/examples/sites/demos/pc/app/grid/filter/custom-filter.spec.js b/examples/sites/demos/pc/app/grid/filter/custom-filter.spec.js index 155dff1dd..f5c4d88d7 100644 --- a/examples/sites/demos/pc/app/grid/filter/custom-filter.spec.js +++ b/examples/sites/demos/pc/app/grid/filter/custom-filter.spec.js @@ -4,9 +4,9 @@ test('列筛选规则', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('grid-filter#filter-custom-filter') await page.getByRole('cell', { name: '名称' }).getByRole('img').click() - await page.getByRole('textbox').nth(1).click() - await page.getByRole('textbox').nth(1).press('CapsLock') - await page.getByRole('textbox').nth(1).fill('WWW') + await page.locator('.tiny-grid__filter-wrapper.filter__active input').click() + await page.locator('.tiny-grid__filter-wrapper.filter__active input').press('CapsLock') + await page.locator('.tiny-grid__filter-wrapper.filter__active input').fill('WWW') await page.getByRole('button', { name: 'confirm' }).click() await expect(page.getByRole('cell', { name: 'WWW 科技 YX 公司' })).toBeVisible() }) diff --git a/examples/sites/demos/pc/app/grid/filter/simple-filter.spec.ts b/examples/sites/demos/pc/app/grid/filter/simple-filter.spec.ts index b32cd2eca..8438e50dc 100644 --- a/examples/sites/demos/pc/app/grid/filter/simple-filter.spec.ts +++ b/examples/sites/demos/pc/app/grid/filter/simple-filter.spec.ts @@ -6,11 +6,12 @@ test('简化版筛选面板 - 单选/多选菜单', async ({ page }) => { await page.getByRole('cell', { name: '公司名称' }).getByRole('img').click() // 筛选面板搜索功能 - await page.getByRole('textbox').nth(1).click() - await page.getByRole('textbox').nth(1).fill('a') + const filterInput = page.locator('.tiny-grid__filter-wrapper.filter__active input') + await filterInput.click() + await filterInput.fill('a') await expect(page.getByRole('listitem').filter({ hasText: '暂无数据' })).toBeVisible() - await page.getByRole('textbox').nth(1).click() - await page.getByRole('textbox').nth(1).fill('') + await filterInput.click() + await filterInput.fill('') await page.getByTitle('GFD 科技 YX 公司').click() await page.getByTitle('WWW 科技 YX 公司').click() diff --git a/packages/theme-saas/src/grid/filter.less b/packages/theme-saas/src/grid/filter.less index 0a128c955..4798f7476 100644 --- a/packages/theme-saas/src/grid/filter.less +++ b/packages/theme-saas/src/grid/filter.less @@ -89,6 +89,14 @@ @apply text-color-text-inverse; } } + + &.active { + @apply bg-color-fill-6; + + a { + @apply text-color-brand; + } + } } } diff --git a/packages/vue/src/grid/src/filter/src/panel.tsx b/packages/vue/src/grid/src/filter/src/panel.tsx index 87dad86c3..d71144abc 100644 --- a/packages/vue/src/grid/src/filter/src/panel.tsx +++ b/packages/vue/src/grid/src/filter/src/panel.tsx @@ -357,8 +357,7 @@ export default defineComponent({ }, // 筛选扩展项 renderExtends() { - const { filterStore } = this - + const { filterStore, condition } = this if (!filterStore.extends) { return null } @@ -367,7 +366,7 @@ export default defineComponent({