mr-component/demo/usage-example.md

A library for Mr components

# MrTitle 全局返回事件使用示例

## 🌐 跨框架返回处理方案

### 1. 基本使用

```javascript
// 在应用启动时，添加全局返回事件监听
window.addEventListener('app:back', (event) => {
  console.log('返回事件触发:', event.detail);

  // 处理返回逻辑
  if (window.vueRouter) {
    window.vueRouter.go(-1);
  } else if (window.reactRouter) {
    window.reactRouter.goBack();
  } else {
    // 降级处理
    window.history.back();
  }
});

// 在React页面中使用MrTitle
import { MrTitle } from 'mr-component';

const ReactPage = () => {
  return (
    <MrTitle
      title="React页面"
      showBack={true}
      enableGlobalBack={true}
      globalBackEvent="app:back"
      backDelay={100}
    />
  );
};
```

### 2. 使用 MrNavigationManager 工具类

```javascript
import { MrNavigationManager } from 'mr-component';

// 在应用启动时设置全局返回处理
MrNavigationManager.addBackListener((event) => {
  console.log('返回事件:', event.detail);

  // 自定义返回逻辑
  if (shouldGoToVuePage()) {
    window.location.href = '/vue-page';
  } else {
    window.history.back();
  }
});

// 组件使用
<MrTitle title="页面标题" enableGlobalBack={true} />;
```

### 3. Vue-React 跨框架集成

```javascript
// 在Vue应用中
// main.js
window.addEventListener('app:back', (event) => {
  // 根据返回事件处理不同的返回逻辑
  const { source, component } = event.detail;

  if (source === 'back-button' && component === 'MrTitle') {
    // 从React页面返回到Vue页面
    this.$router.push('/vue-page');
  }
});

// 在Vue页面中跳转到React页面
methods: {
  goToReactPage() {
    // 记录当前路由信息
    sessionStorage.setItem('returnPath', this.$route.path);

    // 跳转到React页面
    window.location.href = '/react-page';
  }
}

// 在React页面中的MrTitle组件
const ReactPage = () => {
  // 自定义返回处理
  const handleBack = () => {
    const returnPath = sessionStorage.getItem('returnPath');
    if (returnPath) {
      sessionStorage.removeItem('returnPath');
      window.location.href = returnPath;
    }
  };

  return (
    <MrTitle
      title="React页面"
      onBack={handleBack}
      enableGlobalBack={false}  // 使用自定义返回逻辑
    />
  );
};
```

### 4. 移动端优化方案

```javascript
// 针对移动端的返回处理
class MobileNavigationManager {
  static init() {
    // 监听全局返回事件
    window.addEventListener('app:back', this.handleMobileBack);

    // 监听Android返回键
    document.addEventListener('backbutton', this.handleMobileBack);

    // 监听iOS手势返回
    window.addEventListener('popstate', this.handleMobileBack);
  }

  static handleMobileBack = (event) => {
    // 阻止默认行为
    event.preventDefault();

    // 发送给原生应用
    if (window.webkit?.messageHandlers?.navigation) {
      window.webkit.messageHandlers.navigation.postMessage({
        action: 'back',
        data: event.detail,
      });
    } else if (window.AndroidBridge) {
      window.AndroidBridge.goBack(JSON.stringify(event.detail));
    } else {
      // Web环境降级处理
      window.history.back();
    }
  };
}

// 在应用启动时初始化
MobileNavigationManager.init();
```

### 5. 高级配置示例

```javascript
// 配置不同的返回事件
<MrTitle
  title="特殊页面"
  enableGlobalBack={true}
  globalBackEvent="special:back" // 自定义事件名
  backDelay={200} // 延迟200ms
  onBack={() => {
    // 自定义返回逻辑优先级最高
    console.log('自定义返回逻辑');
  }}
/>;

// 监听特殊事件
window.addEventListener('special:back', (event) => {
  console.log('特殊返回事件:', event.detail);
  // 处理特殊返回逻辑
});
```

## 🔧 配置参数说明

| 参数               | 类型     | 默认值       | 描述                         |
| ------------------ | -------- | ------------ | ---------------------------- |
| `enableGlobalBack` | boolean  | `true`       | 是否启用全局返回事件         |
| `globalBackEvent`  | string   | `'app:back'` | 全局返回事件名称             |
| `backDelay`        | number   | `100`        | 返回事件延迟时间(ms)         |
| `onBack`           | function | -            | 自定义返回回调（优先级最高） |

## 🎯 最佳实践

1. **优先级顺序**：

   - 自定义 `onBack` 回调 > 全局事件 > `history.back()`

2. **事件命名**：

   - 使用有意义的事件名，如 `app:back`、`page:back`

3. **错误处理**：

   - 总是添加降级处理逻辑

4. **性能优化**：

   - 适当设置延迟时间，避免事件冲突

5. **清理资源**：
   - 在组件卸载时清理事件监听器

```javascript
// 组件卸载时清理
useEffect(() => {
  return () => {
    MrNavigationManager.cleanup();
  };
}, []);
```