合并分支

2025-08-23 15:23:50 +08:00
parent 8bc2fa8d97 2b7c9497c6
commit ff928bb8b6
31 changed files with 2251 additions and 3 deletions
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -2,6 +2,7 @@ export default defineAppConfig({
  pages: [
    'pages/publishBall/index',
    'pages/mapDisplay/index',
+    'pages/list/index',
    'pages/index/index'
  ],
  window: {
--- a/src/components/Bubble/BubbleItem.tsx
+++ b/src/components/Bubble/BubbleItem.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { BubbleOption } from './index';
+import styles from './bubbleItem.module.scss';
+
+export interface BubbleItemProps {
+  option: BubbleOption;
+  isSelected: boolean;
+  size: 'small' | 'medium' | 'large';
+  disabled: boolean;
+  onClick: (option: BubbleOption) => void;
+  itemClassName?: string;
+}
+
+const BubbleItem: React.FC<BubbleItemProps> = ({
+  option,
+  isSelected,
+  size,
+  disabled,
+  onClick,
+  itemClassName
+}) => {
+  return (
+    <button
+      className={`${styles.bubbleOption} ${size} ${isSelected ? styles.selected : ''} ${
+        option.disabled || disabled ? styles.disabled : ''
+      } ${itemClassName ? itemClassName : ''}`}
+      onClick={() => onClick(option)}
+      disabled={option.disabled || disabled}
+    >
+      {option.icon && <span className={ styles.bubbleIcon}>{option.icon}</span>}
+      <span className={styles.bubbleLabel}>{option.label}</span>
+      {option.description && <span className={ styles.bubbleDescription}>{option.description}</span>}
+    </button>
+  );
+};
+
+export default BubbleItem;
--- a/src/components/Bubble/README.md
+++ b/src/components/Bubble/README.md
@@ -0,0 +1,208 @@
+# Bubble 通用气泡组件
+
+一个高度可配置的气泡选择器组件，支持任何内容的选择，包括但不限于时间、地点、标签、分类等。
+
+## 特性
+
+- 🎯 支持单选和多选模式
+- 📱 三种布局方式：水平、垂直、网格
+- 🎨 三种尺寸：小、中、大
+- ♿ 支持禁用状态和图标描述
+- 🔄 支持受控和非受控模式
+- 📱 响应式设计，自动适应不同屏幕
+- 🎨 可自定义样式和类名
+
+## 基本用法
+
+### 室内外选择示例（如UI图所示）
+
+```tsx
+import React, { useState } from 'react';
+import Bubble, { BubbleOption } from './index';
+
+const LocationSelector: React.FC = () => {
+  const [selectedLocation, setSelectedLocation] = useState<string>('');
+
+  const locationOptions: BubbleOption[] = [
+    { id: 1, label: '室内', value: 'indoor' },
+    { id: 2, label: '室外', value: 'outdoor' },
+    { id: 3, label: '半室外', value: 'semi-outdoor' }
+  ];
+
+  return (
+    <Bubble
+      options={locationOptions}
+      value={selectedLocation}
+      onChange={(value) => setSelectedLocation(value as string)}
+      layout="horizontal"
+      size="medium"
+    />
+  );
+};
+```
+
+### 时间选择器示例
+
+```tsx
+const TimeSelector: React.FC = () => {
+  const [selectedTime, setSelectedTime] = useState<string>('');
+
+  const timeOptions: BubbleOption[] = [
+    { id: 1, label: '晨间 6:00-10:00', value: 'morning' },
+    { id: 2, label: '上午 10:00-12:00', value: 'forenoon' },
+    { id: 3, label: '中午 12:00-14:00', value: 'noon' },
+    { id: 4, label: '下午 14:00-18:00', value: 'afternoon' },
+    { id: 5, label: '晚上 18:00-22:00', value: 'evening' },
+    { id: 6, label: '夜间 22:00-24:00', value: 'night' }
+  ];
+
+  return (
+    <Bubble
+      options={timeOptions}
+      value={selectedTime}
+      onChange={(value) => setSelectedTime(value as string)}
+      layout="grid"
+      columns={3}
+      size="medium"
+    />
+  );
+};
+```
+
+### 多选模式
+
+```tsx
+const MultiSelectExample: React.FC = () => {
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const options: BubbleOption[] = [
+    { id: 1, label: '运动', value: 'sports' },
+    { id: 2, label: '音乐', value: 'music' },
+    { id: 3, label: '阅读', value: 'reading' },
+    { id: 4, label: '旅行', value: 'travel' }
+  ];
+
+  return (
+    <Bubble
+      options={options}
+      value={selectedValues}
+      onChange={(value) => setSelectedValues(value as string[])}
+      multiple={true}
+      layout="grid"
+      columns={2}
+      size="medium"
+    />
+  );
+};
+```
+
+### 带图标和描述
+
+```tsx
+const IconExample: React.FC = () => {
+  const [selectedValue, setSelectedValue] = useState<string>('');
+
+  const options: BubbleOption[] = [
+    { 
+      id: 1, 
+      label: '网球', 
+      value: 'tennis',
+      icon: '🎾',
+      description: '室内外均可'
+    },
+    { 
+      id: 2, 
+      label: '篮球', 
+      value: 'basketball',
+      icon: '🏀',
+      description: '室内场地'
+    }
+  ];
+
+  return (
+    <Bubble
+      options={options}
+      value={selectedValue}
+      onChange={(value) => setSelectedValue(value as string)}
+      layout="vertical"
+      size="large"
+    />
+  );
+};
+```
+
+## API
+
+### BubbleProps
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| options | `BubbleOption[]` | - | 选项数组 |
+| value | `string \| number \| (string \| number)[]` | - | 当前选中的值 |
+| onChange | `(value, option) => void` | - | 选择变化时的回调 |
+| multiple | `boolean` | `false` | 是否支持多选 |
+| layout | `'horizontal' \| 'vertical' \| 'grid'` | `'horizontal'` | 布局方式 |
+| columns | `number` | `3` | 网格布局的列数 |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 按钮尺寸 |
+| className | `string` | `''` | 自定义类名 |
+| style | `React.CSSProperties` | `{}` | 自定义样式 |
+| disabled | `boolean` | `false` | 是否禁用整个组件 |
+
+### BubbleOption
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| id | `string \| number` | - | 选项的唯一标识 |
+| label | `string` | - | 显示的文本 |
+| value | `string \| number` | - | 选项的值 |
+| disabled | `boolean` | `false` | 是否禁用 |
+| icon | `React.ReactNode` | - | 可选的图标 |
+| description | `string` | - | 可选的描述文本 |
+
+## 布局说明
+
+### 水平布局 (horizontal)
+- 适合选项较少的情况
+- 自动换行，响应式设计
+- 适合顶部导航、标签选择等
+
+### 垂直布局 (vertical)
+- 适合选项较多的情况
+- 每个选项占满一行
+- 适合侧边栏、设置页面等
+
+### 网格布局 (grid)
+- 适合选项较多且需要整齐排列的情况
+- 可自定义列数
+- 适合分类选择、时间选择等
+
+## 尺寸说明
+
+### 小尺寸 (small)
+- 适合紧凑的界面
+- 适合移动端或空间受限的场景
+
+### 中尺寸 (medium)
+- 默认尺寸，适合大多数场景
+- 平衡了可用性和美观性
+
+### 大尺寸 (large)
+- 适合需要突出显示的场景
+- 适合触摸设备或重要操作
+
+## 样式定制
+
+组件使用 SCSS 编写，可以通过以下方式自定义样式：
+
+1. 覆盖 CSS 变量
+2. 使用 `className` 和 `style` 属性
+3. 修改 SCSS 源文件
+
+## 注意事项
+
+- 在网格布局中，`columns` 属性控制列数，行数会根据选项数量自动计算
+- 多选模式下，`value` 应该是数组类型
+- 单选模式下，`value` 可以是字符串或数字类型
+- 组件会自动处理选中状态的样式变化
+- 支持图标和描述，让选项更加丰富
+- 响应式设计，自动适应不同屏幕尺寸
--- a/src/components/Bubble/USAGE.md
+++ b/src/components/Bubble/USAGE.md
@@ -0,0 +1,211 @@
+# 如何使用 Bubble 通用气泡组件
+
+## 在其他组件中导入
+
+```tsx
+import Bubble, { BubbleOption } from '@/components/Bubble';
+```
+
+## 基本使用示例
+
+### 1. 室内外选择（如UI图所示）
+
+```tsx
+import React, { useState } from 'react';
+import Bubble, { BubbleOption } from '@/components/Bubble';
+
+const MyPage: React.FC = () => {
+  const [selectedLocation, setSelectedLocation] = useState<string>('');
+
+  const locationOptions: BubbleOption[] = [
+    { id: 1, label: '室内', value: 'indoor' },
+    { id: 2, label: '室外', value: 'outdoor' },
+    { id: 3, label: '半室外', value: 'semi-outdoor' }
+  ];
+
+  return (
+    <div>
+      <h2>选择场地类型</h2>
+      <Bubble
+        options={locationOptions}
+        value={selectedLocation}
+        onChange={(value) => setSelectedLocation(value as string)}
+        layout="horizontal"
+        size="medium"
+      />
+      <p>您选择的场地类型: {selectedLocation}</p>
+    </div>
+  );
+};
+```
+
+### 2. 时间选择器
+
+```tsx
+const [selectedTime, setSelectedTime] = useState<string>('');
+
+const timeOptions: BubbleOption[] = [
+  { id: 1, label: '晨间 6:00-10:00', value: 'morning' },
+  { id: 2, label: '上午 10:00-12:00', value: 'forenoon' },
+  { id: 3, label: '中午 12:00-14:00', value: 'noon' },
+  { id: 4, label: '下午 14:00-18:00', value: 'afternoon' },
+  { id: 5, label: '晚上 18:00-22:00', value: 'evening' },
+  { id: 6, label: '夜间 22:00-24:00', value: 'night' }
+];
+
+<Bubble
+  options={timeOptions}
+  value={selectedTime}
+  onChange={(value) => setSelectedTime(value as string)}
+  layout="grid"
+  columns={3}
+  size="medium"
+/>
+```
+
+### 3. 多选模式
+
+```tsx
+const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+const options: BubbleOption[] = [
+  { id: 1, label: '运动', value: 'sports' },
+  { id: 2, label: '音乐', value: 'music' },
+  { id: 3, label: '阅读', value: 'reading' },
+  { id: 4, label: '旅行', value: 'travel' }
+];
+
+<Bubble
+  options={options}
+  value={selectedValues}
+  onChange={(value) => setSelectedValues(value as string[])}
+  multiple={true}
+  layout="grid"
+  columns={2}
+  size="medium"
+/>
+```
+
+### 4. 带图标和描述
+
+```tsx
+const [selectedSport, setSelectedSport] = useState<string>('');
+
+const sportOptions: BubbleOption[] = [
+  { 
+    id: 1, 
+    label: '网球', 
+    value: 'tennis',
+    icon: '🎾',
+    description: '室内外均可'
+  },
+  { 
+    id: 2, 
+    label: '篮球', 
+    value: 'basketball',
+    icon: '🏀',
+    description: '室内场地'
+  }
+];
+
+<Bubble
+  options={sportOptions}
+  value={selectedSport}
+  onChange={(value) => setSelectedSport(value as string)}
+  layout="vertical"
+  size="large"
+/>
+```
+
+### 5. 不同布局方式
+
+```tsx
+// 水平布局 - 适合选项较少
+<Bubble
+  options={options}
+  value={selectedValue}
+  onChange={handleChange}
+  layout="horizontal"
+  size="medium"
+/>
+
+// 垂直布局 - 适合选项较多
+<Bubble
+  options={options}
+  value={selectedValue}
+  onChange={handleChange}
+  layout="vertical"
+  size="medium"
+/>
+
+// 网格布局 - 适合需要整齐排列
+<Bubble
+  options={options}
+  value={selectedValue}
+  onChange={handleChange}
+  layout="grid"
+  columns={3}
+  size="medium"
+/>
+```
+
+### 6. 不同尺寸
+
+```tsx
+// 小尺寸 - 适合紧凑界面
+<Bubble
+  options={options}
+  value={selectedValue}
+  onChange={handleChange}
+  layout="horizontal"
+  size="small"
+/>
+
+// 中尺寸 - 默认尺寸
+<Bubble
+  options={options}
+  value={selectedValue}
+  onChange={handleChange}
+  layout="horizontal"
+  size="medium"
+/>
+
+// 大尺寸 - 适合触摸设备
+<Bubble
+  options={options}
+  value={selectedValue}
+  onChange={handleChange}
+  layout="horizontal"
+  size="large"
+/>
+```
+
+## 组件特性
+
+- **通用性**: 不局限于特定功能，可用于任何选择场景
+- **灵活布局**: 支持水平、垂直、网格三种布局方式
+- **多尺寸支持**: 小、中、大三种尺寸适应不同场景
+- **丰富内容**: 支持图标和描述，让选项更加丰富
+- **响应式设计**: 自动适应不同屏幕尺寸
+- **状态管理**: 内置选中状态管理，支持单选和多选
+- **类型安全**: 完整的 TypeScript 类型定义
+- **可访问性**: 支持键盘导航和屏幕阅读器
+
+## 常见使用场景
+
+1. **场地选择**: 室内/室外/半室外
+2. **时间选择**: 时间段、日期范围
+3. **分类选择**: 兴趣爱好、技能标签
+4. **设置选项**: 主题、语言、通知设置
+5. **筛选条件**: 价格范围、评分、距离等
+6. **导航菜单**: 顶部导航、侧边栏菜单
+
+## 注意事项
+
+1. 确保传入的 `options` 数组不为空
+2. 多选模式下，`value` 应该是数组类型
+3. 单选模式下，`value` 可以是字符串或数字类型
+4. 组件会自动处理选中状态的样式变化
+5. 支持图标和描述，让选项更加丰富
+6. 响应式设计，自动适应不同屏幕尺寸
+7. 可以通过 `disabled` 属性禁用整个组件或单个选项
--- a/src/components/Bubble/bubbleItem.module.scss
+++ b/src/components/Bubble/bubbleItem.module.scss
@@ -0,0 +1,92 @@
+.bubbleOption {
+  position: relative;
+  border: 1px solid #e5e5e5;
+  outline: none; // 移除浏览器默认的outline
+  background: #ffffff;
+  color: #333333;
+  font-weight: 400;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  font-size: 12px;
+  border-radius: 28px;
+  margin: 0;
+  width: 116px;
+  height: 28px;
+
+  // 移除浏览器默认样式
+  &:focus {
+    outline: none;
+    border: none;
+  }
+
+  &::after {
+    outline: none;
+    border: none;
+  }
+
+  &:active {
+    outline: none;
+    border: none;
+  }
+
+  // 尺寸变体
+  &.small {
+    font-size: 12px;
+  }
+
+  &.medium {
+    padding: 12px 16px;
+    min-height: 44px;
+    font-size: 14px;
+  }
+
+  &.large {
+    padding: 16px 20px;
+    min-height: 56px;
+    font-size: 16px;
+  }
+
+  &.selected {
+    background: #000000;
+    color: #ffffff;
+  }
+
+  &.disabled {
+    background: #f5f5f5;
+    color: #999999;
+    cursor: not-allowed;
+
+    &:hover {
+      background: #f5f5f5;
+    }
+  }
+
+  // 图标样式
+  .bubbleIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  // 标签样式
+  .bubbleLabel {
+    font-weight: 500;
+  }
+
+  // 描述样式
+  .bubbleDescription {
+    font-size: 12px;
+    opacity: 0.7;
+    font-weight: 400;
+  }
+}
--- a/src/components/Bubble/example.tsx
+++ b/src/components/Bubble/example.tsx
@@ -0,0 +1,235 @@
+import React, { useState } from 'react';
+import Bubble, { BubbleOption } from './index';
+
+// 室内外选择示例（如UI图所示）
+export const LocationSelector: React.FC = () => {
+  const [selectedLocation, setSelectedLocation] = useState<string>('');
+
+  const locationOptions: BubbleOption[] = [
+    { id: 1, label: '室内', value: 'indoor' },
+    { id: 2, label: '室外', value: 'outdoor' },
+    { id: 3, label: '半室外', value: 'semi-outdoor' }
+  ];
+
+  return (
+    <div>
+      <h3>选择场地类型</h3>
+      <Bubble
+        options={locationOptions}
+        value={selectedLocation}
+        onChange={(value) => setSelectedLocation(value as string)}
+        layout="horizontal"
+        size="small"
+      />
+      <p>当前选择: {selectedLocation || '未选择'}</p>
+    </div>
+  );
+};
+
+// 时间选择器示例
+export const TimeSelector: React.FC = () => {
+  const [selectedTime, setSelectedTime] = useState<string>('');
+
+  const timeOptions: BubbleOption[] = [
+    { id: 1, label: '晨间 6:00-10:00', value: 'morning' },
+    { id: 2, label: '上午 10:00-12:00', value: 'forenoon' },
+    { id: 3, label: '中午 12:00-14:00', value: 'noon' },
+    { id: 4, label: '下午 14:00-18:00', value: 'afternoon' },
+    { id: 5, label: '晚上 18:00-22:00', value: 'evening' },
+    { id: 6, label: '夜间 22:00-24:00', value: 'night' }
+  ];
+
+  return (
+    <div>
+      <h3>选择时间段</h3>
+      <Bubble
+        options={timeOptions}
+        value={selectedTime}
+        onChange={(value) => setSelectedTime(value as string)}
+        layout="grid"
+        size="small"
+        columns={3}
+      />
+      <p>当前选择: {selectedTime || '未选择'}</p>
+      <hr />
+      <h3>选择时间段</h3>
+      <Bubble
+        options={timeOptions}
+        value={selectedTime}
+        onChange={(value) => setSelectedTime(value as string)}
+        layout="grid"
+        columns={2}
+        size="small"
+      />
+      <p>当前选择: {selectedTime || '未选择'}</p>
+    </div>
+  );
+};
+
+// 多选示例
+export const MultiSelectExample: React.FC = () => {
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const options: BubbleOption[] = [
+    { id: 1, label: '运动', value: 'sports' },
+    { id: 2, label: '音乐', value: 'music' },
+    { id: 3, label: '阅读', value: 'reading' },
+    { id: 4, label: '旅行', value: 'travel' },
+    { id: 5, label: '美食', value: 'food' },
+    { id: 6, label: '摄影', value: 'photography' }
+  ];
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>多选示例 - 兴趣爱好</h3>
+      <Bubble
+        options={options}
+        value={selectedValues}
+        onChange={(value) => setSelectedValues(value as string[])}
+        multiple={true}
+        layout="grid"
+        columns={3}
+        size="medium"
+      />
+      <p>当前选择: {selectedValues.join(', ') || '未选择'}</p>
+    </div>
+  );
+};
+
+// 带图标和描述的示例
+export const IconExample: React.FC = () => {
+  const [selectedValue, setSelectedValue] = useState<string>('');
+
+  const options: BubbleOption[] = [
+    { 
+      id: 1, 
+      label: '网球', 
+      value: 'tennis',
+      icon: '🎾',
+      description: '室内外均可'
+    },
+    { 
+      id: 2, 
+      label: '篮球', 
+      value: 'basketball',
+      icon: '🏀',
+      description: '室内场地'
+    },
+    { 
+      id: 3, 
+      label: '足球', 
+      value: 'football',
+      icon: '⚽',
+      description: '室外场地'
+    }
+  ];
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>带图标和描述的运动选择</h3>
+      <Bubble
+        options={options}
+        value={selectedValue}
+        onChange={(value) => setSelectedValue(value as string)}
+        layout="vertical"
+        size="large"
+      />
+      <p>当前选择: {selectedValue || '未选择'}</p>
+    </div>
+  );
+};
+
+// 带禁用状态的示例
+export const DisabledExample: React.FC = () => {
+  const [selectedValue, setSelectedValue] = useState<string>('');
+
+  const options: BubbleOption[] = [
+    { id: 1, label: '可用选项1', value: 'option1' },
+    { id: 2, label: '禁用选项2', value: 'option2', disabled: true },
+    { id: 3, label: '可用选项3', value: 'option3' },
+    { id: 4, label: '禁用选项4', value: 'option4', disabled: true }
+  ];
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>带禁用状态的示例</h3>
+      <Bubble
+        options={options}
+        value={selectedValue}
+        onChange={(value) => setSelectedValue(value as string)}
+        layout="grid"
+        columns={2}
+        size="medium"
+      />
+      <p>当前选择: {selectedValue || '未选择'}</p>
+    </div>
+  );
+};
+
+// 不同尺寸的示例
+export const SizeExample: React.FC = () => {
+  const [selectedSize, setSelectedSize] = useState<string>('');
+
+  const sizeOptions: BubbleOption[] = [
+    { id: 1, label: '小尺寸', value: 'small' },
+    { id: 2, label: '中尺寸', value: 'medium' },
+    { id: 3, label: '大尺寸', value: 'large' }
+  ];
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>不同尺寸的示例</h3>
+      
+      <h4>小尺寸</h4>
+      <Bubble
+        options={sizeOptions}
+        value={selectedSize}
+        onChange={(value) => setSelectedSize(value as string)}
+        layout="horizontal"
+        size="small"
+      />
+      
+      <h4>中尺寸</h4>
+      <Bubble
+        options={sizeOptions}
+        value={selectedSize}
+        onChange={(value) => setSelectedSize(value as string)}
+        layout="horizontal"
+        size="medium"
+      />
+      
+      <h4>大尺寸</h4>
+      <Bubble
+        options={sizeOptions}
+        value={selectedSize}
+        onChange={(value) => setSelectedSize(value as string)}
+        layout="horizontal"
+        size="large"
+      />
+      
+      <p>当前选择: {selectedSize || '未选择'}</p>
+    </div>
+  );
+};
+
+// 主示例组件
+export const BubbleExamples: React.FC = () => {
+  return (
+    <div>
+      <h1>Bubble 通用气泡组件示例</h1>
+      <LocationSelector />
+      <hr />
+      <TimeSelector />
+      <hr />
+      <MultiSelectExample />
+      <hr />
+      <IconExample />
+      <hr />
+      <DisabledExample />
+      <hr />
+      <SizeExample />
+    </div>
+  );
+};
+
+export default BubbleExamples;
--- a/src/components/Bubble/index.module.scss
+++ b/src/components/Bubble/index.module.scss
@@ -0,0 +1,27 @@
+.bubbleContainer {
+  width: 100%;
+
+  // 水平布局
+  .bubbleHorizontal {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  // 垂直布局
+  .bubbleVertical {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  // 网格布局
+  .bubbleGrid {
+    display: grid;
+    width: 100%;
+    .bubbleOption {
+      width: 100%;
+    }
+  }
+}
--- a/src/components/Bubble/index.tsx
+++ b/src/components/Bubble/index.tsx
@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from "react";
+import styles from "./index.module.scss";
+import BubbleItem from "./BubbleItem";
+
+export interface BubbleOption {
+  id: string | number;
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  description?: string;
+}
+
+export interface BubbleProps {
+  options: BubbleOption[];
+  value?: string | number | (string | number)[];
+  onChange?: (
+    value: string | number | (string | number)[],
+    option: BubbleOption | BubbleOption[]
+  ) => void;
+  multiple?: boolean;
+  layout?: "horizontal" | "vertical" | "grid";
+  columns?: number;
+  size?: "small" | "medium" | "large";
+  className?: string;
+  itemClassName?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+}
+
+const Bubble: React.FC<BubbleProps> = ({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  layout = "horizontal",
+  columns = 3,
+  size = "small",
+  className = "",
+  itemClassName = "",
+  style = {},
+  disabled = false,
+}) => {
+  const [selectedValues, setSelectedValues] = useState<(string | number)[]>([]);
+
+  // 同步外部传入的value
+  useEffect(() => {
+    if (value !== undefined) {
+      const newValues = Array.isArray(value) ? value : [value];
+      setSelectedValues(newValues);
+    }
+  }, [value]);
+
+  const handleOptionClick = (option: BubbleOption) => {
+    if (disabled || option.disabled) return;
+
+    let newSelectedValues: (string | number)[];
+
+    if (multiple) {
+      if (selectedValues.includes(option.value)) {
+        newSelectedValues = selectedValues.filter((v) => v !== option.value);
+      } else {
+        newSelectedValues = [...selectedValues, option.value];
+      }
+    } else {
+      newSelectedValues = [option.value];
+    }
+
+    setSelectedValues(newSelectedValues);
+
+    // 调用onChange回调，传递选中的值和对应的选项
+    if (onChange) {
+      if (multiple) {
+        const selectedOptions = options.filter((opt) =>
+          newSelectedValues.includes(opt.value)
+        );
+        onChange(newSelectedValues, selectedOptions);
+      } else {
+        onChange(option.value, option);
+      }
+    }
+  };
+
+  const isSelected = (option: BubbleOption) => {
+    return selectedValues.includes(option.value);
+  };
+
+  const renderHorizontalLayout = () => (
+    <div className={styles.bubbleHorizontal}>
+      {options.map((option) => (
+        <BubbleItem
+          key={option.id}
+          option={option}
+          isSelected={isSelected(option)}
+          size={size}
+          disabled={disabled}
+          onClick={handleOptionClick}
+          itemClassName={itemClassName}
+        />
+      ))}
+    </div>
+  );
+
+  const renderVerticalLayout = () => (
+    <div className={styles.bubbleVertical}>
+      {options.map((option) => (
+        <BubbleItem
+          key={option.id}
+          option={option}
+          isSelected={isSelected(option)}
+          size={size}
+          disabled={disabled}
+          onClick={handleOptionClick}
+          itemClassName={itemClassName}
+        />
+      ))}
+    </div>
+  );
+
+  const renderGridLayout = () => (
+    <div
+      className={styles.bubbleGrid}
+      style={{
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap: size === "small" ? "6px" : size === "large" ? "16px" : "12px",
+      }}
+    >
+      {options.map((option) => (
+        <BubbleItem
+          key={option.id}
+          option={option}
+          isSelected={isSelected(option)}
+          size={size}
+          disabled={disabled}
+          onClick={handleOptionClick}
+          itemClassName={itemClassName || styles.bubbleOption}
+        />
+      ))}
+    </div>
+  );
+
+  const renderLayout = () => {
+    switch (layout) {
+      case "horizontal":
+        return renderHorizontalLayout();
+      case "vertical":
+        return renderVerticalLayout();
+      case "grid":
+        return renderGridLayout();
+      default:
+        return renderHorizontalLayout();
+    }
+  };
+
+  return (
+    <div className={`${styles.bubbleContainer} ${className}`} style={style}>
+      {renderLayout()}
+    </div>
+  );
+};
+
+export default Bubble;
--- a/src/components/CityFilter/example.tsx
+++ b/src/components/CityFilter/example.tsx
@@ -0,0 +1,18 @@
+import { useState } from "react";
+import MenuComponent from "./index";
+
+export default function Example() {
+  const [value, setValue] = useState("a");
+  const options = [
+    { text: "默认排序", value: "a" },
+    { text: "好评排序", value: "b" },
+    { text: "销量排序", value: "c" },
+  ];
+  return (
+    <MenuComponent
+      options={options}
+      value={value}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}
--- a/src/components/CityFilter/index.module.scss
+++ b/src/components/CityFilter/index.module.scss
@@ -0,0 +1,60 @@
+.menuWrap {
+  padding: 5px 20px 10px;
+  .menuItem {
+    left: 0;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+  }
+  &.active {
+    .nut-menu-bar {
+      background-color: #000000;
+      color: #ffffff;
+    }
+  }
+  :global(.nut-menu-bar) {
+    color: #000000;
+    line-height: 1;
+    box-shadow: unset;
+    min-height: 28px;
+    min-width: 80px;
+    border-radius: 28px;
+    border: 1px solid #e5e5e5;
+    line-height: 28px;
+    font-size: 14px;
+    width: max-content;
+    .nut-menu-title {
+      color: inherit !important;
+      font-weight: 600;
+    }
+
+    .nut-menu-title-text {
+      padding-left: 0;
+    }
+  }
+
+  .positionWrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .cityName {
+    font-size: 13px;
+    font-weight: 400;
+    color: #3C3C43;
+  }
+  .distanceWrap {
+    margin-bottom: 16px;
+    width: 100%;
+  }
+  .distanceBubbleItem {
+    width: auto;
+  }
+}
--- a/src/components/CityFilter/index.tsx
+++ b/src/components/CityFilter/index.tsx
@@ -0,0 +1,64 @@
+import { Menu } from "@nutui/nutui-react-taro";
+import styles from "./index.module.scss";
+import { useState, useRef } from "react";
+import Bubble, { BubbleOption } from "../Bubble";
+
+interface IProps {
+  options: BubbleOption[];
+  value: string;
+  onChange: (value: string) => void;
+  wrapperClassName?: string;
+  itemClassName?: string;
+}
+
+const MenuComponent = (props: IProps) => {
+  const { value, onChange, wrapperClassName, itemClassName } = props;
+  const [isChange, setIsChange] = useState(false);
+  const itemRef = useRef(null);
+
+  const handleChange = (value: string) => {
+    console.log("===value", value);
+    setIsChange(true);
+    onChange && onChange(value);
+  };
+
+  const options: BubbleOption[] = [
+    { id: 0, label: "全城", value: "0" },
+    { id: 1, label: "3km", value: "3" },
+    { id: 2, label: "5km", value: "5" },
+    { id: 3, label: "10km", value: "10" },
+  ];
+
+  return (
+    <Menu
+      className={`${styles.menuWrap} ${wrapperClassName} ${
+        isChange ? styles.active : ""
+      }`}
+      activeColor="#000"
+    >
+      <Menu.Item
+        title="全城"
+        className={`${styles.menuItem} ${itemClassName}`}
+        ref={itemRef}
+      >
+        <div className={styles.positionWrap}>
+          <p className={styles.title}>当前位置</p>
+          <p className={styles.cityName}>上海市</p>
+        </div>
+        <div className={styles.distanceWrap}>
+          <Bubble
+            options={options}
+            value={value}
+            onChange={handleChange}
+            layout="grid"
+            size="small"
+            columns={4}
+            itemClassName={styles.distanceBubbleItem}
+          />
+        </div>
+      </Menu.Item>
+    </Menu>
+  );
+};
+
+export default MenuComponent;
--- a/src/components/List/index.scss
+++ b/src/components/List/index.scss
@@ -0,0 +1,7 @@
+.list {
+  background: #fafafa;
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
--- a/src/components/List/index.tsx
+++ b/src/components/List/index.tsx
@@ -0,0 +1,16 @@
+import { View } from '@tarojs/components'
+import './index.scss'
+
+interface ListProps {
+  children: React.ReactNode
+}
+
+const List: React.FC<ListProps> = ({ children }) => {
+  return (
+    <View className="list">
+      {children}
+    </View>
+  )
+}
+
+export default List
--- a/src/components/ListItem/index.scss
+++ b/src/components/ListItem/index.scss
@@ -0,0 +1,207 @@
+.list-item {
+  display: flex;
+  padding: 16px;
+  background: #ffffff;
+  border-radius: 20px;
+  border: 0.5px solid #f0f0f0;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333333;
+  line-height: 1.4;
+}
+
+.date-time {
+  font-size: 14px;
+  color: #666666;
+  line-height: 1.3;
+}
+
+.location {
+  font-size: 14px;
+  color: #666666;
+  line-height: 1.3;
+}
+
+.bottom-info {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  column-gap: 4px;
+}
+
+.left-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.avatar-group {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #e0e0e0;
+  border: 2px solid #ffffff;
+  margin-left: -8px;
+  overflow: hidden;
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &:first-child {
+    margin-left: 0;
+    z-index: 3;
+  }
+
+  &:nth-child(2) {
+    z-index: 2;
+  }
+
+  &:nth-child(3) {
+    z-index: 1;
+  }
+}
+
+.registration-text {
+  font-size: 12px;
+  color: #999999;
+}
+
+.tags {
+  display: flex;
+  gap: 4px;
+}
+
+.tag {
+  padding: 3px;
+  border: 1px solid #f5f5f5;
+  border-radius: 20px;
+  min-width: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #000000;
+  font-size: 12px;
+}
+
+.tag-text-max {
+  color: #666666;
+}
+
+.image-section {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .image-container {
+    width: 100%;
+    height: 100%;
+    padding: 2px;
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    position: absolute;
+    .image {
+      border-radius: 10px;
+    }
+  }
+}
+
+.single-image {
+  position: relative;
+  width: 88px;
+  height: 88px;
+  .image-container {
+    transform: rotate(-10deg);
+  }
+}
+
+.double-image {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .image-container {
+    width: 60%;
+    height: 60%;
+    position: absolute;
+    overflow: hidden;
+    top: 20%;
+
+    &:first-child {
+      z-index: 2;
+      transform: rotate(-10deg);
+    }
+
+    &:last-child {
+      right: 0;
+      z-index: 1;
+      transform: rotate(10deg);
+    }
+  }
+}
+
+.triple-image {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .image-container {
+    position: absolute;
+    overflow: hidden;
+
+    &:nth-child(1) {
+      bottom: 0;
+      left: 0;
+      width: 55px;
+      height: 55px;
+      z-index: 3;
+      transform: rotate(-10deg);
+    }
+
+    &:nth-child(2) {
+      bottom: 10px;
+      right: 0;
+      width: 55px;
+      height: 55px;
+      z-index: 2;
+      transform: rotate(3deg);
+    }
+
+    &:nth-child(3) {
+      top: 5%;
+      left: 50%;
+      width: 100rpx;
+      height: 100rpx;
+      z-index: 1;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
--- a/src/components/ListItem/index.tsx
+++ b/src/components/ListItem/index.tsx
@@ -0,0 +1,121 @@
+import { View, Text, Image } from '@tarojs/components'
+import './index.scss'
+
+interface ListItemProps {
+  title: string
+  dateTime: string
+  location: string
+  distance: string
+  registeredCount: number
+  maxCount: number
+  skillLevel: string
+  matchType: string
+  images: string[]
+}
+
+const ListItem: React.FC<ListItemProps> = ({
+  title,
+  dateTime,
+  location,
+  distance,
+  registeredCount,
+  maxCount,
+  skillLevel,
+  matchType,
+  images
+}) => {
+  // 根据图片数量决定展示样式
+  const renderImages = () => {
+    if (images.length === 0) return null
+    
+    if (images.length === 1) {
+      return (
+        <View className="single-image">
+          <View className="image-container"> 
+            <Image src={images[0]} className="image" mode="aspectFill" />
+          </View>
+        </View>
+      )
+    }
+    
+    if (images.length === 2) {
+      return (
+        <View className="double-image">
+          <View className="image-container">
+            <Image src={images[0]} className="image" mode="aspectFill" />
+          </View>
+          <View className="image-container">
+            <Image src={images[1]} className="image" mode="aspectFill" />
+          </View>
+        </View>
+      )
+    }
+    
+    // 3张或更多图片
+    return (
+      <View className="triple-image">
+        <View className="image-container">
+          <Image src={images[0]} className="image" mode="aspectFill" />
+        </View>
+        <View className="image-container">
+          <Image src={images[1]} className="image" mode="aspectFill" />
+        </View>
+        <View className="image-container">
+          <Image src={images[2]} className="image" mode="aspectFill" />
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View className="list-item">
+      {/* 左侧内容区域 */}
+      <View className="content">
+        {/* 标题 */}
+        <Text className="title">{title}</Text>
+        
+        {/* 时间信息 */}
+        <Text className="date-time">{dateTime}</Text>
+        
+        {/* 地点和距离 */}
+        <Text className="location">{location}・{distance}</Text>
+        
+        {/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
+        <View className="bottom-info">
+          <View className="left-section">
+            <View className="avatar-group">
+              {Array.from({ length: Math.min(registeredCount, 3) }).map((_, index) => (
+                <View key={index} className="avatar" >
+                  <Image
+                    className="avatar-image"
+                    src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center" className="avatar-image" mode="aspectFill" />
+                </View>
+              ))}
+            </View>
+          </View>
+          
+          <View className="tags">
+          <View className="tag">
+              <Text className="tag-text">
+               报名人数 {registeredCount}/<Text className="tag-text-max">{maxCount}</Text>
+              </Text>
+            </View>
+            <View className="tag">
+              <Text className="tag-text">{skillLevel}</Text>
+            </View>
+            <View className="tag">
+              <Text className="tag-text">{matchType}</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      
+      {/* 右侧图片区域 */}
+      <View className="image-section">
+        {renderImages()}
+      </View>
+    </View>
+  )
+}
+
+export default ListItem
--- a/src/components/Menu/example.tsx
+++ b/src/components/Menu/example.tsx
@@ -0,0 +1,18 @@
+import { useState } from "react";
+import MenuComponent from "./index";
+
+export default function Example() {
+  const [value, setValue] = useState("a");
+  const options = [
+    { text: "默认排序", value: "a" },
+    { text: "好评排序", value: "b" },
+    { text: "销量排序", value: "c" },
+  ];
+  return (
+    <MenuComponent
+      options={options}
+      value={value}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}
--- a/src/components/Menu/index.module.scss
+++ b/src/components/Menu/index.module.scss
@@ -0,0 +1,45 @@
+.menuWrap {
+  padding: 5px 20px 10px;
+  .menuItem {
+    left: 0;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+  }
+  &.active {
+    :global(.nut-menu-bar) {
+      background-color: #000000;
+      color: #ffffff;
+    }
+  }
+  :global(.nut-menu-bar) {
+    color: #000000;
+    line-height: 1;
+    box-shadow: unset;
+    min-height: 28px;
+    min-width: 94px;
+    border-radius: 28px;
+    border: 1px solid #e5e5e5;
+    line-height: 28px;
+    font-size: 14px;
+    width: max-content;
+
+    .nut-menu-title-text {
+      padding-left: 0;
+    }
+  }
+
+  :global(.nut-menu-title) {
+    color: inherit !important;
+    font-weight: 600;
+  }
+
+  :global(.nut-menu-container-item) {
+    color: #3c3c43;
+    font-weight: 600;
+    font-size: 14px;
+  }
+  :global(.nut-menu-container-item.active) {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+}
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -0,0 +1,37 @@
+import { Menu } from "@nutui/nutui-react-taro";
+import styles from "./index.module.scss";
+import { useState } from "react";
+
+interface IProps {
+  options: { text: string; value: string }[];
+  value: string;
+  onChange: (value: string) => void;
+  wrapperClassName?: string;
+  itemClassName?: string;
+}
+
+const MenuComponent = (props: IProps) => {
+  const { options, value, onChange, wrapperClassName, itemClassName } = props;
+  const [isChange, setIsChange] = useState(false);
+
+  const handleChange = (value: string) => {
+    setIsChange(true);
+    onChange && onChange(value);
+  };
+
+  return (
+    <Menu
+      className={`${styles.menuWrap} ${wrapperClassName} ${isChange ? styles.active : ""}`}
+      activeColor="#000"
+    >
+      <Menu.Item
+        className={`${styles.menuItem} ${itemClassName}`}
+        options={options}
+        defaultValue={value}
+        onChange={handleChange}
+      />
+    </Menu>
+  );
+};
+
+export default MenuComponent;
--- a/src/components/Range/index.tsx
+++ b/src/components/Range/index.tsx
@@ -11,7 +11,10 @@ interface RangeProps {
  onChange?: (value: [number, number]) => void;
  disabled?: boolean;
  className?: string;
+<<<<<<< HEAD
  showTitle?: boolean;
+=======
+>>>>>>> 2b7c9497c6d5b1f3edb2ddd937855570c0cc8eca
 }

 const NtrpRange: React.FC<RangeProps> = ({
@@ -22,7 +25,10 @@ const NtrpRange: React.FC<RangeProps> = ({
  onChange,
  disabled = false,
  className,
+<<<<<<< HEAD
  showTitle = true,
+=======
+>>>>>>> 2b7c9497c6d5b1f3edb2ddd937855570c0cc8eca
 }) => {
  const [currentValue, setCurrentValue] = useState<[number, number]>(value);

--- a/src/components/SearchBar/index.module.scss
+++ b/src/components/SearchBar/index.module.scss
@@ -0,0 +1,23 @@
+.searchBar {
+  --nutui-searchbar-padding: 10px 15px;
+  --nutui-searchbar-font-size: 16px;
+  --nutui-searchbar-input-height: 44px;
+  --nutui-searchbar-content-border-radius: 44px;
+  --nutui-searchbar-input-text-color: #000000;
+  --nutui-searchbar-input-padding: 0 0 0 10px;
+  --nutui-searchbar-padding:0 15px;
+  // --nutui-searchbar-background: #ffffff;
+  :global(.nut-searchbar-content) {
+    box-shadow: 0 4px 48px #00000014;
+  }
+  .searchBarRight {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: 1px solid #0000000F;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
--- a/src/components/SearchBar/index.tsx
+++ b/src/components/SearchBar/index.tsx
@@ -0,0 +1,22 @@
+
+import { SearchBar } from '@nutui/nutui-react-taro'
+import styles from './index.module.scss'
+
+const SearchBarComponent = () => {
+  return (
+    <>
+    <SearchBar
+        // leftIn={
+        //   <div>123</div>
+        // }
+        right={
+          <div className={styles.searchBarRight}>筛</div>
+        }
+        className={styles.searchBar}
+        placeholder='搜索上海的球局和场地'
+      />
+    </>
+  )
+}
+
+export default SearchBarComponent
--- a/src/pages/list/FilterPopup.tsx
+++ b/src/pages/list/FilterPopup.tsx
@@ -0,0 +1,72 @@
+import { Popup } from "@nutui/nutui-react-taro";
+import Range from "../../components/Range";
+import Bubble, { BubbleOption } from "../../components/Bubble";
+import styles from "./filterPopup.module.scss";
+import TitleComponent from "src/components/Title";
+
+const timeOptions: BubbleOption[] = [
+  { id: 1, label: "晨间 6:00-10:00", value: "morning" },
+  { id: 2, label: "上午 10:00-12:00", value: "forenoon" },
+  { id: 3, label: "中午 12:00-14:00", value: "noon" },
+  { id: 4, label: "下午 14:00-18:00", value: "afternoon" },
+  { id: 5, label: "晚上 18:00-22:00", value: "evening" },
+  { id: 6, label: "夜间 22:00-24:00", value: "night" },
+];
+
+const locationOptions: BubbleOption[] = [
+  { id: 1, label: "室内", value: "1" },
+  { id: 2, label: "室外", value: "2" },
+  { id: 3, label: "半室外", value: "3" },
+];
+
+const FilterPopup = () => {
+  return (
+    <>
+      <Popup
+        visible={true}
+        destroyOnClose
+        position="top"
+        round
+        closeOnOverlayClick={false}
+        onClose={() => {
+          // setShowTop(false)
+        }}
+      >
+        <div className={styles.filterPopupWrapper}>
+          {/* 时间气泡选项 */}
+          <Bubble
+            options={timeOptions}
+            value={(value) => {}}
+            onChange={(value) => {}}
+            layout="grid"
+            size="small"
+            columns={3}
+          />
+
+          {/* 范围选择 */}
+          <Range
+            min={1.0}
+            max={5.0}
+            step={0.5}
+            className={styles.filterPopupRange}
+          />
+
+          {/* 场次气泡选项 */}
+          <div>
+            <TitleComponent title="场地类型" />
+            <Bubble
+              options={locationOptions}
+              value={(value) => {}}
+              onChange={(value) => {}}
+              layout="grid"
+              size="small"
+              columns={3}
+            />
+          </div>
+        </div>
+      </Popup>
+    </>
+  );
+};
+
+export default FilterPopup;
--- a/src/pages/list/filterPopup.module.scss
+++ b/src/pages/list/filterPopup.module.scss
@@ -0,0 +1,8 @@
+.filterPopupWrapper {
+  $m18: 18px;
+  padding: $m18;
+  .filterPopupRange {
+    margin-top: $m18;
+    margin-bottom: $m18;
+  }
+}
--- a/src/pages/list/index.config.ts
+++ b/src/pages/list/index.config.ts
@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '',
+  enablePullDownRefresh: true,
+  backgroundTextStyle: 'dark'
+})
--- a/src/pages/list/index.scss
+++ b/src/pages/list/index.scss
--- a/src/pages/list/index.tsx
+++ b/src/pages/list/index.tsx
@@ -0,0 +1,206 @@
+import ListItem from "../../components/ListItem";
+import List from "../../components/List";
+import Bubble from "../../components/Bubble/example";
+import Range from "../../components/Range/example";
+import Menu from "../../components/Menu/example";
+import CityFilter from "../../components/CityFilter/example";
+import SearchBar from "../../components/SearchBar";
+import FilterPopup from "./FilterPopup";
+import "./index.scss";
+import { useEffect } from "react";
+import Taro from "@tarojs/taro";
+import {
+  useTennisMatches,
+  useTennisLoading,
+  useTennisError,
+  useTennisLastRefresh,
+  useTennisActions,
+} from "../../store/listStore";
+
+const ListPage = () => {
+  // 从 store 获取数据和方法
+  const matches = useTennisMatches();
+  const loading = useTennisLoading();
+  const error = useTennisError();
+  const lastRefreshTime = useTennisLastRefresh();
+  const { fetchMatches, refreshMatches, clearError } = useTennisActions();
+
+  useEffect(() => {
+    // 页面加载时获取数据
+    fetchMatches();
+  }, [fetchMatches]);
+
+  // 下拉刷新处理函数 - 使用Taro生命周期钩子
+  Taro.usePullDownRefresh(() => {
+    console.log("触发下拉刷新");
+
+    // 调用 store 的刷新方法
+    refreshMatches()
+      .then(() => {
+        // 刷新完成后停止下拉刷新动画
+        Taro.stopPullDownRefresh();
+
+        // 显示刷新成功提示
+        Taro.showToast({
+          title: "刷新成功",
+          icon: "success",
+          duration: 1500,
+        });
+      })
+      .catch(() => {
+        // 刷新失败时也停止动画
+        Taro.stopPullDownRefresh();
+
+        Taro.showToast({
+          title: "刷新失败",
+          icon: "error",
+          duration: 1500,
+        });
+      });
+  });
+
+  // 错误处理
+  useEffect(() => {
+    if (error) {
+      Taro.showToast({
+        title: error,
+        icon: "error",
+        duration: 2000,
+      });
+      // 3秒后自动清除错误
+      setTimeout(() => {
+        clearError();
+      }, 3000);
+    }
+  }, [error, clearError]);
+
+  // 格式化时间显示
+  const formatRefreshTime = (timeString: string | null) => {
+    if (!timeString) return "";
+    const date = new Date(timeString);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+
+    if (minutes < 1) return "刚刚";
+    if (minutes < 60) return `${minutes}分钟前`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}小时前`;
+    return date.toLocaleDateString();
+  };
+
+  // 加载状态显示
+  if (loading && matches.length === 0) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "200px",
+          fontSize: "14px",
+          color: "#999",
+        }}
+      >
+        <div style={{ marginBottom: "10px" }}>加载中...</div>
+        <div style={{ fontSize: "12px", color: "#ccc" }}>
+          正在获取网球比赛数据
+        </div>
+      </div>
+    );
+  }
+
+  // 错误状态显示
+  if (error && matches.length === 0) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "200px",
+          fontSize: "14px",
+          color: "#999",
+        }}
+      >
+        <div style={{ marginBottom: "10px" }}>加载失败</div>
+        <div style={{ marginBottom: "15px", fontSize: "12px", color: "#ccc" }}>
+          {error}
+        </div>
+        <button
+          onClick={() => fetchMatches()}
+          style={{
+            padding: "8px 16px",
+            fontSize: "12px",
+            color: "#fff",
+            backgroundColor: "#007aff",
+            border: "none",
+            borderRadius: "4px",
+          }}
+        >
+          重试
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <SearchBar />
+      {/* 综合筛选 */}
+      <div>
+        <FilterPopup />
+      </div>
+      {/* 筛选 */}
+      <div>
+        {/* 全城筛选 */}
+        <CityFilter />
+        {/* 智能排序 */}
+        <Menu />
+      </div>
+
+      
+
+      {/* 列表内容 */}
+      <List>
+        {matches.map((match, index) => (
+          <ListItem key={match.id || index} {...match} />
+        ))}
+      </List>
+
+      {/* 空状态 */}
+      {!loading && matches.length === 0 && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "200px",
+            fontSize: "14px",
+            color: "#999",
+          }}
+        >
+          <div style={{ marginBottom: "10px" }}>暂无比赛数据</div>
+          <button
+            onClick={() => fetchMatches()}
+            style={{
+              padding: "8px 16px",
+              fontSize: "12px",
+              color: "#fff",
+              backgroundColor: "#007aff",
+              border: "none",
+              borderRadius: "4px",
+            }}
+          >
+            重新加载
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ListPage;
--- a/src/services/listApi.ts
+++ b/src/services/listApi.ts
@@ -0,0 +1,223 @@
+import { TennisMatch } from '../store/listStore'
+
+// 模拟网络延迟
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+// 模拟API响应格式
+interface ApiResponse<T> {
+  code: number
+  message: string
+  data: T
+  timestamp: number
+}
+
+
+// 模拟网球比赛数据
+const mockTennisMatches: TennisMatch[] = [
+  {
+    id: '1',
+    title: '周一晚场浦东新区单打约球',
+    dateTime: '明天(周五)下午5点 2小时',
+    location: '仁恒河滨花园网球场・室外',
+    distance: '3.5km',
+    registeredCount: 3,
+    maxCount: 4,
+    skillLevel: '2.0 至 2.5',
+    matchType: '双打',
+    images: [
+      'https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center',
+      'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=200&h=200&fit=crop&crop=center',
+      'https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=200&h=200&fit=crop&crop=center'
+    ]
+  },
+  {
+    id: '2',
+    title: '浦东新区单打约球',
+    dateTime: '明天(周五)下午5点 2小时',
+    location: '仁恒河滨花园网球场・室外',
+    distance: '3.5km',
+    registeredCount: 2,
+    maxCount: 4,
+    skillLevel: '2.0 至 2.5',
+    matchType: '双打',
+    images: [
+      'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=200&h=200&fit=crop&crop=center',
+      'https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=200&h=200&fit=crop&crop=center'
+    ]
+  },
+  {
+    id: '3',
+    title: '黄浦区双打约球',
+    dateTime: '7月20日(周日)下午6点 2小时',
+    location: '仁恒河滨花园网球场・室外',
+    distance: '3.5km',
+    registeredCount: 3,
+    maxCount: 4,
+    skillLevel: '2.0 至 2.5',
+    matchType: '双打',
+    images: [
+      'https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center'
+    ]
+  }
+]
+
+// 模拟数据变化
+const generateDynamicData = (): TennisMatch[] => {
+  return mockTennisMatches.map(match => ({
+    ...match,
+    // 随机更新注册人数
+    registeredCount: Math.min(
+      match.maxCount, 
+      Math.max(0, match.registeredCount + Math.floor(Math.random() * 3) - 1)
+    ),
+    // 随机更新距离
+    distance: `${(Math.random() * 5 + 1).toFixed(1)}km`,
+    // 随机更新时间
+    dateTime: Math.random() > 0.5 ? match.dateTime : '今天下午3点 2小时'
+  }))
+}
+
+// 模拟网络错误
+const simulateNetworkError = (): boolean => {
+  // 10% 概率模拟网络错误
+  return Math.random() < 0.1
+}
+
+// 模拟网络超时
+const simulateTimeout = (): boolean => {
+  // 5% 概率模拟超时
+  return Math.random() < 0.05
+}
+
+/**
+ * 获取网球比赛列表
+ * @param params 查询参数
+ * @returns Promise<TennisMatch[]>
+ */
+export const getTennisMatches = async (params?: {
+  page?: number
+  pageSize?: number
+  location?: string
+  skillLevel?: string
+}): Promise<TennisMatch[]> => {
+  try {
+    console.log('API调用: getTennisMatches', params)
+    
+    // 模拟网络延迟 (800-1500ms)
+    const delayTime = 800 + Math.random() * 700
+    await delay(delayTime)
+    
+    // 模拟网络错误
+    if (simulateNetworkError()) {
+      throw new Error('网络连接失败，请检查网络设置')
+    }
+    
+    // 模拟超时
+    if (simulateTimeout()) {
+      throw new Error('请求超时，请稍后重试')
+    }
+    
+    // 生成动态数据
+    const matches = generateDynamicData()
+    
+    // 模拟分页
+    if (params?.page && params?.pageSize) {
+      const start = (params.page - 1) * params.pageSize
+      const end = start + params.pageSize
+      return matches.slice(start, end)
+    }
+    
+    // 模拟筛选
+    if (params?.location) {
+      return matches.filter(match => 
+        match.location.includes(params.location!)
+      )
+    }
+    
+    if (params?.skillLevel) {
+      return matches.filter(match => 
+        match.skillLevel.includes(params.skillLevel!)
+      )
+    }
+    
+    console.log('API响应成功:', matches.length, '条数据')
+    return matches
+    
+  } catch (error) {
+    console.error('API调用失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 刷新网球比赛数据
+ * @returns Promise<TennisMatch[]>
+ */
+export const refreshTennisMatches = async (): Promise<TennisMatch[]> => {
+  try {
+    console.log('API调用: refreshTennisMatches')
+    
+    // 模拟刷新延迟 (500-1000ms)
+    const delayTime = 500 + Math.random() * 500
+    await delay(delayTime)
+    
+    // 模拟网络错误
+    if (simulateNetworkError()) {
+      throw new Error('刷新失败，请稍后重试')
+    }
+    
+    // 生成新的动态数据
+    const matches = generateDynamicData()
+    
+    console.log('API刷新成功:', matches.length, '条数据')
+    return matches
+    
+  } catch (error) {
+    console.error('API刷新失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 获取比赛详情
+ * @param id 比赛ID
+ * @returns Promise<TennisMatch | null>
+ */
+export const getTennisMatchDetail = async (id: string): Promise<TennisMatch | null> => {
+  try {
+    console.log('API调用: getTennisMatchDetail', id)
+    
+    // 模拟网络延迟
+    await delay(600 + Math.random() * 400)
+    
+    // 模拟网络错误
+    if (simulateNetworkError()) {
+      throw new Error('获取详情失败，请稍后重试')
+    }
+    
+    const match = mockTennisMatches.find(m => m.id === id)
+    
+    if (!match) {
+      throw new Error('比赛不存在')
+    }
+    
+    console.log('API获取详情成功:', match.title)
+    return match
+    
+  } catch (error) {
+    console.error('API获取详情失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 模拟API统计信息
+ */
+export const getApiStats = () => {
+  return {
+    totalCalls: 0,
+    successRate: 0.95,
+    averageResponseTime: 800,
+    lastCallTime: new Date().toISOString()
+  }
+}
--- a/src/store/listStore.ts
+++ b/src/store/listStore.ts
@@ -0,0 +1,108 @@
+import { create } from 'zustand'
+import { getTennisMatches } from '../services/listApi'
+
+// 网球比赛数据接口
+export interface TennisMatch {
+  id: string
+  title: string
+  dateTime: string
+  location: string
+  distance: string
+  registeredCount: number
+  maxCount: number
+  skillLevel: string
+  matchType: string
+  images: string[]
+}
+
+// Store 状态接口
+interface TennisState {
+  matches: TennisMatch[]
+  loading: boolean
+  error: string | null
+  lastRefreshTime: string | null
+}
+
+// Store Actions 接口
+interface TennisActions {
+  fetchMatches: (params?: {
+    page?: number
+    pageSize?: number
+    location?: string
+    skillLevel?: string
+  }) => Promise<void>
+  refreshMatches: () => Promise<void>
+  clearError: () => void
+}
+
+// 完整的 Store 类型
+type TennisStore = TennisState & TennisActions
+
+// 创建 store
+export const useTennisStore = create<TennisStore>()((set, get) => ({
+  // 初始状态
+  matches: [],
+  loading: false,
+  error: null,
+  lastRefreshTime: null,
+
+  // 获取比赛数据
+  fetchMatches: async (params) => {
+    set({ loading: true, error: null })
+    
+    try {
+      const matches = await getTennisMatches(params)
+      set({ 
+        matches, 
+        loading: false, 
+        lastRefreshTime: new Date().toISOString() 
+      })
+      console.log('Store: 成功获取网球比赛数据:', matches.length, '条')
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '未知错误'
+      set({ 
+        error: errorMessage, 
+        loading: false 
+      })
+      console.error('Store: 获取网球比赛数据失败:', errorMessage)
+    }
+  },
+
+  // 刷新比赛数据
+  refreshMatches: async () => {
+    set({ loading: true, error: null })
+    
+    try {
+      const matches = await getTennisMatches()
+      set({ 
+        matches, 
+        loading: false, 
+        lastRefreshTime: new Date().toISOString() 
+      })
+      console.log('Store: 成功刷新网球比赛数据:', matches.length, '条')
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '未知错误'
+      set({ 
+        error: errorMessage, 
+        loading: false 
+      })
+      console.error('Store: 刷新网球比赛数据失败:', errorMessage)
+    }
+  },
+
+  // 清除错误信息
+  clearError: () => {
+    set({ error: null })
+  }
+}))
+
+// 导出便捷的 hooks
+export const useTennisMatches = () => useTennisStore((state) => state.matches)
+export const useTennisLoading = () => useTennisStore((state) => state.loading)
+export const useTennisError = () => useTennisStore((state) => state.error)
+export const useTennisLastRefresh = () => useTennisStore((state) => state.lastRefreshTime)
+export const useTennisActions = () => useTennisStore((state) => ({
+  fetchMatches: state.fetchMatches,
+  refreshMatches: state.refreshMatches,
+  clearError: state.clearError
+}))