From 716b4ba3bd45e3db94552c69d0c5db6cf6cdfaed Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Thu, 13 Nov 2025 17:58:37 +0800
Subject: [PATCH] update ui

---
 .../Community/components/CompactSearchBox.js  | 61 ++++++++++++-------
 src/views/Community/components/HeroPanel.js   | 58 +++++++-----------
 2 files changed, 62 insertions(+), 57 deletions(-)

diff --git a/src/views/Community/components/CompactSearchBox.js b/src/views/Community/components/CompactSearchBox.js
index 34fec201..d9d68654 100644
--- a/src/views/Community/components/CompactSearchBox.js
+++ b/src/views/Community/components/CompactSearchBox.js
@@ -421,9 +421,16 @@ const CompactSearchBox = ({
     };
 
     return (
-        <div style={{ padding: '12px 16px', background: '#fafafa', borderRadius: '8px' }}>
+        <div style={{
+            padding: '16px 20px',
+            background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.95) 100%)',
+            borderRadius: '12px',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5)',
+            border: '1px solid rgba(200, 200, 200, 0.3)',
+            backdropFilter: 'blur(10px)'
+        }}>
             {/* 单行紧凑布局 */}
-            <Space wrap style={{ width: '100%' }} size="small">
+            <Space wrap style={{ width: '100%' }} size="medium">
                 {/* 搜索框 */}
                 <AutoComplete
                     value={inputValue}
@@ -438,12 +445,15 @@ const CompactSearchBox = ({
                             handleMainSearch();
                         }
                     }}
-                    style={{ width: 220 }}
-                    size="small"
+                    style={{ width: 240 }}
                 >
                     <Input
-                        prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
-                        size="small"
+                        prefix={<SearchOutlined style={{ color: '#1890ff' }} />}
+                        style={{
+                            borderRadius: '8px',
+                            border: '2px solid #e6f7ff',
+                            boxShadow: '0 2px 8px rgba(24, 144, 255, 0.1)'
+                        }}
                     />
                 </AutoComplete>
 
@@ -478,9 +488,11 @@ const CompactSearchBox = ({
                         expandTrigger="hover"
                         displayRender={(labels) => labels[labels.length - 1] || '行业'}
                         disabled={industryLoading}
-                        style={{ width: 100 }}
-                        size="small"
-                        suffixIcon={<FilterOutlined style={{ fontSize: 12 }} />}
+                        style={{
+                            width: 120,
+                            borderRadius: '8px'
+                        }}
+                        suffixIcon={<FilterOutlined style={{ fontSize: 14, color: '#52c41a' }} />}
                     />
                 </Tooltip>
 
@@ -490,8 +502,10 @@ const CompactSearchBox = ({
                         mode="multiple"
                         value={importance}
                         onChange={handleImportanceChange}
-                        style={{ width: 100 }}
-                        size="small"
+                        style={{
+                            width: 120,
+                            borderRadius: '8px'
+                        }}
                         placeholder="重要性"
                         maxTagCount={0}
                         maxTagPlaceholder={(omittedValues) => `已选 ${omittedValues.length} 项`}
@@ -508,15 +522,17 @@ const CompactSearchBox = ({
                     <AntSelect
                         value={sort}
                         onChange={handleSortChange}
-                        style={{ width: 110 }}
-                        size="small"
-                        suffixIcon={<SortAscendingOutlined style={{ fontSize: 12 }} />}
+                        style={{
+                            width: 130,
+                            borderRadius: '8px'
+                        }}
+                        suffixIcon={<SortAscendingOutlined style={{ fontSize: 14, color: '#faad14' }} />}
                     >
-                        <Option value="new">最新</Option>
-                        <Option value="hot">最热</Option>
-                        <Option value="importance">重要性</Option>
-                        <Option value="returns_avg">平均收益</Option>
-                        <Option value="returns_week">周收益</Option>
+                        <Option value="new">⏰ 最新</Option>
+                        <Option value="hot">🔥 最热</Option>
+                        <Option value="importance">⭐ 重要性</Option>
+                        <Option value="returns_avg">📊 平均收益</Option>
+                        <Option value="returns_week">📈 周收益</Option>
                     </AntSelect>
                 </Tooltip>
 
@@ -525,9 +541,12 @@ const CompactSearchBox = ({
                     <Button
                         icon={<CloseCircleOutlined />}
                         onClick={handleReset}
-                        size="small"
                         danger
-                        type="text"
+                        type="primary"
+                        style={{
+                            borderRadius: '8px',
+                            boxShadow: '0 2px 8px rgba(255, 77, 79, 0.2)'
+                        }}
                     >
                         重置
                     </Button>
diff --git a/src/views/Community/components/HeroPanel.js b/src/views/Community/components/HeroPanel.js
index a466e050..2cece40d 100644
--- a/src/views/Community/components/HeroPanel.js
+++ b/src/views/Community/components/HeroPanel.js
@@ -469,18 +469,18 @@ const ConceptFlowAnimation = () => {
   // 根据涨跌幅计算字体大小（涨跌幅越大，字体越大）
   const getFontSize = (changePct) => {
     const absChange = Math.abs(changePct);
-    if (absChange >= 10) return 'md';      // 超大涨跌
-    if (absChange >= 7) return 'sm';       // 大涨跌
-    if (absChange >= 5) return 'sm';       // 中涨跌
-    if (absChange >= 3) return 'xs';       // 小涨跌
-    return 'xs';                            // 微涨跌
+    if (absChange >= 10) return 'xl';      // 超大涨跌 - 20px
+    if (absChange >= 7) return 'lg';       // 大涨跌 - 18px
+    if (absChange >= 5) return 'md';       // 中涨跌 - 16px
+    if (absChange >= 3) return 'md';       // 小涨跌 - 16px
+    return 'sm';                            // 微涨跌 - 14px
   };
 
   return (
     <VStack spacing={3} h="200px" justify="center" overflow="hidden" position="relative" w="100%">
       {rows.map((row, rowIndex) => {
-        // 每行不同的速度：第一行25秒，第二行30秒，第三行35秒
-        const duration = 25 + rowIndex * 5;
+        // 每行不同的速度：第一行50秒，第二行60秒，第三行70秒（更慢）
+        const duration = 50 + rowIndex * 10;
 
         return (
           <Box
@@ -514,25 +514,15 @@ const ConceptFlowAnimation = () => {
             const isHovered = hoveredConcept === `${rowIndex}-${idx}`;
 
             const fontSize = getFontSize(changePct);
-            const borderWidth = fontSize === 'md' ? '3px' : '2px';
+            const isLargeFontSize = fontSize === 'xl' || fontSize === 'lg';
 
             return (
               <Box
                 key={`${rowIndex}-${idx}`}
-                px={4}
-                py={2}
-                borderRadius="full"
-                bg="whiteAlpha.200"
-                borderWidth={borderWidth}
-                borderColor={color}
-                color="white"
-                fontWeight={fontSize === 'md' ? 'extrabold' : 'bold'}
-                fontSize={fontSize}
-                whiteSpace="nowrap"
+                px={2}
                 cursor="pointer"
                 position="relative"
                 transition="all 0.3s ease"
-                boxShadow={`0 0 ${fontSize === 'md' ? '15px' : '10px'} ${color}${fontSize === 'md' ? '60' : '40'}`}
                 onMouseEnter={() => {
                   setIsPaused(true);
                   setHoveredConcept(`${rowIndex}-${idx}`);
@@ -543,14 +533,23 @@ const ConceptFlowAnimation = () => {
                 }}
                 onClick={() => handleConceptClick(concept.name)}
                 _hover={{
-                  transform: 'scale(1.15)',
-                  bg: 'whiteAlpha.300',
-                  boxShadow: `0 0 25px ${color}80`,
+                  transform: 'scale(1.2)',
                   zIndex: 100
                 }}
               >
                 {/* 概念名称 */}
-                <Text as="span" color={color}>
+                <Text
+                  as="span"
+                  color={color}
+                  fontSize={fontSize}
+                  fontWeight={isLargeFontSize ? 'extrabold' : 'bold'}
+                  textShadow={`0 0 ${isLargeFontSize ? '12px' : '8px'} ${color}80, 0 2px 4px rgba(0,0,0,0.5)`}
+                  whiteSpace="nowrap"
+                  transition="all 0.3s ease"
+                  _hover={{
+                    textShadow: `0 0 20px ${color}, 0 0 30px ${color}60, 0 2px 6px rgba(0,0,0,0.7)`
+                  }}
+                >
                   {concept.name}
                 </Text>
 
@@ -814,21 +813,8 @@ const HeroPanel = () => {
               <Box
                 w="100%"
                 flex="1"
-                bg="whiteAlpha.100"
-                borderRadius="xl"
-                borderWidth="1px"
-                borderColor="whiteAlpha.200"
-                backdropFilter="blur(10px)"
-                boxShadow="0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
-                p={3}
                 position="relative"
                 overflow="hidden"
-                transition="all 0.3s ease"
-                _hover={{
-                  bg: "whiteAlpha.150",
-                  borderColor: "whiteAlpha.300",
-                  boxShadow: "0 6px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
-                }}
               >
                 <ConceptFlowAnimation />
               </Box>