From ff261fb52b1b9f386033f87f2b8bf9f5a4ac1c61 Mon Sep 17 00:00:00 2001 From: Teo Date: Tue, 17 Jun 2025 15:35:29 +0800 Subject: [PATCH] refactor(styles): clean up and optimize dropdown and popover styles - Removed redundant styles from mention-models-dropdown in ant.scss for better maintainability. - Simplified Selector component by removing ConfigProvider wrapper around Dropdown. - Updated AntdProvider to set consistent border radius for Dropdown and Popover components. - Adjusted padding in SettingsTab for improved layout. --- src/renderer/src/assets/styles/ant.scss | 142 ------------------ src/renderer/src/components/Selector.tsx | 35 ++--- src/renderer/src/context/AntdProvider.tsx | 8 + .../src/pages/home/Tabs/SettingsTab.tsx | 5 - 4 files changed, 21 insertions(+), 169 deletions(-) diff --git a/src/renderer/src/assets/styles/ant.scss b/src/renderer/src/assets/styles/ant.scss index fe31adc5ad..477ac5edfa 100644 --- a/src/renderer/src/assets/styles/ant.scss +++ b/src/renderer/src/assets/styles/ant.scss @@ -57,159 +57,18 @@ } } -.mention-models-dropdown { - &.ant-dropdown { - background: rgba(var(--color-base-rgb), 0.65) !important; - backdrop-filter: blur(35px) saturate(150%) !important; - animation-duration: 0.15s !important; - } - - /* 移动其他样式到 mention-models-dropdown 类下 */ - .ant-slide-up-enter .ant-dropdown-menu, - .ant-slide-up-appear .ant-dropdown-menu, - .ant-slide-up-leave .ant-dropdown-menu, - .ant-slide-up-enter-active .ant-dropdown-menu, - .ant-slide-up-appear-active .ant-dropdown-menu, - .ant-slide-up-leave-active .ant-dropdown-menu { - background: rgba(var(--color-base-rgb), 0.65) !important; - backdrop-filter: blur(35px) saturate(150%) !important; - } - - .ant-dropdown-menu { - /* 保持原有的下拉菜单样式，但限定在 mention-models-dropdown 类下 */ - max-height: 400px; - overflow-y: auto; - overflow-x: hidden; - padding: 4px 12px; - position: relative; - background: rgba(var(--color-base-rgb), 0.65) !important; - backdrop-filter: blur(35px) saturate(150%) !important; - border: 0.5px solid rgba(var(--color-border-rgb), 0.3); - border-radius: 10px; - box-shadow: - 0 0 0 0.5px rgba(0, 0, 0, 0.15), - 0 4px 16px rgba(0, 0, 0, 0.15), - 0 2px 8px rgba(0, 0, 0, 0.12), - inset 0 0 0 0.5px rgba(255, 255, 255, var(--inner-glow-opacity, 0.1)); - transform-origin: top; - will-change: transform, opacity; - transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); - margin-bottom: 0; - - &.no-scrollbar { - padding-right: 12px; - } - - &.has-scrollbar { - padding-right: 2px; - } - - // Scrollbar styles - &::-webkit-scrollbar { - width: 14px; - height: 6px; - } - - &::-webkit-scrollbar-thumb { - border: 4px solid transparent; - background-clip: padding-box; - border-radius: 7px; - background-color: var(--color-scrollbar-thumb); - min-height: 50px; - transition: all 0.2s; - } - - &:hover::-webkit-scrollbar-thumb { - background-color: var(--color-scrollbar-thumb); - } - - &::-webkit-scrollbar-thumb:hover { - background-color: var(--color-scrollbar-thumb-hover); - } - - &::-webkit-scrollbar-thumb:active { - background-color: var(--color-scrollbar-thumb-hover); - } - - &::-webkit-scrollbar-track { - background: transparent; - border-radius: 7px; - } - } - - .ant-dropdown-menu-item-group { - margin-bottom: 4px; - - &:not(:first-child) { - margin-top: 4px; - } - - .ant-dropdown-menu-item-group-title { - padding: 5px 12px; - color: var(--color-text-3); - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.03em; - opacity: 0.7; - } - } - - // Handle no-results case margin - .no-results { - padding: 8px 12px; - color: var(--color-text-3); - cursor: default; - font-size: 13px; - opacity: 0.8; - margin-bottom: 40px; - - &:hover { - background: none; - } - } - - .ant-dropdown-menu-item { - padding: 5px 12px; - margin: 0 -12px; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - gap: 8px; - border-radius: 6px; - font-size: 13px; - - &:hover { - background: rgba(var(--color-hover-rgb), 0.5); - } - - &.ant-dropdown-menu-item-selected { - background-color: rgba(var(--color-primary-rgb), 0.12); - color: var(--color-primary); - } - - .ant-dropdown-menu-item-icon { - margin-right: 0; - opacity: 0.9; - } - } -} - .ant-dropdown-menu .ant-dropdown-menu-sub { max-height: 50vh; width: max-content; overflow-y: auto; overflow-x: hidden; border: 0.5px solid var(--color-border); - border-radius: 10px; } .ant-dropdown { .ant-dropdown-menu { max-height: 50vh; overflow-y: auto; border: 0.5px solid var(--color-border); - border-radius: 10px; } .ant-dropdown-arrow + .ant-dropdown-menu { border: none; @@ -222,7 +81,6 @@ .ant-popover { .ant-popover-inner { border: 0.5px solid var(--color-border); - border-radius: 10px; .ant-popover-inner-content { max-height: 70vh; overflow-y: auto; diff --git a/src/renderer/src/components/Selector.tsx b/src/renderer/src/components/Selector.tsx index 8dbaa8f998..744b122a4e 100644 --- a/src/renderer/src/components/Selector.tsx +++ b/src/renderer/src/components/Selector.tsx @@ -1,4 +1,4 @@ -import { ConfigProvider, Dropdown } from 'antd' +import { Dropdown } from 'antd' import { Check, ChevronsUpDown } from 'lucide-react' import { ReactNode, useMemo, useState } from 'react' import styled, { css } from 'styled-components' @@ -73,27 +73,18 @@ const Selector = ({ } return ( - - - - - + + + ) } diff --git a/src/renderer/src/context/AntdProvider.tsx b/src/renderer/src/context/AntdProvider.tsx index c277b7778c..2e042b9ab0 100644 --- a/src/renderer/src/context/AntdProvider.tsx +++ b/src/renderer/src/context/AntdProvider.tsx @@ -69,6 +69,14 @@ const AntdProvider: FC = ({ children }) => { }, Switch: { colorTextQuaternary: 'rgba(153,153,153,0.15)' + }, + Dropdown: { + controlPaddingHorizontal: 8, + borderRadiusLG: 10, + borderRadiusSM: 8 + }, + Popover: { + borderRadiusLG: 10 } }, token: { diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx index 22863e90ec..43ab6fbcb2 100644 --- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx +++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx @@ -200,12 +200,7 @@ const SettingRowTitleSmall = styled(SettingRowTitle)` ` const SettingGroup = styled.div<{ theme?: ThemeMode }>` - padding: 0 5px; width: 100%; - margin-top: 0; - border-radius: 8px; - margin-bottom: 10px; - margin-top: 10px; ` export default SettingsTab