feat(styles): enhance dropdown and slider components for improved UI

src/renderer/src/assets/styles/ant.scss

@@ -65,6 +65,9 @@
   border: 0.5px solid var(--color-border);
 }
 .ant-dropdown {
+  background-color: var(--ant-color-bg-elevated);
+  overflow: hidden;
+  border-radius: var(--ant-border-radius-lg);
   .ant-dropdown-menu {
     max-height: 50vh;
     overflow-y: auto;
@@ -77,6 +80,11 @@
 .ant-select-dropdown {
   border: 0.5px solid var(--color-border);
 }
+.ant-dropdown-menu-submenu {
+  background-color: var(--ant-color-bg-elevated);
+  overflow: hidden;
+  border-radius: var(--ant-border-radius-lg);
+}
 
 .ant-popover {
   .ant-popover-inner {
@@ -137,3 +145,9 @@
     border-top: none !important;
   }
 }
+
+.ant-slider {
+  .ant-slider-handle::after {
+    box-shadow: 0 1px 4px 0px rgb(128 128 128 / 50%) !important;
+  }
+}

src/renderer/src/context/AntdProvider.tsx

@@ -68,7 +68,13 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
             trackBg: 'rgba(153,153,153,0.15)'
           },
           Switch: {
-            colorTextQuaternary: 'rgba(153,153,153,0.15)'
+            colorTextQuaternary: 'rgba(153,153,153,0.20)',
+            trackMinWidth: 40,
+            handleSize: 19,
+            trackMinWidthSM: 28,
+            trackHeightSM: 17,
+            handleSizeSM: 14,
+            trackPadding: 1.5
           },
           Dropdown: {
             controlPaddingHorizontal: 8,
@@ -77,12 +83,21 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
           },
           Popover: {
             borderRadiusLG: 10
+          },
+          Slider: {
+            handleLineWidth: 1.5,
+            handleSize: 15,
+            handleSizeHover: 15,
+            dotSize: 7,
+            railSize: 5,
+            colorBgElevated: '#ffffff'
           }
         },
         token: {
           colorPrimary: colorPrimary,
           fontFamily: 'var(--font-family)',
-          colorBgMask: _theme === 'dark' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.8)'
+          colorBgMask: _theme === 'dark' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.8)',
+          motionDurationMid: '100ms'
         }
       }}>
       {children}

src/renderer/src/pages/home/Messages/MessageMenubar.tsx

@@ -27,9 +27,22 @@ import {
 // import { withMessageThought } from '@renderer/utils/formats'
 import { removeTrailingDoubleSpaces } from '@renderer/utils/markdown'
 import { findMainTextBlocks, findTranslationBlocks, getMainTextContent } from '@renderer/utils/messageUtils/find'
-import { Dropdown, Popconfirm, Tooltip } from 'antd'
+import { Dropdown, MenuProps, Popconfirm, Tooltip } from 'antd'
 import dayjs from 'dayjs'
-import { AtSign, Copy, Languages, Menu, RefreshCw, Save, Settings2, Share, Split, ThumbsUp, Trash } from 'lucide-react'
+import {
+  AtSign,
+  ChevronRight,
+  Copy,
+  Languages,
+  Menu,
+  RefreshCw,
+  Save,
+  Settings2,
+  Share,
+  Split,
+  ThumbsUp,
+  Trash
+} from 'lucide-react'
 import { FilePenLine } from 'lucide-react'
 import { FC, memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -162,7 +175,7 @@ const MessageMenubar: FC<Props> = (props) => {
     return findMainTextBlocks(message).length > 0 // 使用 MCP Server 后会有大于一段 MatinTextBlock
   }, [message])
 
-  const dropdownItems = useMemo(
+  const dropdownItems = useMemo<MenuProps['items']>(
     () => [
       {
         label: t('chat.save'),
@@ -207,6 +220,7 @@ const MessageMenubar: FC<Props> = (props) => {
         label: t('chat.topics.export.title'),
         key: 'export',
         icon: <Share size={16} color="var(--color-icon)" style={{ marginTop: 3 }} />,
+        expandIcon: <ChevronRight size={16} style={{ position: 'absolute', insetInlineEnd: 5, marginTop: 3 }} />,
         children: [
           {
             label: t('chat.topics.copy.plain_text'),

src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx

@@ -24,7 +24,7 @@ import { classNames, getLeadingEmoji, uuid } from '@renderer/utils'
 import { hasTopicPendingRequests } from '@renderer/utils/queue'
 import { Button, Dropdown, MenuProps } from 'antd'
 import { omit } from 'lodash'
-import { AlignJustify, EllipsisVertical, Plus, Settings2, Tag, Tags } from 'lucide-react'
+import { AlignJustify, ChevronRight, EllipsisVertical, Plus, Settings2, Tag, Tags } from 'lucide-react'
 import { FC, memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -345,6 +345,7 @@ function getMenuItems({
       label: t('assistants.icon.type'),
       key: 'icon-type',
       icon: <SmileOutlined />,
+      expandIcon: <ChevronRight size={16} style={{ position: 'absolute', insetInlineEnd: 5, marginTop: 3 }} />,
       children: [
         {
           label: t('settings.assistant.icon.type.model'),
@@ -370,6 +371,7 @@ function getMenuItems({
       label: t('assistants.tags.manage'),
       key: 'all-tags',
       icon: <PlusOutlined />,
+      expandIcon: <ChevronRight size={16} style={{ position: 'absolute', insetInlineEnd: 5, marginTop: 3 }} />,
       children: createTagMenuItems(allTags, assistant, assistants, updateAssistants, t)
     },
     {