feat(cascader): [cascader,tooltip] cascader selection drop-down panel…

… dark theme adaptation (#2970) * feat(cascader): [cascader,tooltip] cascader selection drop-down panel dark theme adaptation * feat(cascader): [cascader,tooltip] cascader selection drop-down panel dark theme adaptation * feat(cascader): [cascader,tooltip] cascader selection drop-down panel dark theme adaptation * feat(cascader): [cascader,tooltip] cascader selection drop-down panel dark theme adaptation * feat(cascader): [cascader,tooltip] cascader selection drop-down panel dark theme adaptation * feat(cascader): [cascader,tooltip] cascader selection drop-down panel dark theme adaptation
opentiny · Mar 3, 2025 · 378e573 · 378e573
1 parent 65a4791
commit 378e573
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 17 deletions.
diff --git a/examples/sites/demos/pc/app/cascader/filterable-multiple.spec.ts b/examples/sites/demos/pc/app/cascader/filterable-multiple.spec.ts
@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('多选可搜索', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader#filterable-multiple')
-  await page.getByRole('textbox', { name: '试试搜索：安装' }).nth(1).click()
-  await page.getByRole('textbox', { name: '试试搜索：安装' }).nth(1).fill('安装')
+  await page.getByRole('textbox', { name: '试试搜索：安装' }).click()
+  await page.getByRole('textbox', { name: '试试搜索：安装' }).fill('安装')
   await page.waitForTimeout(1000)
   const text = await page.locator('.tiny-cascader__suggestion-item')
   await expect(text).toHaveText([

diff --git a/examples/sites/demos/pc/app/tooltip/control-composition-api.vue b/examples/sites/demos/pc/app/tooltip/control-composition-api.vue
@@ -80,6 +80,6 @@ const disabled = ref(false)
   cursor: pointer;
 }
 .ellipsis:hover {
-  background-color: #f1f1f1;
+  background-color: #c0c0c0;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tooltip/control.vue b/examples/sites/demos/pc/app/tooltip/control.vue
@@ -89,6 +89,6 @@ export default {
   cursor: pointer;
 }
 .ellipsis:hover {
-  background-color: #f1f1f1;
+  background-color: #c0c0c0;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tooltip/theme.spec.js b/examples/sites/demos/pc/app/tooltip/theme.spec.js
@@ -5,10 +5,11 @@ test('测试 tooltip 主题', async ({ page }) => {
   await page.goto('tooltip#theme')
   await page.waitForTimeout(20)
 
-  await page.getByRole('button', { name: 'Dark' }).hover()
+  const tooltipBtn = page.locator('.box')
+  await tooltipBtn.getByRole('button', { name: 'Dark' }).hover()
   await expect(page.getByRole('tooltip', { name: 'dark 提示文字' })).toHaveClass(/is-dark/)
 
-  await page.getByRole('button', { name: 'Light' }).hover()
+  await tooltipBtn.getByRole('button', { name: 'Light' }).hover()
   await expect(page.getByRole('tooltip', { name: 'light 提示文字' })).toHaveClass(/is-light/)
 
   await page.getByRole('button', { name: 'normal' }).hover()

diff --git a/packages/theme/src/cascader-menu/vars.less b/packages/theme/src/cascader-menu/vars.less
@@ -14,7 +14,7 @@
   // 下拉菜单文本色
   --tv-CascaderMenu-text-color: var(--tv-color-text, #191919);
   // 下拉菜单边框色
-  --tv-CascaderMenu-border-color: #f5f5f5; // 无对应变量
+  --tv-CascaderMenu-border-color: var(--tv-color-border-divider);
   // 下拉菜单为空时的文本色
   --tv-CascaderMenu-empty-text-color: var(--tv-color-text-weaken, #808080);
   // 下拉菜单列表垂直方向的内边距

diff --git a/packages/theme/src/cascader/index.less b/packages/theme/src/cascader/index.less
@@ -117,7 +117,7 @@
       }
       .@{cascader-prefix-cls}-menu {
         border: 1px solid #e4e7ed;
-        background: #fff;
+        background:var(--tv-Cascader-dropdown-bg-color);
         &:not(:first-child) {
           margin-left: -1px;
         }
@@ -240,7 +240,8 @@
 
   &__suggestion-panel {
     border-radius: calc(var(--tv-Cascader-border-radius) + 4px);
-    min-height: 240px;
+    // scroll最大高度支持200，滚动条8px，避免横向滚动条出现在中间
+    min-height: 192px;
     background: var(--tv-Cascader-dropdown-bg-color);
     box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
   }
@@ -297,6 +298,7 @@
     margin-top: var(--tv-Cascader-empty-margin-top);
     margin-bottom: var(--tv-Cascader-empty-margin-bottom);
     color: var(--tv-Cascader-empty-text-color);
+    line-height: 200px;
   }
 
   &__search-input {
@@ -310,6 +312,7 @@
     border: none;
     outline: 0;
     box-sizing: border-box;
+    background: var(--tv-Input-bg-color);
   }
 
   &__search-input {

diff --git a/packages/theme/src/cascader/vars.less b/packages/theme/src/cascader/vars.less
@@ -52,7 +52,7 @@
   // 下拉列表子项的高度（没有生效）
   --tv-Cascader-item-height: 32px;
   // 下拉列表子项悬浮时的背景色（没有生效）
-  --tv-Cascader-item-hover-bg-color: #f5f7fa; // 无对应
+  --tv-Cascader-item-hover-bg-color: var(--tv-color-bg-hover);
   // 搜索后下拉列表无匹配数据的文本色
   --tv-Cascader-empty-text-color: var(--tv-color-text-weaken, #808080);
   // 搜索框的文本色（没有生效）

diff --git a/packages/vue/src/cascader/__tests__/cascader.test.tsx b/packages/vue/src/cascader/__tests__/cascader.test.tsx
@@ -101,19 +101,17 @@ describe('PC Mode', () => {
 
   test('slot', async () => {
     const value = 'pppppppppp'
-    const text = '请输入内容'
     const wrapper = mount(() => (
       <Cascader
         v-model={value}
         options={options}
         filterable={true}
         v-slots={{
-          empty: () => <div>没有选项</div>
-        }}
-      ></Cascader>
+          empty: () => <div class="custom_empty">没有选项</div>
+        }}></Cascader>
     ))
 
-    expect(wrapper.find('.tiny-cascader__empty-text').exists()).toBe(true)
+    expect(wrapper.find('.custom_empty').exists()).toBe(true)
   })
 
   // 通过 options 属性指定选项数组即可渲染出一个级联选择器

diff --git a/packages/vue/src/cascader/src/pc.vue b/packages/vue/src/cascader/src/pc.vue
@@ -43,9 +43,9 @@
       <tiny-input
         v-if="shape !== 'filter'"
         ref="input"
-        :model-value="state.multiple ? state.presentText : state.inputValue"
+        :model-value="state.multiple && filterable ? '' : state.inputValues"
         :size="state.realSize"
-        :placeholder="state.placeholder"
+        :placeholder="state.multiple && filterable ? '' : state.placeholder"
         :readonly="state.readonly"
         :disabled="state.isDisabled"
         :display-only="displayOnly"