feat(dropdown): [action-menu,dropdown,autocomplete,input] component d…

…ark theme adaptation (#3014) * feat(dropdown): [action-menu,dropdown] component dark theme adaptation * feat(dialog-select): [dialog-select] modify search icon alignment issue * feat(autocomplete): [autocomplete] dark theme adaptation * feat(input): [input] dark theme adaptation * test(dropdown): [action-menu,dropdown] synchronize modification of test cases
opentiny · Mar 4, 2025 · 694d6f1 · 694d6f1
1 parent 3a57416
commit 694d6f1
Show file tree

Hide file tree

Showing 29 changed files with 114 additions and 89 deletions.
diff --git a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
@@ -76,22 +76,22 @@ p {
   :deep(.tiny-action-menu__wrap) {
     .tiny-action-menu__item {
       .tiny-dropdown-item__wrap {
-        color: #191919;
+        color: var(--tv-color-icon-control);
         .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
 
       &:hover {
         .tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
 
       .tiny-dropdown {
-        color: #191919;
+        color: var(--tv-color-icon-control);
         .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
     }

diff --git a/examples/sites/demos/pc/app/action-menu/icon.vue b/examples/sites/demos/pc/app/action-menu/icon.vue
@@ -81,22 +81,22 @@ p {
   :deep(.tiny-action-menu__wrap) {
     .tiny-action-menu__item {
       .tiny-dropdown-item__wrap {
-        color: #191919;
+        color: var(--tv-color-icon-control);
         .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
 
       &:hover {
         .tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
 
       .tiny-dropdown {
-        color: #191919;
+        color: var(--tv-color-icon-control);
         .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
     }

diff --git a/examples/sites/demos/pc/app/action-menu/popper-class-composition-api.vue b/examples/sites/demos/pc/app/action-menu/popper-class-composition-api.vue
@@ -31,6 +31,6 @@ const options = ref([
 
 <style>
 .custom-action-menu {
-  background-color: antiquewhite;
+  background-color: var(--tv-color-bg-3);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts b/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts
@@ -13,5 +13,5 @@ test('弹框样式', async ({ page }) => {
   await visibleItem.last().hover()
   await page.waitForTimeout(200)
   await expect(dropDownMenu).toHaveClass(/custom-action-menu/)
-  await expect(dropDownMenu).toHaveCSS('background-color', 'rgb(250, 235, 215)')
+  await expect(dropDownMenu).toHaveCSS('background-color', 'rgb(255, 255, 255)')
 })
diff --git a/examples/sites/demos/pc/app/action-menu/popper-class.vue b/examples/sites/demos/pc/app/action-menu/popper-class.vue
@@ -39,6 +39,6 @@ export default {
 
 <style>
 .custom-action-menu {
-  background-color: antiquewhite;
+  background-color: var(--tv-color-bg-3);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue b/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue
@@ -2,7 +2,7 @@
   <tiny-action-menu :options="options">
     <template #item="{ data }">
       <tiny-icon-smile></tiny-icon-smile>
-      <span style="vertical-align: middle"> {{ data.name }}</span>
+      <span style="vertical-align: middle; margin-left: 4px"> {{ data.name }}</span>
     </template>
   </tiny-action-menu>
 </template>

diff --git a/examples/sites/demos/pc/app/action-menu/slot-item.vue b/examples/sites/demos/pc/app/action-menu/slot-item.vue
@@ -2,7 +2,7 @@
   <tiny-action-menu :options="options">
     <template #item="{ data }">
       <icon-smile></icon-smile>
-      <span style="vertical-align: middle"> {{ data.name }}</span>
+      <span style="vertical-align: middle; margin-left: 4px"> {{ data.name }}</span>
     </template>
   </tiny-action-menu>
 </template>

diff --git a/examples/sites/demos/pc/app/autocomplete/slot-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/slot-composition-api.vue
@@ -4,6 +4,8 @@
       <template #prepend>前置内容</template>
       <template #append>后置内容</template>
     </tiny-autocomplete>
+    <br />
+    <br />
     <tiny-autocomplete class="fix-slot" v-model="value" placeholder="请输入内容" :fetch-suggestions="querySearch">
       <template #prefix>
         <tiny-icon-edit />
@@ -12,6 +14,8 @@
         <tiny-icon-association />
       </template>
     </tiny-autocomplete>
+    <br />
+    <br />
     <tiny-autocomplete class="default-slot" v-model="value" :fetch-suggestions="querySearch">
       <template #default="{ slotScope }">
         <div>{{ slotScope.value }}</div>

diff --git a/examples/sites/demos/pc/app/autocomplete/slot.vue b/examples/sites/demos/pc/app/autocomplete/slot.vue
@@ -4,6 +4,8 @@
       <template #prepend>前置内容</template>
       <template #append>后置内容</template>
     </tiny-autocomplete>
+    <br />
+    <br />
     <tiny-autocomplete class="fix-slot" v-model="value" :fetch-suggestions="querySearch">
       <template #prefix>
         <tiny-icon-edit />
@@ -12,6 +14,8 @@
         <tiny-icon-association />
       </template>
     </tiny-autocomplete>
+    <br />
+    <br />
     <tiny-autocomplete class="default-slot" v-model="value" :fetch-suggestions="querySearch">
       <template #default="{ slotScope }">
         <div>{{ slotScope.value }}</div>

diff --git a/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue b/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-drop">
     <p class="demo-dropdown">场景 1：默认</p>
-    <tiny-dropdown split-button type="success">
+    <tiny-dropdown border type="success">
       更多菜单（标题很长示例）
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -15,7 +15,7 @@
     </tiny-dropdown>
     <br /><br />
     <p class="demo-dropdown">场景 2：设置 inherit-width</p>
-    <tiny-dropdown split-button type="success" :inherit-width="true">
+    <tiny-dropdown border type="success" :inherit-width="true">
       更多菜单（标题很长示例）
       <template #dropdown>
         <tiny-dropdown-menu>

diff --git a/examples/sites/demos/pc/app/dropdown/inherit-width.vue b/examples/sites/demos/pc/app/dropdown/inherit-width.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-drop">
     <p class="demo-dropdown">场景 1：默认</p>
-    <tiny-dropdown split-button type="success">
+    <tiny-dropdown border type="success">
       更多菜单（标题很长示例）
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -15,7 +15,7 @@
     </tiny-dropdown>
     <br /><br />
     <p class="demo-dropdown">场景 2：设置 inherit-width</p>
-    <tiny-dropdown split-button type="success" :inherit-width="true">
+    <tiny-dropdown type="success" border :inherit-width="true">
       更多菜单（标题很长示例）
       <template #dropdown>
         <tiny-dropdown-menu>

diff --git a/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue b/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
@@ -58,14 +58,20 @@ p {
   margin-top: 30px;
 }
 
-.tiny-dropdown.only-icon {
-  :deep(.tiny-dropdown__trigger) {
-    .tiny-svg {
-      fill: #191919;
-      &:hover {
-        fill: #191919;
+.tiny-dropdown {
+  &.only-icon {
+    :deep(.tiny-dropdown__trigger) {
+      .tiny-svg {
+        fill: var(--tv-color-icon-control);
+        &:hover {
+          fill: var(--tv-color-icon-control);
+        }
       }
     }
   }
+
+  :deep(.tiny-dropdown__prefix-inner) {
+    fill: var(--tv-color-icon-control);
+  }
 }
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/show-icon.vue b/examples/sites/demos/pc/app/dropdown/show-icon.vue
@@ -68,14 +68,20 @@ p {
   margin-top: 30px;
 }
 
-.tiny-dropdown.only-icon {
-  :deep(.tiny-dropdown__trigger) {
-    .tiny-svg {
-      fill: #191919;
-      &:hover {
-        fill: #191919;
+.tiny-dropdown {
+  &.only-icon {
+    :deep(.tiny-dropdown__trigger) {
+      .tiny-svg {
+        fill: var(--tv-color-icon-control);
+        &:hover {
+          fill: var(--tv-color-icon-control);
+        }
       }
     }
   }
+
+  :deep(.tiny-dropdown__prefix-inner) {
+    fill: var(--tv-color-icon-control);
+  }
 }
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/size-composition-api.vue b/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-drop">
     <p class="demo-dropdown">默认：</p>
-    <tiny-dropdown split-button type="primary">
+    <tiny-dropdown border type="primary">
       默认尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -14,7 +14,7 @@
       </template>
     </tiny-dropdown>
     <p class="demo-dropdown">其他尺寸：</p>
-    <tiny-dropdown size="medium" split-button type="primary">
+    <tiny-dropdown size="medium" border type="primary">
       中等尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -27,7 +27,7 @@
       </template>
     </tiny-dropdown>
 
-    <tiny-dropdown size="small" split-button type="primary">
+    <tiny-dropdown size="small" border type="primary">
       小型尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -40,7 +40,7 @@
       </template>
     </tiny-dropdown>
 
-    <tiny-dropdown size="mini" split-button type="primary">
+    <tiny-dropdown size="mini" border type="primary">
       超小尺寸
       <template #dropdown>
         <tiny-dropdown-menu>

diff --git a/examples/sites/demos/pc/app/dropdown/size.vue b/examples/sites/demos/pc/app/dropdown/size.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-drop">
     <p class="demo-dropdown">默认：</p>
-    <tiny-dropdown split-button type="primary">
+    <tiny-dropdown border type="primary">
       默认尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -14,7 +14,7 @@
       </template>
     </tiny-dropdown>
     <p class="demo-dropdown">其他尺寸：</p>
-    <tiny-dropdown size="medium" split-button type="primary">
+    <tiny-dropdown size="medium" border type="primary">
       中等尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -27,7 +27,7 @@
       </template>
     </tiny-dropdown>
 
-    <tiny-dropdown size="small" split-button type="primary">
+    <tiny-dropdown size="small" border type="primary">
       小型尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -40,7 +40,7 @@
       </template>
     </tiny-dropdown>
 
-    <tiny-dropdown size="mini" split-button type="primary">
+    <tiny-dropdown size="mini" border type="primary">
       超小尺寸
       <template #dropdown>
         <tiny-dropdown-menu>

diff --git a/examples/sites/demos/pc/app/dropdown/split-button.spec.ts b/examples/sites/demos/pc/app/dropdown/split-button.spec.ts
@@ -1,26 +1,27 @@
 import { test, expect } from '@playwright/test'
 
+// 不展示此示例。按钮类型推荐使用 border
 test('按钮类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('dropdown#split-button')
+  // await page.goto('dropdown#split-button')
 
-  const wrap = page.locator('#split-button')
-  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
-  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
-  const textBtn = dropDown.locator('button').first()
-  const dropDownBtn = dropDown.locator('button').nth(1)
+  // const wrap = page.locator('#split-button')
+  // const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  // const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  // const textBtn = dropDown.locator('button').first()
+  // const dropDownBtn = dropDown.locator('button').nth(1)
 
   // 是否变成了按钮且按钮样式是否生效
-  await expect(dropDown.locator('button')).toHaveCount(2)
-  await expect(textBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
-  await expect(textBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
-  await expect(dropDownBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
-  await expect(dropDownBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
+  // await expect(dropDown.locator('button')).toHaveCount(2)
+  // await expect(textBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
+  // await expect(textBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
+  // await expect(dropDownBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
+  // await expect(dropDownBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
 
-  // 文字悬浮不出现下拉菜单
-  await page.waitForTimeout(500)
-  await textBtn.hover()
-  await expect(dropDownMenu).not.toBeVisible()
-  await dropDownBtn.hover()
-  await expect(dropDownMenu).toBeVisible()
+  // // 文字悬浮不出现下拉菜单
+  // await page.waitForTimeout(500)
+  // await textBtn.hover()
+  // await expect(dropDownMenu).not.toBeVisible()
+  // await dropDownBtn.hover()
+  // await expect(dropDownMenu).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
@@ -83,20 +83,6 @@ export default {
       },
       codeFiles: ['show-icon.vue']
     },
-    {
-      demoId: 'split-button',
-      name: {
-        'zh-CN': '按钮类型',
-        'en-US': 'Button type'
-      },
-      desc: {
-        'zh-CN':
-          '<p>通过 <code>split-button</code> 属性，设置下拉菜单显示为按钮类型。仅按钮类型时，支持 <code>type</code> 属性设置按钮状态。</p>\n',
-        'en-US':
-          '<p>Set the drop-down menu to display as a button type through the <code>split-button</code> attribute. When only button types are used, the <code>type</code> attribute setting button status is supported.</p>\n'
-      },
-      codeFiles: ['split-button.vue']
-    },
     {
       demoId: 'trigger',
       name: {

diff --git a/packages/theme/src/action-menu/index.less b/packages/theme/src/action-menu/index.less
@@ -34,6 +34,11 @@
       justify-content: space-between;
       align-items: center;
 
+      .@{dropdown-prefix-cls} {
+        display: flex;
+        align-items: center;
+      }
+
       // 默认
       &.@{action-menu-prefix-cls}__item-visible {
         .@{dropdown-item-prefix-cls} {

diff --git a/packages/theme/src/autocomplete/index.less b/packages/theme/src/autocomplete/index.less
@@ -71,6 +71,7 @@
     &.is-loading &__list-loading {
       .tiny-svg {
         font-size: var(--tv-Autocomplete-icon-size);
+        fill: var(--tv-Autocomplete-loading-icon-color);
       }
     }
   }

diff --git a/packages/theme/src/autocomplete/vars.less b/packages/theme/src/autocomplete/vars.less
@@ -35,4 +35,7 @@
   --tv-Autocomplete-li-padding: 5.5px var(--tv-space-xl, 16px);
   // 列表项悬浮背景色
   --tv-Autocomplete-li-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
+
+  // 加载图标色
+  --tv-Autocomplete-loading-icon-color: var(--tv-color-icon-control, #191919);
 }