header微调

app/components/DeekSeekHome.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useNavigate } from "react-router-dom";
-import { Dropdown, Spin,Tooltip } from 'antd';
+import { Dropdown, Spin, Tooltip } from 'antd';
 import { Chat } from './DeepSeekChat';
 import whiteLogo from "../icons/whiteLogo.png";
 import jkxz from "../icons/jkxz.png";
@@ -104,11 +104,43 @@ const DeekSeek: React.FC = () => {
         }
     }, []);
 
+    const formatMenuTitle = React.useCallback(
+        (title: string) => {
+            if (isMobileScreen) {
+                return title;
+            }
+            return title.length > 7 ? `${title.slice(0, 7)}...` : title;
+        },
+        [isMobileScreen]
+    );
+
+    const dropdownAlign = React.useMemo(() => {
+        if (isMobileScreen) {
+            return undefined;
+        }
+        return {
+            points: ['tl', 'bl'],
+            offset: [0, 8],
+            overflow: {
+                adjustY: false,
+                adjustX: true,
+            },
+        };
+    }, [isMobileScreen]);
+
     return (
         <Spin spinning={listLoading}>
             <div className='deekSeek'>
                 <div className='deekSeek-header' style={{ justifyContent: isMobileScreen ? 'flex-start' : 'center' }}>
-                    <div style={{ display: 'flex', alignItems: 'center', margin: '0 20px' }}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            margin: '0 20px',
+                            fontSize: isMobileScreen ? undefined : 14,
+                            fontWeight: isMobileScreen ? undefined : 600,
+                        }}
+                    >
                         <img src={whiteLogo.src} style={{ width: 20, marginRight: 10 }} />
                         <div style={{ whiteSpace: 'nowrap' }}>
                             上海建科
@@ -134,25 +166,29 @@ const DeekSeek: React.FC = () => {
                                                 }}
                                             >
                                                 <Tooltip placement="left" title={child.title}>
-                                                    {child.title} 
+                                                    {formatMenuTitle(child.title)}
                                                 </Tooltip>
                                             </div>,
                                             children: child.children ? child.children.map((record, ind) => {
                                                 return {
                                                     key: 'record' + ind,
-                                                    label: <div
-                                                        onClick={() => {
-                                                            const search = `?showMenu=${record.showMenu}&chatMode=${record.chatMode}&appId=${record.appId}`;
-                                                            if (record.appId) {
-                                                                navigate({
-                                                                    pathname: '/knowledgeChat',
-                                                                    search: search,
-                                                                })
-                                                            }
-                                                        }}
-                                                    >
-                                                        {record.title}
-                                                    </div>
+                                                    label: (
+                                                        <Tooltip placement="left" title={record.title}>
+                                                            <div
+                                                                onClick={() => {
+                                                                    const search = `?showMenu=${record.showMenu}&chatMode=${record.chatMode}&appId=${record.appId}`;
+                                                                    if (record.appId) {
+                                                                        navigate({
+                                                                            pathname: '/knowledgeChat',
+                                                                            search: search,
+                                                                        })
+                                                                    }
+                                                                }}
+                                                            >
+                                                                {formatMenuTitle(record.title)}
+                                                            </div>
+                                                        </Tooltip>
+                                                    )
                                                 };
                                             }) : undefined,
                                         };
@@ -160,6 +196,7 @@ const DeekSeek: React.FC = () => {
                                 }}
                                 overlayClassName="deekSeek-dropdown"
                                 placement="bottomLeft"
+                                align={dropdownAlign}
                                 getPopupContainer={(triggerNode) => {
                                     if (isMobileScreen) {
                                         return document.body;
@@ -168,8 +205,16 @@ const DeekSeek: React.FC = () => {
                                 }}
                                 key={index}
                             >
-                                <div style={{ whiteSpace: 'nowrap', marginRight: 20, color: '#fff', cursor: 'pointer' }}>
-                                    {item.title}
+                                <div
+                                    className='deekSeek-header__item'
+                                    style={{
+                                        marginRight: isMobileScreen ? 12 : 20,
+                                        fontSize: isMobileScreen ? undefined : 14,
+                                        fontWeight: isMobileScreen ? undefined : 600,
+                                    }}
+                                    title={item.title}
+                                >
+                                    {formatMenuTitle(item.title)}
                                 </div>
                             </Dropdown>
                         })

app/components/deepSeekHome.scss

@@ -31,6 +31,21 @@
       left: 0;
 
     }
+
+    &__item {
+      position: relative;
+      padding: 8px 12px;
+      border-radius: 999px;
+      white-space: nowrap;
+      color: #FFFFFF;
+      cursor: pointer;
+      transition: color 0.2s ease, font-weight 0.2s ease;
+
+      &:hover {
+        color: #CFE4FF;
+        font-weight: 700 !important;
+      }
+    }
   }
 
   &-content {
@@ -97,6 +112,8 @@
     display: none; // 移动端隐藏
   }
 
+  position: relative;
+  left: 40px;
   background: #FFFFFF;
   color: #1890FF;
   border: 1px solid #1890FF;