添加红点修复

README.md

@@ -57,7 +57,7 @@ npm run build:alipay    # 支付宝小程序
 
 ## 页面路由
 
-- `/game_pages/list/index` - 首页
+
 - `/pages/publish/publish` - 原发布页面
 - `/pages/publishBall/publishBall` - 新的约球发布页面 ⭐
 - `/pages/dynamicFormDemo/dynamicFormDemo` - 动态表单演示页面 ⭐

config/prod.ts

@@ -31,22 +31,6 @@ export default {
     //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
     //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
     //    */
-    //   chain.plugin('analyzer')
+  
-    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
-    //   /**
-    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
-    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
-    //    */
-    //   const path = require('path')
-    //   const Prerender = require('prerender-spa-plugin')
-    //   const staticDir = path.join(__dirname, '..', 'dist')
-    //   chain
-    //     .plugin('prerender')
-    //     .use(new Prerender({
-    //       staticDir,
-    //       routes: [ '/game_pages/list/index' ],
-    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
-    //     }))
-    // }
   }
 } satisfies UserConfigExport<'webpack5'>

docs/z-index-guide.md

@@ -45,8 +45,7 @@
 
 ### GuideBar（底部导航栏）动态控制
 
-**实现位置**：
+
-- `src/game_pages/list/index.tsx`（主逻辑）
 - `src/components/DistanceQuickFilter/index.tsx`（筛选菜单回调）
 - `src/components/PublishMenu/PublishMenu.tsx`（发布菜单回调）
 - `src/container/listCustomNavbar/index.tsx`（城市选择器回调）

fetchUserInfo_analysis.md

@@ -12,9 +12,6 @@
    - 微信授权成功后调用
    - ✅ 合理（主入口，需要确保用户信息加载）
 
-3. **src/game_pages/list/index.tsx** (第228行)
-   - 在 useEffect 中，等待 waitForAuthInit 后调用
-   - ✅ 合理
 
 4. **src/game_pages/detail/index.tsx** (第55行)
    - 在 useEffect 中，等待 waitForAuthInit 后调用

src/app.config.ts

@@ -54,7 +54,6 @@ export default defineAppConfig({
     {
       root: 'other_pages',
       pages: [
-        "message/index",
         "comment_reply/index", // 收到的评论和回复
         "new_follow/index", // 新增关注
         "favorites/index", // 收藏页

src/components/GuideBar/index.tsx

@@ -47,25 +47,7 @@ const GuideBar = (props) => {
       return;
     }
 
-    // 否则使用路由跳转（兼容模式）
+    
-    let url = `/pages/${code}/index`;
-    if (code === "personal") {
-      url = "/user_pages/myself/index";
-    }
-    if (code === "message") {
-      url = "/other_pages/message/index";
-    }
-    if (code === "list") {
-      url = "/main_pages/index"
-    }
-    redirectTo({
-      url: url,
-    }).then(() => {
-      (Taro as any).pageScrollTo({
-        scrollTop: 0,
-        duration: 300,
-      });
-    });
   };
 
   return (

src/components/NTRPTestEntryCard/index.tsx

@@ -58,10 +58,10 @@ function NTRPTestEntryCard(props: {
           setCallback({
             type,
             next: () => {
-              Taro.redirectTo({ url: "/game_pages/list/index" });
+              Taro.redirectTo({ url: "/main_pages/index" });
             },
             onCancel: () => {
-              // Taro.redirectTo({ url: "/game_pages/list/index" });
+            
               Taro.navigateBack();
             },
           });
@@ -97,7 +97,7 @@ function NTRPTestEntryCard(props: {
           setCallback({
             type,
             next: () => {
-              Taro.redirectTo({ url: "/game_pages/list/index" });
+              Taro.redirectTo({ url: "/main_pages/index" });
             },
             onCancel: () => {
               // Taro.redirectTo({ url: "/user_pages/edit/index" });

src/game_pages/list/index.config.ts

@@ -1,8 +0,0 @@
-export default definePageConfig({
-  navigationBarTitleText: '',
-  enablePullDownRefresh: false, // 禁用页面级下拉刷新，使用 ScrollView 的下拉刷新
-  backgroundTextStyle: 'dark',
-  navigationStyle: 'custom',
-  backgroundColor: '#FAFAFA',
-  onReachBottomDistance: 300,
-})

src/game_pages/list/index.module.scss

@@ -1,193 +0,0 @@
-// GuideBar 的 z-index 通过局部样式类动态控制
-
-.cqContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    // gap: 24px;
-
-    .tips {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-
-      .tip1 {
-        color: #000;
-        text-align: center;
-        font-family: "PingFang SC";
-        font-size: 18px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 28px;
-      }
-
-      .tip2 {
-        color: rgba(0, 0, 0, 0.65);
-        text-align: center;
-        font-family: "PingFang SC";
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-      }
-    }
-
-    .qrcodeWrappper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-
-      .qrcode {
-        width: 180px;
-        height: 180px;
-        // border-radius: 12px;
-        // border: 1px solid rgba(0, 0, 0, 0.06);
-        // background: lightgray 50% / cover no-repeat;
-        // box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.16);
-      }
-
-      .qrcodeTip {
-        color: rgba(0, 0, 0, 0.65);
-        text-align: center;
-        font-family: "PingFang SC";
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        margin-top: -30px;
-      }
-    }
-  }
-}
-
-.listPage {
-  background-color: #FAFAFA;
-  font-family: "PingFang SC";
-  transition: padding-top 0.3s ease-in-out; // 添加过渡动画，让布局变化更平滑
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - var(--status-bar-height, 0px) - var(--nav-bar-height, 0px) - 112px); // 减去底部导航栏高度 112px
-  overflow: hidden;
-
-  .fixedHeader {
-    position: sticky;
-    top: 0;
-    z-index: 90;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .listTopSearchWrapper {
-    // background-color: #fafafa;
-    // 使用 margin-top 负值来控制可见性，保持元素高度不变，筛选项位置固定
-    transition: margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-                opacity 0.2s ease-out;
-    padding: 10px 15px 10px 15px; // 统一边距：上下10px 左右15px
-    box-sizing: border-box;
-    overflow: hidden;
-    will-change: margin-top, opacity;
-
-    &.show {
-      opacity: 1;
-      margin-top: 0; // 正常显示
-    }
-
-    &.hide {
-      opacity: 0;
-      margin-top: -64px; // 使用负 margin 向上隐藏，但仍占据布局空间 (44px内容 + 20px padding = 64px)
-      pointer-events: none; // 隐藏时禁用交互
-    }
-  }
-
-  .listTopFilterWrapper {
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    padding: 0 15px 10px 15px;
-    // 上0 左右15px 下10px（与搜索框左右对齐，下边距一致）
-    gap: 5px;
-    background-color: #fafafa;
-  }
-
-  .listScrollView {
-    flex: 1;
-    height: 0; // 让 flex 生效
-  }
-
-  .menuFilter {
-    padding: 0;
-  }
-}
-
-.listNavWrapper {
-  position: relative;
-}
-
-.toggleElement {
-  /* 绝对定位使两个元素重叠 */
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  /* 过渡动画设置，实现平滑切换 */
-  transition: opacity 0.5s ease, transform 0.5s ease;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-/* 第一个元素样式 */
-.firstElement {
-  background-color: #4a90e2;
-  color: white;
-}
-
-/* 第二个元素样式 */
-.secondElement {
-  background-color: #5cb85c;
-  color: white;
-  /* 初始状态：透明且稍微偏移 */
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-/* 可见状态 */
-.visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-/* 隐藏状态 */
-.hidden {
-  opacity: 0;
-  transform: translateY(20px);
-  pointer-events: none;
-  /* 隐藏时不响应鼠标事件 */
-}
-
-// GuideBar 动态 z-index 控制
-.guideBarLowZIndex {
-  z-index: 80 !important; // 筛选弹出时，降低层级，避免遮挡筛选内容
-}
-
-.guideBarHighZIndex {
-  z-index: 900 !important; // 正常状态，保持较高层级
-}

src/game_pages/list/index.tsx

@@ -1,613 +0,0 @@
-import SearchBar from "@/components/SearchBar";
-import FilterPopup from "@/components/FilterPopup";
-import styles from "./index.module.scss";
-import { useEffect, useRef, useCallback, useState } from "react";
-import Taro from "@tarojs/taro";
-import { useListStore } from "@/store/listStore";
-import { useGlobalState } from "@/store/global";
-import { View, Image, Text, ScrollView } from "@tarojs/components";
-import HomeNavbar from "@/components/HomeNavbar";
-import GuideBar from "@/components/GuideBar";
-import ListContainer from "@/container/listContainer";
-import DistanceQuickFilter from "@/components/DistanceQuickFilter";
-import { withAuth } from "@/components";
-import { updateUserLocation } from "@/services/userService";
-// import ShareCardCanvas from "@/components/ShareCardCanvas";
-import { useUserActions } from "@/store/userStore";
-import { useDictionaryStore } from "@/store/dictionaryStore";
-import { saveImage } from "@/utils";
-import { waitForAuthInit } from "@/utils/authInit";
-
-const ListPage = () => {
-  // 从 store 获取数据和方法
-  const store = useListStore() || {};
-
-  const { fetchUserInfo } = useUserActions();
-
-  const { statusNavbarHeightInfo, getCurrentLocationInfo } =
-    useGlobalState() || {};
-
-  const { totalHeight = 98 } = statusNavbarHeightInfo || {}; // 设置默认值，避免从0跳到实际值
-  const {
-    listPageState,
-    loading,
-    error,
-    searchValue,
-    distanceData,
-    quickFilterData,
-    getMatchesData,
-    updateState,
-    updateListPageState,
-    updateFilterOptions, // 更新筛选条件
-    clearFilterOptions,
-    initialFilterSearch,
-    loadMoreMatches,
-    fetchGetGamesCount,
-    updateDistanceQuickFilter,
-    getCities,
-    getCityQrCode,
-    area,
-    cityQrCode,
-  } = store;
-
-  const {
-    isShowFilterPopup,
-    data: matches,
-    recommendList,
-    filterCount,
-    filterOptions,
-    distanceQuickFilter,
-    isShowInputCustomerNavBar,
-    pageOption,
-    isShowNoData,
-  } = listPageState || {};
-
-  // 滚动相关状态
-  const scrollContextRef = useRef(null);
-  const scrollViewRef = useRef(null); // ScrollView 的 ref
-  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const lastScrollTopRef = useRef(0);
-  const scrollDirectionRef = useRef<"up" | "down" | null>(null);
-  const lastScrollTimeRef = useRef(Date.now());
-  const loadingMoreRef = useRef(false); // 防止重复加载更多
-  const scrollStartPositionRef = useRef(0); // 记录开始滚动的位置
-  const [showSearchBar, setShowSearchBar] = useState(true); // 控制搜索框显示/隐藏（筛选始终显示）
-  const [scrollTop, setScrollTop] = useState(0); // 控制 ScrollView 滚动位置
-
-  // 动态控制 GuideBar 的 z-index
-  const [guideBarZIndex, setGuideBarZIndex] = useState<"low" | "high">("high");
-  const [isPublishMenuVisible, setIsPublishMenuVisible] = useState(false);
-  const [isDistanceFilterVisible, setIsDistanceFilterVisible] = useState(false);
-  const [isCityPickerVisible, setIsCityPickerVisible] = useState(false);
-
-  // 处理 PublishMenu 显示/隐藏
-  const handlePublishMenuVisibleChange = useCallback((visible: boolean) => {
-    setIsPublishMenuVisible(visible);
-  }, []);
-
-  // 处理 DistanceQuickFilter 显示/隐藏
-  const handleDistanceFilterVisibleChange = useCallback((visible: boolean) => {
-    setIsDistanceFilterVisible(visible);
-  }, []);
-
-  // 处理 CityPicker 显示/隐藏
-  const handleCityPickerVisibleChange = useCallback((visible: boolean) => {
-    setIsCityPickerVisible(visible);
-  }, []);
-
-  // 滚动到顶部的方法
-  const scrollToTop = useCallback(() => {
-    // 使用一个唯一值触发 scrollTop 更新，确保每次都能滚动到顶部
-    setScrollTop((prev) => (prev === 0 ? 0.1 : 0));
-  }, []);
-
-  // 监听所有弹窗和菜单的状态，动态调整 GuideBar 的 z-index
-  useEffect(() => {
-    if (isPublishMenuVisible) {
-      // PublishMenu 展开时，GuideBar 保持高层级
-      setGuideBarZIndex("high");
-    } else if (
-      isShowFilterPopup ||
-      isDistanceFilterVisible ||
-      isCityPickerVisible
-    ) {
-      // 任何筛选组件或选择器展开时，GuideBar 降低层级
-      setGuideBarZIndex("low");
-    } else {
-      // 都关闭时，GuideBar 保持高层级
-      setGuideBarZIndex("high");
-    }
-  }, [
-    isShowFilterPopup,
-    isPublishMenuVisible,
-    isDistanceFilterVisible,
-    isCityPickerVisible,
-  ]);
-
-  // 使用 ref 保存最新的状态值，避免依赖项变化导致函数重新创建
-  const showSearchBarRef = useRef(showSearchBar);
-  const isShowInputCustomerNavBarRef = useRef(isShowInputCustomerNavBar);
-  
-  useEffect(() => {
-    showSearchBarRef.current = showSearchBar;
-    isShowInputCustomerNavBarRef.current = isShowInputCustomerNavBar;
-  }, [showSearchBar, isShowInputCustomerNavBar]);
-
-  // ScrollView 滚动处理函数
-  const handleScrollViewScroll = useCallback(
-    (e: any) => {
-      const currentScrollTop = e?.detail?.scrollTop || 0;
-      const lastScrollTop = lastScrollTopRef.current;
-      const currentTime = Date.now();
-      const timeDiff = currentTime - lastScrollTimeRef.current;
-
-      // 节流：提高到100ms，减少触发频率
-      if (timeDiff < 100) return;
-
-      // 计算滚动距离
-      const scrollDiff = currentScrollTop - lastScrollTop;
-
-      // 判断滚动方向（提高阈值到15px）
-      let newDirection = scrollDirectionRef.current;
-      if (Math.abs(scrollDiff) > 15) {
-        if (scrollDiff > 0) {
-          // 方向改变时，记录新的起始位置
-          if (newDirection !== "up") {
-            scrollStartPositionRef.current = lastScrollTop;
-          }
-          newDirection = "up";
-        } else {
-          // 方向改变时，记录新的起始位置
-          if (newDirection !== "down") {
-            scrollStartPositionRef.current = lastScrollTop;
-          }
-          newDirection = "down";
-        }
-        scrollDirectionRef.current = newDirection;
-      }
-
-      // 计算从开始滚动到现在的累计距离
-      const totalScrollDistance = Math.abs(
-        currentScrollTop - scrollStartPositionRef.current
-      );
-
-      // 滚动阈值
-      const positionThreshold = 120; // 需要滚动到距离顶部120px
-      const distanceThreshold = 80; // 需要连续滚动80px才触发
-
-      // 使用 ref 获取最新值，避免依赖项变化
-      const currentShowSearchBar = showSearchBarRef.current;
-      const currentIsShowInputCustomerNavBar = isShowInputCustomerNavBarRef.current;
-
-      if (
-        newDirection === "up" &&
-        currentScrollTop > positionThreshold &&
-        totalScrollDistance > distanceThreshold
-      ) {
-        // 上滑超过阈值，且连续滚动距离足够，隐藏搜索框
-        if (currentShowSearchBar || !currentIsShowInputCustomerNavBar) {
-          setShowSearchBar(false);
-          updateListPageState({
-            isShowInputCustomerNavBar: true,
-          });
-          // 重置起始位置
-          scrollStartPositionRef.current = currentScrollTop;
-        }
-      } else if (
-        (newDirection === "down" && totalScrollDistance > distanceThreshold) ||
-        currentScrollTop <= positionThreshold
-      ) {
-        // 下滑且连续滚动距离足够，或者回到顶部附近，显示搜索框
-        if (!currentShowSearchBar || currentIsShowInputCustomerNavBar) {
-          setShowSearchBar(true);
-          updateListPageState({
-            isShowInputCustomerNavBar: false,
-          });
-          // 重置起始位置
-          scrollStartPositionRef.current = currentScrollTop;
-        }
-      }
-
-      lastScrollTopRef.current = currentScrollTop;
-      lastScrollTimeRef.current = currentTime;
-    },
-    [updateListPageState]
-    // 移除 showSearchBar 和 isShowInputCustomerNavBar 依赖，使用 ref 获取最新值
-  );
-
-  useEffect(() => {
-    // 分批异步执行初始化操作，避免阻塞首屏渲染
-    // 1. 立即执行：获取城市和二维码（轻量操作）
-    getCities();
-    getCityQrCode();
-    
-    // 2. 延迟执行：等待静默登录完成后获取用户信息
-    requestAnimationFrame(async () => {
-      try {
-        await waitForAuthInit();
-        await fetchUserInfo();
-      } catch (error) {
-        console.error('获取用户信息失败:', error);
-      }
-    });
-    
-    // 3. 延迟执行：获取位置信息（可能较慢，不阻塞首屏）
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        getLocation().catch((error) => {
-          console.error('获取位置信息失败:', error);
-        });
-      });
-    });
-  }, []);
-
-  // 监听数据变化，如果是第一页就恢复显示搜索框
-  useEffect(() => {
-    if (pageOption?.page === 1 && matches?.length > 0) {
-      // 恢复搜索框显示
-      setShowSearchBar(true);
-      updateListPageState({
-        isShowInputCustomerNavBar: false,
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [matches?.length, pageOption?.page]);
-  // 注意：updateListPageState 是稳定的函数引用，不需要加入依赖项
-  // 只依赖实际会变化的数据：matches 的长度和 pageOption.page
-
-  // 清理定时器
-  useEffect(() => {
-    return () => {
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // 监听距离和排序方式变化，自动调用接口
-  // useEffect(() => {
-  //   // 只有当 distanceQuickFilter 有值时才调用接口
-  //   if (distanceQuickFilter?.distanceFilter !== undefined || distanceQuickFilter?.order !== undefined) {
-
-  //     // if (distanceQuickFilter?.quick !== "0") {
-  //       getMatchesData();
-  //     // }
-  //   }
-  // }, [distanceQuickFilter?.distanceFilter, distanceQuickFilter?.order]);
-
-  // 获取位置信息
-  const getLocation = async () => {
-    const location = await getCurrentLocationInfo();
-
-    // 保存位置到全局状态
-    updateState({ location });
-
-    // 同时更新用户位置到后端和 store
-    if (location && location.latitude && location.longitude) {
-      try {
-        await updateUserLocation(location.latitude, location.longitude);
-      } catch (error) {
-        console.error("更新用户位置失败:", error);
-      }
-    }
-    fetchGetGamesCount();
-
-    // 页面加载时获取数据
-    getMatchesData();
-    return location;
-  };
-
-  const refreshMatches = async () => {
-    await initialFilterSearch(true);
-  };
-
-  // 下拉刷新状态
-  const [refreshing, setRefreshing] = useState(false);
-
-  // ScrollView 下拉刷新处理函数
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    try {
-      // 调用刷新方法
-      await refreshMatches();
-    } catch (error) {
-      Taro.showToast({
-        title: "刷新失败，请重试",
-        icon: "error",
-        duration: 1000,
-      });
-    } finally {
-      // 使用 requestAnimationFrame 替代 setTimeout(0)，性能更好
-      requestAnimationFrame(() => {
-        setRefreshing(false);
-      });
-    }
-  };
-
-  /**
-   * @description 综合筛选确认
-   * @returns
-   */
-  const handleFilterConfirm = () => {
-    toggleShowPopup();
-    getMatchesData();
-  };
-
-  /**
-   * @description 综合筛选弹框
-   * @returns
-   */
-  const toggleShowPopup = () => {
-    updateListPageState({
-      isShowFilterPopup: !isShowFilterPopup,
-    });
-  };
-
-  /**
-   * @description 更新筛选条件
-   * @param {Record<string, any>} params 筛选项
-   */
-  const handleUpdateFilterOptions = (params: Record<string, any>) => {
-    updateFilterOptions(params);
-  };
-
-  const handleSearchChange = () => {};
-
-  // 距离筛选
-  const handleDistanceOrQuickChange = (name, value) => {
-    updateDistanceQuickFilter({
-      [name]: value,
-    });
-    // updateListPageState({
-    //   distanceQuickFilter: {
-    //     ...distanceQuickFilter,
-    //     [name]: value,
-    //   },
-    // });
-  };
-
-  const handleSearchClick = () => {
-    Taro.navigateTo({
-      url: "/game_pages/search/index",
-    });
-  };
-
-  // ====== 分享 测试 ======
-  // const [shareImagePath, setShareImagePath] = useState('')
-
-  // const handleShare = (imagePath: string) => {
-  //   console.log('===imagePath', imagePath)
-
-  //   // 避免重复设置相同的图片路径
-  //   if (imagePath && imagePath !== shareImagePath) {
-  //     setShareImagePath(imagePath)
-
-  //     // 图片生成完成后，显示分享菜单
-  //     Taro.showShareMenu({
-  //       withShareTicket: true,
-  //       success: () => {
-  //         console.log('分享菜单显示成功')
-  //       },
-  //       fail: (error) => {
-  //         console.error('分享菜单显示失败:', error)
-  //       }
-  //     })
-  //   }
-  // }
-
-  // // 页面级分享钩子
-  // useShareAppMessage(() => {
-  //   console.log('页面分享给好友，图片路径:', shareImagePath)
-  //   return {
-  //     title: '列表页-邀你加入球局',
-  //     path: '/game_pages/list/index',
-  //     imageUrl: shareImagePath || ''
-  //   }
-  // })
-
-  // useShareTimeline(() => {
-  //   console.log('页面分享到朋友圈，图片路径:', shareImagePath)
-  //   return {
-  //     title: '列表页-邀你加入球局',
-  //     query: 'from=timeline',
-  //     imageUrl: shareImagePath || ''
-  //   }
-  // })
-  // 初始化字典数据
-  const initDictionaryData = async () => {
-    try {
-      const { fetchDictionary } = useDictionaryStore.getState();
-      await fetchDictionary();
-    } catch (error) {
-      console.error("初始化字典数据失败:", error);
-    }
-  };
-
-  useEffect(() => {
-    initDictionaryData();
-  }, []);
-
-  // useEffect(() => {
-  //   generateShareImage({
-  //     userAvatar: "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg",
-  //     userNickname: "华巴抡卡",
-  //     gameType: "单打",
-  //     skillLevel: "NTRP 2.5 - 3.0",
-  //     gameDate: "6月20日(周五)",
-  //     gameTime: "下午5点 2小时",
-  //     venueName: "因乐驰网球俱乐部(嘉定江桥万达店)",
-  //     venueImages: ["https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg",
-  //       //"https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg"
-  //     ],
-  //     playerImage: "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg"
-  //   }).then((imagePath) => {
-  //     console.log('===imagePath666', imagePath)
-  //     if (imagePath) {
-  //       setShareImagePath(imagePath)
-  //     }
-  //   })
-  // }, [])
-
-  const area_city = area?.at(-2) || "上海"; // 设置默认值，避免条件渲染的突然切换
-
-  function renderCityQrcode() {
-    let item = cityQrCode.find((item) => item.city_name === area_city);
-    if (!item) item = cityQrCode.find((item) => item.city_name === "其他");
-    return (
-      <View className={styles.cqContainer}>
-        {item ? (
-          <View className={styles.wrapper}>
-            <View className={styles.tips}>
-              <Text className={styles.tip1}>当前城市暂无球局</Text>
-              <Text className={styles.tip2}>
-                加入城市球友群，获得最新球局消息
-              </Text>
-            </View>
-            <View className={styles.qrcodeWrappper}>
-              <Image
-                className={styles.qrcode}
-                src={item.qr_code_url}
-                mode="widthFix"
-                onClick={() => {
-                  saveImage(item.qr_code_url);
-                }}
-              />
-              <Text className={styles.qrcodeTip}>
-                点击图片保存，使用微信扫码加入群聊
-              </Text>
-            </View>
-          </View>
-        ) : (
-          <View>
-            <Text>当前城市暂无球局, 敬请期待</Text>
-          </View>
-        )}
-      </View>
-    );
-  }
-
-  return (
-    <>
-      {/* 自定义导航 */}
-      <HomeNavbar
-        config={{
-          showInput: isShowInputCustomerNavBar,
-        }}
-        onCityPickerVisibleChange={handleCityPickerVisibleChange}
-        onScrollToTop={scrollToTop}
-      />
-      {area_city !== "上海" ? (
-        renderCityQrcode()
-      ) : (
-        <View ref={scrollContextRef}>
-          {/* 列表内容 */}
-          <View className={styles.listPage} style={{ paddingTop: totalHeight }}>
-            {/* 综合筛选 */}
-            {isShowFilterPopup && (
-              <View>
-                <FilterPopup
-                  loading={loading}
-                  onCancel={toggleShowPopup}
-                  onConfirm={handleFilterConfirm}
-                  onChange={handleUpdateFilterOptions}
-                  filterOptions={filterOptions}
-                  onClear={clearFilterOptions}
-                  visible={isShowFilterPopup}
-                  onClose={toggleShowPopup}
-                  statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
-                />
-              </View>
-            )}
-            {/* 固定在顶部的搜索框和筛选 */}
-            <View className={styles.fixedHeader}>
-              {/* 搜索框 - 可隐藏 */}
-              <View
-                className={`${styles.listTopSearchWrapper} ${
-                  showSearchBar ? styles.show : styles.hide
-                }`}
-              >
-                <SearchBar
-                  handleFilterIcon={toggleShowPopup}
-                  isSelect={filterCount > 0}
-                  filterCount={filterCount}
-                  onChange={handleSearchChange}
-                  value={searchValue}
-                  onInputClick={handleSearchClick}
-                />
-              </View>
-              {/* 筛选 - 始终显示，固定在原位置 */}
-              <View className={styles.listTopFilterWrapper}>
-                <DistanceQuickFilter
-                  cityOptions={distanceData}
-                  quickOptions={quickFilterData}
-                  onChange={handleDistanceOrQuickChange}
-                  cityName="distanceFilter"
-                  quickName="order"
-                  cityValue={distanceQuickFilter?.distanceFilter}
-                  quickValue={distanceQuickFilter?.order}
-                  onMenuVisibleChange={handleDistanceFilterVisibleChange}
-                />
-              </View>
-            </View>
-
-            {/* 可滚动的列表内容 */}
-            <ScrollView
-              ref={scrollViewRef}
-              scrollY
-              scrollTop={scrollTop}
-              className={styles.listScrollView}
-              scrollWithAnimation
-              enhanced
-              showScrollbar={false}
-              refresherEnabled={true}
-              refresherTriggered={refreshing}
-              onRefresherRefresh={handleRefresh}
-              lowerThreshold={100}
-              onScrollToLower={async () => {
-                // 防止重复调用，检查 loading 状态和是否正在加载更多
-                if (
-                  !loading &&
-                  !loadingMoreRef.current &&
-                  listPageState?.isHasMoreData
-                ) {
-                  loadingMoreRef.current = true;
-                  try {
-                    await loadMoreMatches();
-                  } catch (error) {
-                    console.error("加载更多失败:", error);
-                  } finally {
-                    // 接口完成后重置状态，允许下次加载
-                    loadingMoreRef.current = false;
-                  }
-                }
-              }}
-              onScroll={handleScrollViewScroll}
-            >
-              <ListContainer
-                data={matches}
-                recommendList={recommendList}
-                loading={loading}
-                isShowNoData={isShowNoData}
-                error={error}
-                reload={refreshMatches}
-                loadMoreMatches={loadMoreMatches}
-                evaluateFlag
-              />
-            </ScrollView>
-          </View>
-        </View>
-      )}
-      <GuideBar
-        currentPage="list"
-        guideBarClassName={`${styles.guideBarList} ${
-          guideBarZIndex === "low"
-            ? styles.guideBarLowZIndex
-            : styles.guideBarHighZIndex
-        }`}
-        onPublishMenuVisibleChange={handlePublishMenuVisibleChange}
-      />
-    </>
-  );
-};
-
-export default ListPage;

src/main_pages/components/MessagePageContent.module.scss

@@ -1,6 +1,6 @@
 @use "~@/scss/images.scss" as img;
 
-.message-container {
+.messageContainer {
   width: 100%;
   height: 100vh;
   box-sizing: border-box;
@@ -10,7 +10,7 @@
 
 
   // 分类标签区
-  .category-tabs {
+  .categoryTabs {
     display: flex;
     align-items: stretch;
     justify-content: space-between;
@@ -19,19 +19,19 @@
     box-sizing: border-box;
     height: 124px;
 
-    .tab-item {
+    .tabItem {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: 161px;
 
-      .tab-icon-wrapper {
+      .tabIconWrapper {
         position: relative;
         width: 56px;
         height: 56px;
 
-        .tab-icon {
+        .tabIcon {
           width: 56px;
           height: 56px;
           border-radius: 56px;
@@ -61,14 +61,14 @@
         }
       }
 
-      .tab-icon {
+      .tabIcon {
         width: 56px;
         height: 56px;
         border-radius: 56px;
         transition: all 0.3s;
       }
 
-      .tab-text {
+      .tabText {
         font-family: "PingFang SC";
         font-weight: 600;
         font-size: 16px;
@@ -77,14 +77,14 @@
       }
 
       &.active {
-        .tab-icon {
+        .tabIcon {
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
           transform: scale(1.05);
         }
       }
 
       &:active {
-        .tab-icon {
+        .tabIcon {
           transform: scale(0.95);
         }
       }
@@ -92,14 +92,14 @@
   }
 
   // 消息列表
-  // .message-list {
+  // .messageList {
   //   flex: 1;
   //   overflow: hidden;
   //   box-sizing: border-box;
   //   // margin-bottom:100px;
   //   background-color: none !important;
 
-  //   .message-list-content {
+  //   .messageListContent {
   //     display: flex;
   //     flex-direction: column;
   //     padding: 12px 12px 112px;
@@ -113,10 +113,10 @@
   // }
 
   // 消息滚动区域
-  .message-scroll {
+  .messageScroll {
     flex: 1;
     overflow: hidden;
-    .message-cards {
+    .messageCards {
       padding: 12px;
       display: flex;
       flex-direction: column;
@@ -125,7 +125,7 @@
     }
 
     // 系统消息卡片
-    .message-card {
+    .messageCard {
       background: #ffffff;
       border: 0.5px solid rgba(0, 0, 0, 0.08);
       border-radius: 20px;
@@ -139,10 +139,10 @@
         opacity: 0.95;
       }
 
-      .card-title-row {
+      .cardTitleRow {
         padding: 12px 15px 0;
 
-        .card-title {
+        .cardTitle {
           font-family: "PingFang SC";
           font-weight: 600;
           font-size: 16px;
@@ -151,13 +151,13 @@
         }
       }
 
-      .card-time-row {
+      .cardTimeRow {
         padding: 4px 15px 0;
         display: flex;
         align-items: center;
         gap: 2px;
 
-        .card-time {
+        .cardTime {
           font-family: "PingFang SC";
           font-weight: 400;
           font-size: 12px;
@@ -166,13 +166,13 @@
         }
       }
 
-      .card-content-row {
+      .cardContentRow {
         padding: 8px 15px 0;
         display: flex;
         align-items: stretch;
         gap: 2px;
 
-        .card-content {
+        .cardContent {
           font-family: "PingFang SC";
           font-weight: 400;
           font-size: 14px;
@@ -182,22 +182,22 @@
         }
       }
 
-      .card-footer {
+      .cardFooter {
         padding: 12px 15px 0;
 
-        .footer-divider {
+        .footerDivider {
           height: 0.5px;
           background: rgba(0, 0, 0, 0.08);
           margin-bottom: 12px;
           width: 100%;
         }
 
-        .footer-action {
+        .footerAction {
           display: flex;
           justify-content: space-between;
           align-items: center;
 
-          .action-text {
+          .actionText {
             font-family: "PingFang SC";
             font-weight: 600;
             font-size: 14px;
@@ -205,7 +205,7 @@
             color: rgba(0, 0, 0, 0.85);
           }
 
-          .action-arrow {
+          .actionArrow {
             position: relative;
 
             .img {
@@ -221,13 +221,13 @@
     }
 
     // 到底了提示
-    .bottom-tip {
+    .bottomTip {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 24px 0 12px;
 
-      .tip-text {
+      .tipText {
         font-family: "PingFang SC";
         font-weight: 400;
         font-size: 14px;
@@ -238,7 +238,7 @@
   }
 
   // 悬浮新建消息按钮
-  .floating-button {
+  .floatingButton {
     position: fixed;
     right: 12px;
     bottom: 132px;
@@ -262,7 +262,7 @@
       transform: scale(0.92);
     }
 
-    .button-icon {
+    .buttonIcon {
       width: 36px;
       height: 36px;
       position: relative;

src/main_pages/components/MessagePageContent.tsx

@@ -7,7 +7,7 @@ import Taro from "@tarojs/taro";
 import { useGlobalState } from "@/store/global";
 import { navigateTo } from "@/utils/navigation";
 import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
-import "@/other_pages/message/index.scss";
+import styles from "./MessagePageContent.module.scss";
 
 interface MessageItem {
   id: string;
@@ -127,49 +127,49 @@ const MessagePageContent = () => {
   };
 
   return (
-    <View className="message-container" style={{ paddingTop: `${totalHeight}px` }}>
+    <View className={styles.messageContainer} style={{ paddingTop: `${totalHeight}px` }}>
-      <View className="category-tabs">
+      <View className={styles.categoryTabs}>
         <View
-          className={`tab-item ${activeTab === "comment" ? "active" : ""}`}
+          className={`${styles.tabItem} ${activeTab === "comment" ? styles.active : ""}`}
           onClick={() => handleTabClick("comment")}
         >
-          <View className="tab-icon-wrapper">
+          <View className={styles.tabIconWrapper}>
             <Image
-              className="tab-icon"
+              className={styles.tabIcon}
               src={require('@/static/message/comment-icon.svg')}
               mode="aspectFit"
             />
             {(reddotInfo?.comment_unread_count || 0) > 0 && (
-              <View className="badge">
+              <View className={styles.badge}>
-                {(reddotInfo?.comment_unread_count || 0) > 99 ? '99+' : reddotInfo?.comment_unread_count}
+                {`+${(reddotInfo?.comment_unread_count || 0) > 99 ? 99 : reddotInfo?.comment_unread_count}`}
               </View>
             )}
           </View>
-          <Text className="tab-text">评论和回复</Text>
+          <Text className={styles.tabText}>评论和回复</Text>
         </View>
         <View
-          className={`tab-item ${activeTab === "follow" ? "active" : ""}`}
+          className={`${styles.tabItem} ${activeTab === "follow" ? styles.active : ""}`}
           onClick={() => handleTabClick("follow")}
         >
-          <View className="tab-icon-wrapper">
+          <View className={styles.tabIconWrapper}>
             <Image
-              className="tab-icon"
+              className={styles.tabIcon}
               src={require('@/static/message/follow-icon.svg')}
               mode="aspectFit"
             />
             {(reddotInfo?.follow_unread_count || 0) > 0 && (
-              <View className="badge">
+              <View className={styles.badge}>
-                {(reddotInfo?.follow_unread_count || 0) > 99 ? '99+' : reddotInfo?.follow_unread_count}
+                {`+${(reddotInfo?.follow_unread_count || 0) > 99 ? 99 : reddotInfo?.follow_unread_count}`}
               </View>
             )}
           </View>
-          <Text className="tab-text">新增关注</Text>
+          <Text className={styles.tabText}>新增关注</Text>
         </View>
       </View>
 
       <ScrollView
         scrollY
-        className="message-scroll"
+        className={styles.messageScroll}
         scrollWithAnimation
         enhanced
         showScrollbar={false}
@@ -180,32 +180,32 @@ const MessagePageContent = () => {
         onRefresherRefresh={handleRefresh}
       >
         {filteredMessages.length > 0 ? (
-          <View className="message-cards">
+          <View className={styles.messageCards}>
             {filteredMessages.map((message) => (
-              <View className="message-card" key={message.id} onClick={() => handleViewDetail(message)}>
+              <View className={styles.messageCard} key={message.id} onClick={() => handleViewDetail(message)}>
-                <View className="card-title-row">
+                <View className={styles.cardTitleRow}>
-                  <Text className="card-title">{message.title}</Text>
+                  <Text className={styles.cardTitle}>{message.title}</Text>
                 </View>
-                <View className="card-time-row">
+                <View className={styles.cardTimeRow}>
-                  <Text className="card-time">{formatRelativeTime(message.create_time)}</Text>
+                  <Text className={styles.cardTime}>{formatRelativeTime(message.create_time)}</Text>
                 </View>
-                <View className="card-content-row">
+                <View className={styles.cardContentRow}>
-                  <Text className="card-content">{message.content}</Text>
+                  <Text className={styles.cardContent}>{message.content}</Text>
                 </View>
-                <View className="card-footer">
+                <View className={styles.cardFooter}>
-                  <View className="footer-divider"></View>
+                  <View className={styles.footerDivider}></View>
-                  <View className="footer-action">
+                  <View className={styles.footerAction}>
-                    <Text className="action-text">查看详情</Text>
+                    <Text className={styles.actionText}>查看详情</Text>
-                    <View className="action-arrow">
+                    <View className={styles.actionArrow}>
-                      <Image className="img" src={require('@/static/message/ar-right.svg')} ></Image>
+                      <Image className={styles.img} src={require('@/static/message/ar-right.svg')} ></Image>
                     </View>
                   </View>
                 </View>
               </View>
             ))}
             {filteredMessages.length > 0 && (
-              <View className="bottom-tip">
+              <View className={styles.bottomTip}>
-                <Text className="tip-text">到底了</Text>
+                <Text className={styles.tipText}>到底了</Text>
               </View>
             )}
           </View>

src/main_pages/components/MyselfPageContent.module.scss

@@ -0,0 +1,393 @@
+@use "../../scss/common.scss" as *;
+
+// 背景渐变过渡动画
+@keyframes backgroundGradient {
+  0% {
+    background: #ffffff;
+  }
+  100% {
+    background: radial-gradient(
+      circle at 50% 0,
+      /* 光晕圆心在顶部中间 */ rgba(191, 255, 239, 0.9) 0px,
+      /* 中间更深的浅蓝 */ rgba(191, 255, 239, 0.5) 200px,
+      /* 100px 处开始淡化 */ #fafafa 300px,
+      /* 到 200px 变成白色 */ #fafafa 100% /* 200px 以下全白 */
+    );
+  }
+}
+
+// 个人页面样式
+.myselfPage {
+  height: 100vh;
+  position: relative;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background-color: #fafafa;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+    color: transparent;
+  }
+}
+
+// MyselfPageContent 组件使用的类名
+.myselfPageContentMain {
+  animation: backgroundGradient 0s ease-in-out forwards;
+  z-index: 5;
+  flex: 1;
+  margin-top: 0;
+  box-sizing: border-box;
+  padding-bottom: 15px;
+  // padding-top 由内联样式控制
+
+  // 用户信息区域
+  .userInfoSection {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 0 15px;
+
+    // 加载状态
+    .loadingContainer {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 40px 0;
+
+      .loadingText {
+        @include text-style(16px, 400, 1.4em);
+        color: $color-primary-lightest;
+      }
+    }
+
+    // 统计数据
+    .statsSection {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      .statsContainer {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+
+        .statItem {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .statNumber {
+            @include text-medium;
+          }
+
+          .statLabel {
+            @include text-small;
+          }
+        }
+      }
+    }
+
+    // 标签和简介
+    .tagsBioSection {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .tagsContainer {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+
+        .tagItem {
+          @include tag-base;
+
+          .tagIcon {
+            width: 12px;
+            height: 12px;
+          }
+
+          .tagText {
+            @include text-tag;
+          }
+        }
+      }
+
+      .bioText {
+        @include text-body;
+        white-space: pre-line;
+      }
+    }
+
+    // 球局订单和收藏功能
+    .quickActionsSection {
+      margin-bottom: 16px;
+
+      .actionCard {
+        @include card-base;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        height: 48px;
+
+        .actionContent {
+          height: 100%;
+          flex: 1;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          cursor: pointer;
+          transition: background-color 0.3s ease;
+
+          .actionIcon {
+            width: 20px;
+            height: 20px;
+          }
+
+          .actionText {
+            @include text-style(15px, 600, 1.4em);
+            color: $color-primary;
+          }
+        }
+
+        .actionDivider {
+          width: 1px;
+          height: 16px;
+          background: $color-primary-lightest-5;
+        }
+      }
+    }
+  }
+
+  .testEntryCardBox {
+    padding: 0 15px;
+  }
+
+  // 球局类型标签页
+  .gameTabsSection {
+    margin-bottom: 0;
+    .tabContainer {
+      display: flex;
+      gap: 16px;
+      padding: 12px 15px;
+
+      .tabItem {
+        padding: 12px 0;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        .tabText {
+          @include text-primary;
+          transition: color 0.3s ease;
+        }
+
+        &.active {
+          .tabText {
+            color: $color-primary;
+          }
+        }
+
+        &:not(.active) {
+          .tabText {
+            color: $color-primary-lightest-2;
+          }
+        }
+      }
+    }
+  }
+
+  // 球局列表区域
+  .gameListSection {
+    .dateHeader {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 10px 15px;
+      margin-bottom: 16px;
+
+      .dateText {
+        @include text-style(14px, 600, 1.4em, 2.71%);
+        color: $color-primary-light;
+      }
+
+      .separator {
+        @include text-style(18px, 400, 1.4em, 2.11%);
+        color: $color-primary-lightest;
+      }
+
+      .weekdayText {
+        @include text-style(14px, 600, 1.4em, 2.71%);
+        color: $color-primary-light;
+      }
+    }
+
+    // 球局卡片
+    .gameCards {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      padding: 0 5px 15px;
+
+      .gameCard {
+        @include card-base;
+        padding: 0 0 12px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        position: relative;
+
+        &:active {
+          transform: scale(0.98);
+        }
+
+        // 球局标题和类型
+        .gameHeader {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12px 15px 0;
+
+          .gameTitle {
+            @include text-style(16px, 600, 1.5em);
+            color: $color-primary;
+          }
+
+          .gameTypeIcon {
+            width: 16px;
+            height: 16px;
+
+            .typeIcon {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+
+        // 球局时间
+        .gameTime {
+          padding: 6px 15px 0;
+
+          .timeText {
+            @include text-caption;
+          }
+        }
+
+        // 球局地点和类型
+        .gameLocation {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          padding: 4px 15px 0;
+
+          .locationText,
+          .typeText,
+          .distanceText {
+            @include text-caption;
+          }
+
+          .separator {
+            @include text-style(14px, 400, 1.3em);
+            color: $color-text-tertiary;
+          }
+        }
+
+        // 球局图片
+        .gameImages {
+          position: absolute;
+          top: 11px;
+          right: 5px;
+          width: 100px;
+          height: 100px;
+          box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
+
+          .gameImage {
+            position: absolute;
+            width: 56.44px;
+            height: 56.44px;
+            border-radius: 9px;
+            border: 1.5px solid $color-white;
+
+            &:nth-child(1) {
+              top: 4.18px;
+              left: 19.18px;
+            }
+
+            &:nth-child(2) {
+              top: 26.5px;
+              left: 38px;
+              width: 61.86px;
+              height: 61.86px;
+            }
+
+            &:nth-child(3) {
+              top: 32.5px;
+              left: 0;
+              width: 62.04px;
+              height: 62.04px;
+            }
+          }
+        }
+
+        // 球局信息标签
+        .gameTags {
+          display: flex;
+          flex-direction: row;
+          gap: 6px;
+          padding: 8px 15px 0;
+
+          .participantsInfo {
+            display: flex;
+            gap: 4px;
+
+            .avatars {
+              display: flex;
+              align-items: center;
+              gap: -8px;
+
+              .participantAvatar {
+                @include avatar-base(20px);
+                border: 1px solid $color-white;
+              }
+            }
+
+            .participantsCount {
+              @include tag-base;
+              padding: 6px;
+
+              .countText {
+                @include text-tag;
+              }
+            }
+          }
+
+          .gameInfoTags {
+            display: flex;
+            gap: 4px;
+
+            .infoTag {
+              @include tag-base;
+
+              .tagText {
+                @include text-tag;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .endedGameText {
+    font-family: "PingFang SC";
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 1.4em;
+    letter-spacing: 1.9%;
+    color: rgba(0, 0, 0, 0.85);
+    transition: color 0.3s ease;
+    padding: 24px 15px;
+  }
+}

src/main_pages/components/MyselfPageContent.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { View, Text, Image, ScrollView } from "@tarojs/components";
 import Taro from "@tarojs/taro";
-import "@/user_pages/myself/index.scss";
+import styles from "./MyselfPageContent.module.scss";
 import { UserInfoCard } from "@/components/UserInfo/index";
 import { UserService } from "@/services/userService";
 import ListContainer from "@/container/listContainer";
@@ -139,12 +139,12 @@ const MyselfPageContent: React.FC = () => {
   };
 
   return (
-    <View className="myself_page">
+    <View className={styles.myselfPage}>
       <View
-        className="myself_page_content_main"
+        className={styles.myselfPageContentMain}
         style={{ paddingTop: `${totalHeight}px` }}
       >
-        <View className="user_info_section">
+        <View className={styles.userInfoSection}>
           <UserInfoCard
             editable={is_current_user}
             user_info={user_info}
@@ -153,51 +153,51 @@ const MyselfPageContent: React.FC = () => {
             on_follow={handle_follow}
             onTab={handleOnTab}
           />
-          <View className="quick_actions_section">
+          <View className={styles.quickActionsSection}>
-            <View className="action_card">
+            <View className={styles.actionCard}>
-              <View className="action_content" onClick={handle_game_orders}>
+              <View className={styles.actionContent} onClick={handle_game_orders}>
                 <Image
-                  className="action_icon"
+                  className={styles.actionIcon}
                   src={require("@/static/userInfo/order_btn.svg")}
                 />
-                <Text className="action_text">球局订单</Text>
+                <Text className={styles.actionText}>球局订单</Text>
               </View>
-              <View className="action_divider"></View>
+              <View className={styles.actionDivider}></View>
-              <View className="action_content" onClick={handle_wallet}>
+              <View className={styles.actionContent} onClick={handle_wallet}>
                 <Image
-                  className="action_icon"
+                  className={styles.actionIcon}
                   src={require("@/static/userInfo/wallet.svg")}
                 />
-                <Text className="action_text">钱包</Text>
+                <Text className={styles.actionText}>钱包</Text>
               </View>
             </View>
           </View>
         </View>
 
-        <View className="test-entry-card-box">
+        <View className={styles.testEntryCardBox}>
           <NTRPTestEntryCard type={EvaluateScene.user} />
         </View>
 
-        <View className="game_tabs_section">
+        <View className={styles.gameTabsSection}>
-          <View className="tab_container">
+          <View className={styles.tabContainer}>
             <View
-              className={`tab_item ${active_tab === "hosted" ? "active" : ""}`}
+              className={`${styles.tabItem} ${active_tab === "hosted" ? styles.active : ""}`}
               onClick={() => setActiveTab("hosted")}
             >
-              <Text className="tab_text">我主办的</Text>
+              <Text className={styles.tabText}>我主办的</Text>
             </View>
             <View
-              className={`tab_item ${
+              className={`${styles.tabItem} ${
-                active_tab === "participated" ? "active" : ""
+                active_tab === "participated" ? styles.active : ""
               }`}
               onClick={() => setActiveTab("participated")}
             >
-              <Text className="tab_text">我参与的</Text>
+              <Text className={styles.tabText}>我参与的</Text>
             </View>
           </View>
         </View>
 
-        <View className="game_list_section">
+        <View className={styles.gameListSection}>
           <ScrollView scrollY>
             <ListContainer
               data={game_records}
@@ -218,8 +218,8 @@ const MyselfPageContent: React.FC = () => {
           </ScrollView>
         </View>
 
-        <View className="ended_game_text">往期球局</View>
+        <View className={styles.endedGameText}>往期球局</View>
-        <View className="game_list_section">
+        <View className={styles.gameListSection}>
           <ScrollView scrollY>
             <ListContainer
               data={ended_game_records}

src/other_pages/message/index.config.ts

@@ -1,5 +0,0 @@
-export default definePageConfig({
-  navigationBarTitleText: '消息',
-  // navigationBarBackgroundColor: '#FAFAFA',
-  navigationStyle: 'custom',
-})

src/other_pages/message/index.tsx

@@ -1,245 +0,0 @@
-import { useState, useEffect } from "react";
-import { View, Text, Image, ScrollView } from "@tarojs/components";
-import GuideBar from "@/components/GuideBar";
-import { withAuth, EmptyState, GeneralNavbar } from "@/components";
-import noticeService from "@/services/noticeService";
-import { formatRelativeTime } from "@/utils/timeUtils";
-import Taro, { useDidShow } from "@tarojs/taro";
-import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
-import "./index.scss";
-
-// 消息类型定义
-interface MessageItem {
-  id: string;
-  notification_type: string;
-  title: string;
-  content: string;
-  create_time: string;
-  is_read: number;
-  related_user_avatar?: string;
-  related_user_nickname?: string;
-  activity_image?: string;
-  jump_url?: string;
-}
-
-// 消息分类类型
-type MessageCategory = "comment" | "follow";
-
-const Message = () => {
-  const [activeTab, setActiveTab] = useState<MessageCategory | null>(null);
-  const [messageList, setMessageList] = useState<MessageItem[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [reachedBottom, setReachedBottom] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-
-  // 从 store 获取红点信息
-  const reddotInfo = useReddotInfo();
-  const fetchReddotInfo = useFetchReddotInfo();
-
-  // 获取消息列表
-  const getNoticeList = async () => {
-    if (loading) return;
-    setLoading(true);
-    try {
-      const res = await noticeService.getNotificationList({});
-      if (res.code === 0) {
-        setMessageList(res.data.list || []);
-      }
-    } catch (e) {
-      Taro.showToast({
-        title: "获取列表失败，请重试",
-        icon: "none",
-        duration: 2000,
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getNoticeList();
-    fetchReddotInfo();
-  }, []);
-
-  // 每次页面显示时刷新红点信息
-  useDidShow(() => {
-    fetchReddotInfo();
-  });
-
-  // 过滤系统消息
-  const filteredMessages = messageList;
-
-  // 处理分类标签点击
-  const handleTabClick = (tab: MessageCategory) => {
-    // 点击评论标签跳转到评论和回复页面
-    if (tab === "comment") {
-      Taro.navigateTo({
-        url: "/other_pages/comment_reply/index",
-      });
-      return;
-    }
-
-    // 点击关注标签跳转到新增关注页面
-    if (tab === "follow") {
-      Taro.navigateTo({
-        url: "/other_pages/new_follow/index",
-      });
-      return;
-    }
-
-    setActiveTab(activeTab === tab ? null : tab);
-  };
-
-  // 处理查看详情
-  const handleViewDetail = (message: MessageItem) => {
-
-    if (!message.jump_url) {
-      console.log("暂无跳转链接");
-      return;
-    }
-
-    Taro.navigateTo({
-      url: message.jump_url,
-    }).catch(() => {
-      Taro.showToast({
-        title: "页面不存在",
-        icon: "none",
-        duration: 2000,
-      });
-    });
-  };
-
-  // 处理滚动到底部
-  const handleScrollToLower = () => {
-    if (!reachedBottom && filteredMessages.length > 0) {
-      setReachedBottom(true);
-      // 2秒后隐藏提示
-      setTimeout(() => {
-        setReachedBottom(false);
-      }, 2000);
-    }
-  };
-
-  // 处理下拉刷新
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    try {
-      const res = await noticeService.getNotificationList({});
-      if (res.code === 0) {
-        setMessageList(res.data.list || []);
-      }
-    } catch (e) {
-      Taro.showToast({
-        title: "刷新失败",
-        icon: "none",
-        duration: 2000,
-      });
-    } finally {
-      setRefreshing(false);
-    }
-  };
-
-
-  return (
-    <View className="message-container">
-      {/* 顶部导航栏 */}
-      <GeneralNavbar title="消息" showBack={false} showAvatar={true} />
-
-      {/* 分类标签 */}
-      <View className="category-tabs">
-        <View
-          className={`tab-item ${activeTab === "comment" ? "active" : ""}`}
-          onClick={() => handleTabClick("comment")}
-        >
-          <View className="tab-icon-wrapper">
-            <Image
-              className="tab-icon"
-              src={require('@/static/message/comment-icon.svg')}
-              mode="aspectFit"
-            />
-            {(reddotInfo?.comment_unread_count || 0) > 0 && (
-              <View className="badge">
-                {(reddotInfo?.comment_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.comment_unread_count || 0}`}
-              </View>
-            )}
-          </View>
-          <Text className="tab-text">评论和回复</Text>
-        </View>
-        <View
-          className={`tab-item ${activeTab === "follow" ? "active" : ""}`}
-          onClick={() => handleTabClick("follow")}
-        >
-          <View className="tab-icon-wrapper">
-            <Image
-              className="tab-icon"
-              src={require('@/static/message/follow-icon.svg')}
-              mode="aspectFit"
-            />
-            {(reddotInfo?.follow_unread_count || 0) > 0 && (
-              <View className="badge">
-                {(reddotInfo?.follow_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.follow_unread_count || 0}`}
-              </View>
-            )}
-          </View>
-          <Text className="tab-text">新增关注</Text>
-        </View>
-      </View>
-
-      {/* 系统消息卡片列表 */}
-      <ScrollView
-        scrollY
-        className="message-scroll"
-        scrollWithAnimation
-        enhanced
-        showScrollbar={false}
-        lowerThreshold={50}
-        onScrollToLower={handleScrollToLower}
-        refresherEnabled={true}
-        refresherTriggered={refreshing}
-        onRefresherRefresh={handleRefresh}
-      >
-        {filteredMessages.length > 0 ? (
-          <View className="message-cards">
-            {filteredMessages.map((message) => (
-              <View className="message-card" key={message.id} onClick={() => handleViewDetail(message)}>
-                <View className="card-title-row">
-                  <Text className="card-title">{message.title}</Text>
-                </View>
-                <View className="card-time-row">
-                  <Text className="card-time">{formatRelativeTime(message.create_time)}</Text>
-                </View>
-                <View className="card-content-row">
-                  <Text className="card-content">{message.content}</Text>
-                </View>
-                <View className="card-footer">
-                  <View className="footer-divider"></View>
-                  <View className="footer-action">
-                    <Text className="action-text">查看详情</Text>
-                    <View className="action-arrow">
-
-                      <Image className="img" src={require('@/static/message/ar-right.svg')} ></Image>
-
-                    </View>
-                  </View>
-                </View>
-              </View>
-            ))}
-            {/* 到底了提示 */}
-            {filteredMessages.length > 0 && (
-              <View className="bottom-tip">
-                <Text className="tip-text">到底了</Text>
-              </View>
-            )}
-          </View>
-        ) : (
-          <EmptyState text="暂无消息" />
-        )}
-      </ScrollView>
-
-      {/* 底部导航 */}
-      <GuideBar currentPage="message" />
-    </View>
-  );
-};
-
-export default withAuth(Message);

src/store/README.md

@@ -179,13 +179,6 @@ interface UserStats {
 
 ## 使用示例
 
-查看 `src/game_pages/list/index.tsx` 获取完整的使用示例，包括：
-
-- 用户信息展示
-- 统计数据实时更新
-- API 请求模拟
-- 加载状态管理
-- 数据持久化演示
 
 ## 扩展建议