icon font

client/package.json

@@ -53,6 +53,7 @@
     "@tarojs/shared": "4.0.9",
     "@tarojs/taro": "4.0.9",
     "@tarojs/webpack5-runner": "^4.0.9",
+    "classnames": "^2.5.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -64,6 +65,7 @@
     "@babel/preset-typescript": "^7.26.0",
     "@tarojs/cli": "4.0.9",
     "@tarojs/vite-runner": "4.0.9",
+    "@types/classnames": "^2.3.4",
     "@types/react": "^18.0.0",
     "@vitejs/plugin-react": "^4.3.0",
     "babel-preset-taro": "4.0.9",
@@ -76,6 +78,7 @@
     "sass": "^1.75.0",
     "stylelint": "^16.4.0",
     "terser": "^5.30.4",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^5.4.5",
     "vite": "^4.2.0"
   }

client/src/app.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import Taro from '@tarojs/taro';
+import './assets/iconfont/iconfont.weapp.scss';
 import { AppProvider } from './contexts/AppProvider';
 import './app.scss';
 

client/src/components/base/Icon/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Text } from '@tarojs/components'
+import classNames from 'classnames'
+import './index.scss'
+
+interface IconProps {
+  type: string
+  size?: number
+  color?: string
+  className?: string
+  onClick?: () => void
+}
+
+const Icon: React.FC<IconProps> = ({ 
+  type, 
+  size = 16, 
+  color, 
+  className = '',
+  onClick
+}) => {
+  return (
+    <Text
+      className={classNames('iconfont', `icon-${type}`, className)}
+      style={{ 
+        fontSize: `${size}px`, 
+        color: color 
+      }}
+      onClick={onClick}
+    />
+  )
+}
+
+export default Icon

client/src/components/layout/CustomTabBar/index.tsx

@@ -1,79 +1,39 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import Taro from '@tarojs/taro';
 import { View, Text } from '@tarojs/components';
-import { 
-  FaHome, 
-  FaDoorOpen, 
-  FaHistory, 
-  FaUser, 
-  FaHouseUser, 
-  FaDoorClosed, 
-  FaCalendarAlt, 
-  FaUserCircle 
-} from 'react-icons/fa';
+import Icon from '@components/base/Icon'
+import { ICONS } from '@constants/icons';
 import './index.scss';
 
-interface TabItem {
-  pagePath: string;
-  text: string;
-  icon: React.ReactNode;
-  selectedIcon: React.ReactNode;
-}
+const tabs = [
+  { pagePath: '/pages/game-plaza/index', text: '游戏', icon: ICONS.PLAZA },
+  { pagePath: '/pages/game-room/index', text: '房间', icon: ICONS.ROOM },
+  { pagePath: '/pages/game-history/index', text: '历史', icon: ICONS.HISTORY },
+  { pagePath: '/pages/profile/index', text: '我的', icon: ICONS.PROFILE }
+];
 
 const CustomTabBar: React.FC = () => {
-  const [currentPath, setCurrentPath] = useState<string>('');
-  const [tabs] = useState<TabItem[]>([
-    {
-      pagePath: '/pages/index/index',
-      text: '游戏广场',
-      icon: <FaHome size={20} color="#999" />,
-      selectedIcon: <FaHouseUser size={20} color="#4F7FFE" />
-    },
-    {
-      pagePath: '/pages/room/join/index',
-      text: '我的房间',
-      icon: <FaDoorOpen size={20} color="#999" />,
-      selectedIcon: <FaDoorClosed size={20} color="#4F7FFE" />
-    },
-    {
-      pagePath: '/pages/game-history/index',
-      text: '游戏历史',
-      icon: <FaHistory size={20} color="#999" />,
-      selectedIcon: <FaCalendarAlt size={20} color="#4F7FFE" />
-    },
-    {
-      pagePath: '/pages/profile/index',
-      text: '个人中心',
-      icon: <FaUser size={20} color="#999" />,
-      selectedIcon: <FaUserCircle size={20} color="#4F7FFE" />
-    }
-  ]);
+  const [current, setCurrent] = useState(0);
 
-  useEffect(() => {
-    const page = Taro.getCurrentInstance().router;
-    if (page) {
-      const path = `/${page.path}`;
-      setCurrentPath(path);
-    }
-  }, []);
-
-  const handleTabClick = (pagePath: string) => {
-    Taro.switchTab({ url: pagePath });
-    setCurrentPath(pagePath);
+  const handleClick = (index: number, url: string) => {
+    setCurrent(index);
+    Taro.switchTab({ url });
   };
 
   return (
     <View className='custom-tab-bar'>
-      {tabs.map(tab => (
+      {tabs.map((tab, index) => (
         <View 
-          key={tab.pagePath} 
-          className={`custom-tab-bar__item ${currentPath === tab.pagePath ? 'custom-tab-bar__item--active' : ''}`}
-          onClick={() => handleTabClick(tab.pagePath)}
+          key={index} 
+          className={`tab-item ${current === index ? 'active' : ''}`}
+          onClick={() => handleClick(index, tab.pagePath)}
         >
-          <View className='custom-tab-bar__icon'>
-            {currentPath === tab.pagePath ? tab.selectedIcon : tab.icon}
-          </View>
-          <Text className='custom-tab-bar__text'>{tab.text}</Text>
+          <Icon 
+            type={tab.icon} 
+            size={24} 
+            color={current === index ? '#1296db' : '#8a8a8a'} 
+          />
+          <Text className='tab-text'>{tab.text}</Text>
         </View>
       ))}
     </View>

client/src/components/layout/TabBarLayout/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from '@tarojs/components';
-import CustomTabBar from '../CustomTabBar';
+import CustomTabBar from '@components/layout/CustomTabBar';
 import './index.scss';
 
 interface TabBarLayoutProps {

client/src/constants/icons.ts

@@ -0,0 +1,8 @@
+   // 根据您从iconfont选择的图标命名
+   export const ICONS = {
+    SEARCH: 'search',
+    PLAZA: 'plaza',
+    ROOM: 'room',
+    HISTORY: 'history',
+    PROFILE: 'profile',
+  }

client/src/pages/game-plaza/index.tsx

@@ -4,7 +4,8 @@ import { View, ScrollView, Input, Image } from '@tarojs/components';
 import GameCard from '../../components/base/GameCard';
 import { Game } from '../../interfaces';
 import { getGames } from '../../services/api';
-import { GameCategories } from '../../constants';
+import Icon from '../../components/base/Icon';
+import { ICONS } from '../../constants/icons';
 import './index.scss';
 
 interface Category {
@@ -107,9 +108,7 @@ const GamePlaza: React.FC = () => {
       {/* 头部搜索 */}
       <View className='game-plaza__header'>
         <View className='game-plaza__search'>
-          <View className='game-plaza__search-icon'>
-            🔍
-          </View>
+          <Icon type={ICONS.SEARCH} size={18} color='#999' />
           <Input
             className='game-plaza__search-input'
             type='text'

client/tsconfig.json

@@ -22,7 +22,16 @@
     ],
     "paths": {
       // TS5090 leading './'
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@constants/*": ["./src/constants/*"],
+      "@assets/*": ["./src/assets/*"],
+      "@pages/*": ["./src/pages/*"],
+      "@services/*": ["./src/services/*"],
+      "@interfaces/*": ["./src/interfaces/*"],
+      "@hooks/*": ["./src/hooks/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@utils/*": ["./src/utils/*"]
     }
   },
   "include": ["./src", "./types", "./config"],