添加登录和后端校验

完成后端设计（未在本仓库体现），通过安全的手段完成了登录鉴权

src/custom-tab-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/custom-tab-bar/index.scss

@@ -0,0 +1,62 @@
+.custom-tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 120px;
+  background: #ffffff;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-top: 3px dashed #A0C4FF;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  z-index: 1000;
+}
+
+/* 自定义组件样式隔离：两套主题配色在组件内自包含，不依赖全局 app.wxss */
+.custom-tab-bar.theme-dark {
+  background: #1e1e2f;
+  border-top-color: #5b8cff;
+}
+
+.tab-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  position: relative;
+}
+
+.tab-icon-img {
+  width: 28px;
+  height: 28px;
+  margin-bottom: 4px;
+  transition: transform 0.2s;
+  opacity: 0.6;
+}
+
+.tab-item.active .tab-icon-img {
+  transform: scale(1.15);
+  opacity: 1;
+}
+
+.tab-label {
+  font-size: 20px;
+  color: #b08d8d;
+  transition: color 0.2s;
+}
+
+.custom-tab-bar.theme-dark .tab-label {
+  color: #a0a0c0;
+}
+
+.tab-item.active .tab-label {
+  color: #ff9a9e;
+  font-weight: 600;
+}
+
+.custom-tab-bar.theme-dark .tab-item.active .tab-label {
+  color: #ff7eb3;
+}

src/custom-tab-bar/index.tsx

@@ -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>
+  )
+}