From 2a18ae739de54e418dbc51098be623f95fc09867 Mon Sep 17 00:00:00 2001 From: SonyLeo <746591437@qq.com> Date: Sun, 10 May 2026 23:08:40 +0800 Subject: [PATCH 1/2] feat: add dark mode theme tokens for dropdown, suggestion popover, and suggestion pills --- .../components/src/dropdown-menu/index.vue | 20 +++- .../src/flow-layout-buttons/index.vue | 14 +-- packages/components/src/styles/variables.css | 102 ++++++++++++++++++ .../components/PillButton.vue | 10 +- .../components/src/suggestion-pills/index.vue | 4 - .../suggestion-popover/components/Header.vue | 3 +- .../suggestion-popover/components/Loading.vue | 1 - .../suggestion-popover/components/Tooltip.vue | 3 - .../src/suggestion-popover/index.vue | 14 +-- 9 files changed, 125 insertions(+), 46 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.vue b/packages/components/src/dropdown-menu/index.vue index a23b1ad4a..d785e86f3 100644 --- a/packages/components/src/dropdown-menu/index.vue +++ b/packages/components/src/dropdown-menu/index.vue @@ -100,11 +100,7 @@ defineExpose({ @@ -199,6 +188,7 @@ onClickOutside( align-items: center; gap: 8px; background-color: var(--tr-flow-layout-item-bg-color); + color: var(--tr-flow-layout-item-color); border-radius: 8px; border: 1px solid var(--tr-flow-layout-item-border-color); transition: background-color 0.3s ease; @@ -222,6 +212,7 @@ onClickOutside( width: var(--tr-flow-layout-item-icon-size); height: var(--tr-flow-layout-item-icon-size); flex-shrink: 0; + color: inherit; } .tr-flow-layout__item-label { @@ -255,6 +246,7 @@ onClickOutside( gap: 8px; padding: 5px 11px; width: 100%; + color: var(--tr-flow-layout-dropdown-item-color); border-radius: 8px; transition: background-color 0.3s ease; border: 1px solid transparent; diff --git a/packages/components/src/styles/variables.css b/packages/components/src/styles/variables.css index 5e1b83b15..b48c9961e 100644 --- a/packages/components/src/styles/variables.css +++ b/packages/components/src/styles/variables.css @@ -122,6 +122,57 @@ --tr-mcp-server-picker-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08); --tr-mcp-server-picker-border-color-default: #dbdbdb; + /* ===== Dropdown Menu ===== */ + --tr-dropdown-menu-bg-color: #ffffff; + --tr-dropdown-menu-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); + --tr-dropdown-menu-item-color: var(--tr-text-primary); + --tr-dropdown-menu-item-hover-bg-color: #f5f5f5; + --tr-dropdown-menu-scrollbar-thumb-color: rgba(0, 0, 0, 0.2); + + /* ===== Flow Layout Buttons ===== */ + --tr-flow-layout-item-bg-color: rgba(0, 0, 0, 0.04); + --tr-flow-layout-item-border-color: transparent; + --tr-flow-layout-item-color: var(--tr-text-primary); + --tr-flow-layout-item-hover-bg-color: rgba(0, 0, 0, 0.08); + --tr-flow-layout-item-selected-bg-color: #ffffff; + --tr-flow-layout-item-selected-border-color: #191919; + --tr-flow-layout-dropdown-bg-color: #ffffff; + --tr-flow-layout-dropdown-box-shadow: 0 0 16px rgba(0, 0, 0, 0.08); + --tr-flow-layout-dropdown-item-color: var(--tr-text-primary); + --tr-flow-layout-dropdown-selected-bg-color: #ffffff; + --tr-flow-layout-dropdown-selected-border-color: #191919; + --tr-flow-layout-dropdown-item-hover-bg-color: rgba(0, 0, 0, 0.04); + + /* ===== Suggestion Popover ===== */ + --tr-suggestion-popover-bg-color: #ffffff; + --tr-suggestion-popover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); + --tr-suggestion-popover-color: var(--tr-text-primary); + --tr-suggestion-popover-backdrop-color: rgba(0, 0, 0, 0.15); + --tr-suggestion-popover-scrollbar-color: #dbdbdb; + --tr-suggestion-popover-item-hover-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + --tr-suggestion-popover-item-border-color: #f0f0f0; + --tr-suggestion-popover-close-bg-color: var(--tr-icon-button-bg); + --tr-suggestion-popover-close-hover-bg-color: var(--tr-icon-button-hover-bg); + --tr-suggestion-popover-close-color: var(--tr-text-secondary); + --tr-suggestion-popover-loading-color: var(--tr-text-tertiary); + --tr-suggestion-popover-no-data-color: var(--tr-text-primary); + --tr-suggestion-popover-header-icon-color: var(--tr-color-primary); + + /* ===== Tooltip ===== */ + --tr-tooltip-bg-color: #ffffff; + --tr-tooltip-color: var(--tr-text-primary); + --tr-tooltip-shadow: 0 2px 12px rgba(0, 0, 0, 0.16); + + /* ===== Suggestion Pills ===== */ + --tr-suggestion-pill-button-bg-color: #ffffff; + --tr-suggestion-pill-button-hover-bg-color: #ebebeb; + --tr-suggestion-pill-button-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); + --tr-suggestion-pill-button-color: var(--tr-text-primary); + --tr-suggestion-pills-expand-color: var(--tr-text-secondary); + --tr-suggestion-pills-expand-bg-color: #ffffff; + --tr-suggestion-pills-expand-hover-bg-color: #ebebeb; + --tr-suggestion-pills-expand-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); + /* ===== 阴影系统 ===== */ --tr-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04); @@ -251,6 +302,57 @@ --tr-mcp-server-picker-shadow: 0px 4px 16px 0px rgba(255, 255, 255, 0.08); --tr-mcp-server-picker-border-color-default: rgba(255, 255, 255, 0.15); + /* ===== Dropdown Menu ===== */ + --tr-dropdown-menu-bg-color: #333333; + --tr-dropdown-menu-box-shadow: 0 0 20px rgba(0, 0, 0, 0.48); + --tr-dropdown-menu-item-color: var(--tr-text-primary); + --tr-dropdown-menu-item-hover-bg-color: #262626; + --tr-dropdown-menu-scrollbar-thumb-color: rgba(255, 255, 255, 0.2); + + /* ===== Flow Layout Buttons ===== */ + --tr-flow-layout-item-bg-color: rgba(255, 255, 255, 0.08); + --tr-flow-layout-item-border-color: transparent; + --tr-flow-layout-item-color: var(--tr-text-primary); + --tr-flow-layout-item-hover-bg-color: rgba(255, 255, 255, 0.12); + --tr-flow-layout-item-selected-bg-color: #262626; + --tr-flow-layout-item-selected-border-color: rgba(255, 255, 255, 0.15); + --tr-flow-layout-dropdown-bg-color: #333333; + --tr-flow-layout-dropdown-box-shadow: 0 0 16px rgba(0, 0, 0, 0.48); + --tr-flow-layout-dropdown-item-color: var(--tr-text-primary); + --tr-flow-layout-dropdown-selected-bg-color: #262626; + --tr-flow-layout-dropdown-selected-border-color: rgba(255, 255, 255, 0.15); + --tr-flow-layout-dropdown-item-hover-bg-color: #262626; + + /* ===== Suggestion Popover ===== */ + --tr-suggestion-popover-bg-color: #333333; + --tr-suggestion-popover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.48); + --tr-suggestion-popover-color: var(--tr-text-primary); + --tr-suggestion-popover-backdrop-color: rgba(0, 0, 0, 0.4); + --tr-suggestion-popover-scrollbar-color: rgba(255, 255, 255, 0.2); + --tr-suggestion-popover-item-hover-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.48); + --tr-suggestion-popover-item-border-color: rgba(255, 255, 255, 0.08); + --tr-suggestion-popover-close-bg-color: var(--tr-icon-button-bg); + --tr-suggestion-popover-close-hover-bg-color: var(--tr-icon-button-hover-bg); + --tr-suggestion-popover-close-color: var(--tr-text-secondary); + --tr-suggestion-popover-loading-color: var(--tr-text-tertiary); + --tr-suggestion-popover-no-data-color: var(--tr-text-primary); + --tr-suggestion-popover-header-icon-color: var(--tr-color-primary); + + /* ===== Tooltip ===== */ + --tr-tooltip-bg-color: #262626; + --tr-tooltip-color: var(--tr-text-primary); + --tr-tooltip-shadow: 0 2px 12px rgba(0, 0, 0, 0.48); + + /* ===== Suggestion Pills ===== */ + --tr-suggestion-pill-button-bg-color: rgba(255, 255, 255, 0.08); + --tr-suggestion-pill-button-hover-bg-color: rgba(255, 255, 255, 0.12); + --tr-suggestion-pill-button-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.48); + --tr-suggestion-pill-button-color: var(--tr-text-primary); + --tr-suggestion-pills-expand-color: var(--tr-text-secondary); + --tr-suggestion-pills-expand-bg-color: rgba(255, 255, 255, 0.08); + --tr-suggestion-pills-expand-hover-bg-color: rgba(255, 255, 255, 0.12); + --tr-suggestion-pills-expand-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.48); + /* ===== Sender 输入框 ===== */ --tr-sender-bg-color-disabled: rgba(255, 255, 255, 0.06); --tr-sender-text-color-disabled: #808080; diff --git a/packages/components/src/suggestion-pills/components/PillButton.vue b/packages/components/src/suggestion-pills/components/PillButton.vue index 721a1eacf..ebc1e60e9 100644 --- a/packages/components/src/suggestion-pills/components/PillButton.vue +++ b/packages/components/src/suggestion-pills/components/PillButton.vue @@ -24,15 +24,6 @@ const onlyIcon = computed(() => hasIcon.value && !hasText.value) - - diff --git a/packages/components/src/suggestion-pills/index.vue b/packages/components/src/suggestion-pills/index.vue index 747268224..117b2da50 100644 --- a/packages/components/src/suggestion-pills/index.vue +++ b/packages/components/src/suggestion-pills/index.vue @@ -223,11 +223,7 @@ defineExpose({ diff --git a/packages/components/src/suggestion-popover/components/Header.vue b/packages/components/src/suggestion-popover/components/Header.vue index e0963bc6b..7c0f67cbc 100644 --- a/packages/components/src/suggestion-popover/components/Header.vue +++ b/packages/components/src/suggestion-popover/components/Header.vue @@ -9,7 +9,7 @@ const props = defineProps>()
- +

{{ props.title }}

@@ -37,6 +37,7 @@ const props = defineProps>() display: inline-flex; align-items: center; justify-content: center; + color: var(--tr-suggestion-popover-header-icon-color); } .tr-question__header-title { diff --git a/packages/components/src/suggestion-popover/components/Loading.vue b/packages/components/src/suggestion-popover/components/Loading.vue index a02220834..09e979d55 100644 --- a/packages/components/src/suggestion-popover/components/Loading.vue +++ b/packages/components/src/suggestion-popover/components/Loading.vue @@ -9,7 +9,6 @@