style: enhance GitHub star counter with modern design and better formatting

Author: CC11001100

src/components/GitHubStarCounter.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { GithubOutlined, StarFilled } from '@ant-design/icons';
-import { Tooltip, Badge } from 'antd';
+import { Tooltip, Spin } from 'antd';
 
 interface GitHubStarCounterProps {
   owner: string;
@@ -87,47 +87,69 @@ const GitHubStarCounter: React.FC<GitHubStarCounterProps> = ({
     fetchStarCount();
   }, [owner, repo, cacheTime]);
 
-  // 容器样式
+  // 格式化星星数量，大于1000显示为1k+的形式
+  const formatStarCount = (count: number): string => {
+    if (count >= 1000) {
+      const formattedCount = (count / 1000).toFixed(1);
+      // 如果小数点后是0，则不显示小数点
+      return formattedCount.endsWith('.0') 
+        ? `${formattedCount.slice(0, -2)}k` 
+        : `${formattedCount}k`;
+    }
+    return count.toString();
+  };
+
+  // 美化后的容器样式
   const containerStyle = {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
     fontSize: '13px',
-    color: '#333',
+    color: '#24292e',
     cursor: 'pointer',
-    transition: 'transform 0.2s ease, color 0.2s ease',
-    height: '100%',
-    borderRadius: '4px',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    height: '28px',
+    borderRadius: '15px',
     textDecoration: 'none',
-    padding: '0 8px',
-    fontWeight: 600,
+    padding: '0 12px',
+    fontWeight: 500,
+    border: '1px solid rgba(36, 41, 46, 0.1)',
+    background: 'linear-gradient(to bottom, #fafbfc, #f6f8fa)',
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+  };
+
+  // 悬停样式
+  const hoverStyle = {
+    background: 'linear-gradient(to bottom, #f6f8fa, #e1e4e8)',
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+    transform: 'translateY(-1px)',
+    borderColor: 'rgba(36, 41, 46, 0.2)',
   };
 
   // GitHub图标样式
   const githubIconStyle = {
-    fontSize: '22px',
+    fontSize: '16px',
     color: '#24292e',
-    marginRight: '2px',
-    verticalAlign: 'middle'
+    marginRight: '4px',
   };
 
   // Star图标样式
   const starIconStyle = {
     fontSize: '14px',
-    color: '#ff9800',
-    marginRight: '3px',
+    color: '#f1c40f',
+    marginRight: '4px',
+    filter: 'drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.1))',
+  };
+
+  // 数字样式
+  const countStyle = {
+    fontWeight: 600,
+    color: '#24292e',
   };
 
-  // 徽章样式
-  const badgeStyle = {
-    backgroundColor: '#24292e',
-    color: 'white',
-    fontSize: '12px',
-    padding: '1px 6px',
-    borderRadius: '10px',
-    fontWeight: 'bold',
-    marginLeft: '4px',
-    display: 'inline-block',
+  // 加载动画样式
+  const spinnerStyle = {
+    margin: '0 5px',
   };
 
   return (
@@ -138,19 +160,22 @@ const GitHubStarCounter: React.FC<GitHubStarCounterProps> = ({
         rel="noopener noreferrer"
         style={containerStyle}
         onMouseOver={(e) => {
-          e.currentTarget.style.color = '#1890ff';
-          e.currentTarget.style.transform = 'scale(1.05)';
+          Object.assign(e.currentTarget.style, hoverStyle);
         }}
         onMouseOut={(e) => {
-          e.currentTarget.style.color = '#333';
-          e.currentTarget.style.transform = 'scale(1)';
+          // 重置为原始样式
+          Object.assign(e.currentTarget.style, containerStyle);
         }}
       >
         <GithubOutlined style={githubIconStyle} />
-        <div style={{ display: 'flex', alignItems: 'center', marginLeft: '5px' }}>
-          <StarFilled style={starIconStyle} />
-          <span>{loading ? '...' : starCount}</span>
-        </div>
+        <StarFilled style={starIconStyle} />
+        {loading ? (
+          <Spin size="small" style={spinnerStyle} />
+        ) : (
+          <span style={countStyle}>
+            {starCount !== null ? formatStarCount(starCount) : '0'}
+          </span>
+        )}
       </a>
     </Tooltip>
   );