feat: add guide route and message page and empty person page

src/components/GuideBar/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import img from '@/config/images'
+import './index.scss'
+
+export type currentPageType = 'games' | 'message' | 'personal'
+
+const GuideBar = (props) => {
+  const { currentPage } = props
+
+  const guideItems = [
+    {
+      code: 'list',
+      text: '球局',
+    },
+    {
+      code: 'message',
+      text: '消息',
+    },
+    {
+      code: 'personal',
+      text: '我的',
+    },
+  ]
+
+  const handlePublish = () => {
+    Taro.navigateTo({
+      url: '/pages/publishBall/index',
+    })
+  }
+
+  const handlePageChange = (code: string) => {
+    if (code === currentPage) {
+      return
+    }
+    Taro.navigateTo({
+      url: `/pages/${code}/index`,
+    }).then(() => {
+      Taro.pageScrollTo({
+        scrollTop: 0,
+        duration: 300,
+      })
+    })
+  }
+
+  return (
+    <View className='guide-bar-container'>
+      <View className='guide-bar'>
+        {/* guide area on the left */}
+        <View className='guide-bar-pages'>
+          {guideItems.map((item) => (
+            <View
+              className={`guide-bar-pages-item ${currentPage === item.code ? 'guide-bar-pages-item-active' : ''}`}
+              onClick={() => handlePageChange(item.code)}
+            >
+              <Text>{item.text}</Text>
+            </View>
+          ))}
+        </View>
+        {/* publish button on the right */}
+        <View className='guide-bar-publish' onClick={handlePublish}>
+          <Image className='guide-bar-publish-icon' src={img.ICON_GUIDE_BAR_PUBLISH} />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default GuideBar