添加登录和后端校验

完成后端设计（未在本仓库体现），通过安全的手段完成了登录鉴权
2026-08-06 16:27:36 +08:00
commit b19a56003f
286 changed files with 51650 additions and 0 deletions
@@ -0,0 +1,58 @@
+import { View, Text, Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useEffect, useState } from 'react'
+import { getTheme, resolveTheme } from '../utils/store'
+import { THEME_CHANGE_EVENT } from '../context/ThemeContext'
+import { applyPageBackground } from '../utils/themeBackground'
+import './index.scss'
+
+const TABS = [
+  { pagePath: '/pages/index/index', text: '首页', icon: '/icon/首页.png' },
+  { pagePath: '/pages/shop/index', text: '商品', icon: '/icon/商品.png' },
+  { pagePath: '/pages/designList/index', text: '设计清单', icon: '/icon/调色盘.png' },
+  { pagePath: '/pages/orders/index', text: '订单', icon: '/icon/包裹.png' },
+  { pagePath: '/pages/profile/index', text: '我的', icon: '/icon/个人.png' }
+]
+
+export default function CustomTabBar() {
+  // 自定义 tabBar 是独立组件，无法继承页面里的 React Context，
+  // 初始值从本地主题配置读取，之后通过 eventCenter 跟随主题切换
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(resolveTheme(getTheme()))
+  const currentPath = `/${Taro.getCurrentInstance().router?.path || 'pages/index/index'}`
+
+  useEffect(() => {
+    const handler = (t: 'light' | 'dark') => setResolvedTheme(t)
+    Taro.eventCenter.on(THEME_CHANGE_EVENT, handler)
+    return () => {
+      Taro.eventCenter.off(THEME_CHANGE_EVENT, handler)
+    }
+  }, [])
+
+  // tabBar 是 tab 页切换时必定会挂载/更新的组件：在这里也刷新一次页面背景，
+  // 兜底处理“登录后切到受保护页面”时自定义导航区背景，避免残留白色
+  useEffect(() => {
+    applyPageBackground(resolvedTheme)
+  }, [resolvedTheme])
+
+  const switchTab = (url: string) => {
+    Taro.switchTab({ url })
+  }
+
+  return (
+    <View className={`custom-tab-bar theme-${resolvedTheme}`}>
+      {TABS.map((tab) => {
+        const isActive = currentPath === tab.pagePath
+        return (
+          <View
+            key={tab.pagePath}
+            className={`tab-item ${isActive ? 'active' : ''}`}
+            onTap={() => switchTab(tab.pagePath)}
+          >
+            <Image className={`tab-icon-img ${isActive ? 'active' : ''}`} src={tab.icon} mode='aspectFit' />
+            <Text className='tab-label'>{tab.text}</Text>
+          </View>
+        )
+      })}
+    </View>
+  )
+}