Просмотр исходного кода

✨ feat(mobile): 创建可复用的HeaderLogo组件并应用于首页

- 新增HeaderLogo组件,支持不同尺寸(sm/md/lg)和是否显示名称的配置
- 重构NewHomePage,使用HeaderLogo组件替换原有的硬编码logo实现
- 优化HeaderLogo组件的样式和响应式设计,统一品牌视觉呈现
yourname 7 месяцев назад
Родитель
Сommit
b3391a0b2f
2 измененных файлов с 48 добавлено и 21 удалено
  1. 43 0
      src/client/mobile/components/HeaderLogo.tsx
  2. 5 21
      src/client/mobile/pages/NewHomePage.tsx

+ 43 - 0
src/client/mobile/components/HeaderLogo.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { COLORS } from '../styles/colors';
+
+interface HeaderLogoProps {
+  className?: string;
+  logoSize?: 'sm' | 'md' | 'lg';
+  showName?: boolean;
+}
+
+const HeaderLogo: React.FC<HeaderLogoProps> = ({ 
+  className = '', 
+  logoSize = 'md', 
+  showName = true 
+}) => {
+  // 尺寸映射
+  const sizeMap = {
+    sm: { logo: 'h-6 w-auto', name: 'text-lg' },
+    md: { logo: 'h-8 w-auto', name: 'text-xl' },
+    lg: { logo: 'h-10 w-auto', name: 'text-2xl' }
+  };
+
+  const currentSize = sizeMap[logoSize];
+
+  return (
+    <div className={`flex items-center space-x-2 ${className}`}>
+      <img
+        src="/yizhihuilogo.png"
+        alt="银龄智慧"
+        className={`object-contain ${currentSize.logo}`}
+      />
+      {showName && (
+        <h1
+          className={`font-serif font-bold tracking-wide ${currentSize.name}`}
+          style={{ color: COLORS.text.primary }}
+        >
+          银龄智慧
+        </h1>
+      )}
+    </div>
+  );
+};
+
+export default HeaderLogo;

+ 5 - 21
src/client/mobile/pages/NewHomePage.tsx

@@ -8,6 +8,7 @@ import { EnhancedCarousel } from '../components/EnhancedCarousel';
 import { AdBannerCarousel } from '../components/AdBannerCarousel';
 import { AdBannerCarousel } from '../components/AdBannerCarousel';
 import { SkeletonLoader, BannerSkeleton, ListItemSkeleton } from '../components/SkeletonLoader';
 import { SkeletonLoader, BannerSkeleton, ListItemSkeleton } from '../components/SkeletonLoader';
 import { SmartAssistant } from '../components/SmartAssistant';
 import { SmartAssistant } from '../components/SmartAssistant';
+import HeaderLogo from '../components/HeaderLogo';
 import { unsplash } from '../utils/unsplash';
 import { unsplash } from '../utils/unsplash';
 import '../styles/scroll-indicator.css';
 import '../styles/scroll-indicator.css';
 import '../components/SmartAssistant/styles/ink-styles.css';
 import '../components/SmartAssistant/styles/ink-styles.css';
@@ -263,10 +264,7 @@ const NewHomePage: React.FC = () => {
       <div className="min-h-screen bg-white">
       <div className="min-h-screen bg-white">
         <header className="px-4 py-4 bg-white shadow-sm">
         <header className="px-4 py-4 bg-white shadow-sm">
           <div className="flex items-center justify-between mb-3">
           <div className="flex items-center justify-between mb-3">
-            <div className="flex items-center space-x-2">
-              <img src="/yizhihuilogo.png" alt="银龄智慧" className="h-8 w-auto" />
-              <h1 className="font-bold text-xl">银龄智慧</h1>
-            </div>
+            <HeaderLogo />
           </div>
           </div>
           <div className="text-center py-8">
           <div className="text-center py-8">
             <h2 className="text-lg font-bold mb-4">请先登录</h2>
             <h2 className="text-lg font-bold mb-4">请先登录</h2>
@@ -333,19 +331,7 @@ const NewHomePage: React.FC = () => {
       >
       >
         <div className="px-4 py-4">
         <div className="px-4 py-4">
           <div className="flex items-center justify-between mb-3">
           <div className="flex items-center justify-between mb-3">
-            <div className="flex items-center space-x-2">
-              <img
-                src="/yizhihuilogo.png"
-                alt="银龄智慧"
-                className="h-8 w-auto object-contain"
-              />
-              <h1
-                className="font-serif text-xl font-bold tracking-wide"
-                style={{ color: COLORS.text.primary }}
-              >
-                银龄智慧
-              </h1>
-            </div>
+            <HeaderLogo className="flex-1" />
             {user ? (
             {user ? (
               <div className="flex items-center space-x-2">
               <div className="flex items-center space-x-2">
                 <span
                 <span
@@ -1105,10 +1091,8 @@ const NewHomePage: React.FC = () => {
 const HeaderSkeleton: React.FC = () => (
 const HeaderSkeleton: React.FC = () => (
   <div className="px-4 py-4" style={{ backgroundColor: COLORS.ink.light }}>
   <div className="px-4 py-4" style={{ backgroundColor: COLORS.ink.light }}>
     <div className="flex items-center justify-between mb-3">
     <div className="flex items-center justify-between mb-3">
-      <div className="flex items-center space-x-2">
-        <div className="h-8 w-8 rounded" style={{ backgroundColor: COLORS.ink.medium }}></div>
-        <div className="h-7 rounded" style={{ backgroundColor: COLORS.ink.medium, width: '5rem' }}></div>
-      </div>
+      <div className="h-8 w-8 rounded" style={{ backgroundColor: COLORS.ink.medium }}></div>
+      <div className="h-7 rounded" style={{ backgroundColor: COLORS.ink.medium, width: '5rem' }}></div>
       <div className="h-8 rounded-full" style={{ backgroundColor: COLORS.ink.medium, width: '4rem' }}></div>
       <div className="h-8 rounded-full" style={{ backgroundColor: COLORS.ink.medium, width: '4rem' }}></div>
     </div>
     </div>
     <div className="flex items-center rounded-full px-4 py-3" style={{ backgroundColor: COLORS.ink.light, border: `1px solid ${COLORS.ink.medium}` }}>
     <div className="flex items-center rounded-full px-4 py-3" style={{ backgroundColor: COLORS.ink.light, border: `1px solid ${COLORS.ink.medium}` }}>