feat(dropdown): [action-menu,dropdown,autocomplete,input] component dark theme adaptation (#3014)

MomoPoppy · web-flow · commit 694d6f1199e0 · 2025-03-04T19:01:09.000+08:00
* 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
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);
 }
diff --git a/packages/theme/src/base/dark-theme.less b/packages/theme/src/base/dark-theme.less
diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less
diff --git a/packages/theme/src/dialog-select/index.less b/packages/theme/src/dialog-select/index.less
diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less
diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less
diff --git a/packages/theme/src/svgs/ellipsis.svg b/packages/theme/src/svgs/ellipsis.svg
diff --git a/packages/theme/src/tall-storage/index.less b/packages/theme/src/tall-storage/index.less
diff --git a/packages/theme/src/tall-storage/vars.less b/packages/theme/src/tall-storage/vars.less
diff --git a/packages/vue/src/dropdown/src/pc.vue b/packages/vue/src/dropdown/src/pc.vue

Original file line number	Diff line number	Diff line change
`@@ -76,22 +76,22 @@ p {`
`76`	`76`	`:deep(.tiny-action-menu__wrap) {`
`77`	`77`	`.tiny-action-menu__item {`
`78`	`78`	`.tiny-dropdown-item__wrap {`
`79`		`- color: #191919;`
	`79`	`+ color: var(--tv-color-icon-control);`
`80`	`80`	`.tiny-svg {`
`81`		`- fill: #191919;`
	`81`	`+ fill: var(--tv-color-icon-control);`
`82`	`82`	`}`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`&:hover {`
`86`	`86`	`.tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {`
`87`		`- fill: #191919;`
	`87`	`+ fill: var(--tv-color-icon-control);`
`88`	`88`	`}`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`.tiny-dropdown {`
`92`		`- color: #191919;`
	`92`	`+ color: var(--tv-color-icon-control);`
`93`	`93`	`.tiny-svg {`
`94`		`- fill: #191919;`
	`94`	`+ fill: var(--tv-color-icon-control);`
`95`	`95`	`}`
`96`	`96`	`}`
`97`	`97`	`}`
Original file line number	Diff line number	Diff line change
`@@ -81,22 +81,22 @@ p {`
`81`	`81`	`:deep(.tiny-action-menu__wrap) {`
`82`	`82`	`.tiny-action-menu__item {`
`83`	`83`	`.tiny-dropdown-item__wrap {`
`84`		`- color: #191919;`
	`84`	`+ color: var(--tv-color-icon-control);`
`85`	`85`	`.tiny-svg {`
`86`		`- fill: #191919;`
	`86`	`+ fill: var(--tv-color-icon-control);`
`87`	`87`	`}`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`&:hover {`
`91`	`91`	`.tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {`
`92`		`- fill: #191919;`
	`92`	`+ fill: var(--tv-color-icon-control);`
`93`	`93`	`}`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`.tiny-dropdown {`
`97`		`- color: #191919;`
	`97`	`+ color: var(--tv-color-icon-control);`
`98`	`98`	`.tiny-svg {`
`99`		`- fill: #191919;`
	`99`	`+ fill: var(--tv-color-icon-control);`
`100`	`100`	`}`
`101`	`101`	`}`
`102`	`102`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,6 @@ const options = ref([`
`31`	`31`
`32`	`32`	`<style>`
`33`	`33`	`.custom-action-menu {`
`34`		`- background-color: antiquewhite;`
	`34`	`+ background-color: var(--tv-color-bg-3);`
`35`	`35`	`}`
`36`	`36`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,6 @@ export default {`
`39`	`39`
`40`	`40`	`<style>`
`41`	`41`	`.custom-action-menu {`
`42`		`- background-color: antiquewhite;`
	`42`	`+ background-color: var(--tv-color-bg-3);`
`43`	`43`	`}`
`44`	`44`	`</style>`