feat(grid): saas theme add filter select style (#3626)

* feat(grid): saas theme add filter select style

* test: fix e2e test case

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('暂无数据')
 })

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()

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.locator('.tiny-grid__filter-wrapper.filter__active input').click()
-  await page.getByRole('textbox').nth(1).press('CapsLock')
+  await page.locator('.tiny-grid__filter-wrapper.filter__active input').press('CapsLock')
-  await page.getByRole('textbox').nth(1).fill('WWW')
+  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()
 })

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()
+  const filterInput = page.locator('.tiny-grid__filter-wrapper.filter__active input')
-  await page.getByRole('textbox').nth(1).fill('a')
+  await filterInput.click()
+  await filterInput.fill('a')
   await expect(page.getByRole('listitem').filter({ hasText: '暂无数据' })).toBeVisible()
-  await page.getByRole('textbox').nth(1).click()
+  await filterInput.click()
-  await page.getByRole('textbox').nth(1).fill('')
+  await filterInput.fill('')
   await page.getByTitle('GFD 科技 YX 公司').click()
   await page.getByTitle('WWW 科技 YX 公司').click()
 

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;
+            }
+          }
         }
       }
 

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({
         <ul class="tiny-grid__filter-panel filter-panel__clear">
           {filterStore.extends.map((item) => (
             <li
-              class="tiny-grid__filter-option"
+              class={['tiny-grid__filter-option', { active: condition.value === (item.value || item.label) }]}
               onClick={() => {
                 this.filterExtends(item)
               }}>