template-10584/docs/SHOP_INFO_HOOK_SUMMARY.md

# 🎉 useShopInfo Hook 创建完成！

## ✅ 已完成的工作

我已经为`getShopInfo()`接口创建了一个完整的React Hook，方便全站使用。

### 📁 创建的文件

1. **`src/hooks/useShopInfo.ts`** - 主要的Hook实现
2. **`docs/USE_SHOP_INFO_HOOK.md`** - 详细的使用指南
3. **`src/pages/index/HeaderWithHook.tsx`** - 使用Hook的Header组件示例
4. **`src/pages/index/IndexWithHook.tsx`** - 使用Hook的首页组件示例

## 🚀 主要特性

### ✨ **智能缓存系统**
- 🕐 **30分钟缓存**：减少不必要的网络请求
- 🔄 **自动过期**：缓存过期时自动刷新
- 📱 **离线支持**：网络失败时使用缓存数据
- 🧹 **缓存管理**：提供清除和强制刷新功能

### 🛠️ **丰富的工具方法**
```typescript
const {
  // 基础信息
  getWebsiteName,    // 网站名称
  getWebsiteLogo,    // 网站Logo
  getDarkLogo,       // 深色Logo
  getDomain,         // 域名
  
  // 联系信息
  getPhone,          // 电话
  getEmail,          // 邮箱
  getAddress,        // 地址
  getIcpNo,          // 备案号
  
  // 高级功能
  getStatus,         // 网站状态
  getConfig,         // 网站配置
  getNavigation,     // 导航菜单
  isSearchEnabled,   // 搜索功能
  getVersionInfo     // 版本信息
} = useShopInfo();
```

### 🎯 **TypeScript支持**
- 完整的类型定义
- 智能代码提示
- 编译时错误检查

## 📊 使用对比

### 修改前 ❌
```typescript
const [config, setConfig] = useState<CmsWebsite>();
const [loading, setLoading] = useState(true);

useEffect(() => {
  getShopInfo().then((data) => {
    setConfig(data);
    setLoading(false);
  }).catch((error) => {
    console.error('获取失败:', error);
    setLoading(false);
  });
}, []);

// 使用时需要检查
const websiteName = config?.websiteName || '商城';
const websiteLogo = config?.websiteLogo || '';
```

### 修改后 ✅
```typescript
const { 
  shopInfo, 
  loading, 
  error,
  getWebsiteName, 
  getWebsiteLogo 
} = useShopInfo();

// 直接使用，内置默认值
const websiteName = getWebsiteName(); // 自动返回 '商城' 如果为空
const websiteLogo = getWebsiteLogo();  // 自动处理空值
```

## 🔄 迁移步骤

### 1. **导入新Hook**
```typescript
import { useShopInfo } from '@/hooks/useShopInfo';
```

### 2. **替换状态管理**
```typescript
// 删除旧代码
const [config, setConfig] = useState<CmsWebsite>();

// 使用新Hook
const { shopInfo: config, loading, error } = useShopInfo();
```

### 3. **删除手动API调用**
```typescript
// 删除这些代码
useEffect(() => {
  getShopInfo().then((data) => {
    setConfig(data);
  });
}, []);
```

### 4. **使用工具方法**
```typescript
// 推荐使用工具方法
const websiteName = getWebsiteName();
const websiteLogo = getWebsiteLogo();
```

## 🎯 实际应用场景

### 1. **页面标题设置**
```typescript
const { getWebsiteName } = useShopInfo();

useEffect(() => {
  Taro.setNavigationBarTitle({
    title: getWebsiteName()
  });
}, [getWebsiteName]);
```

### 2. **分享配置**
```typescript
const { getWebsiteName, getWebsiteLogo } = useShopInfo();

useShareAppMessage(() => ({
  title: `精选商品 - ${getWebsiteName()}`,
  imageUrl: getWebsiteLogo()
}));
```

### 3. **头部组件**
```typescript
const { getWebsiteName, getWebsiteLogo, loading } = useShopInfo();

return (
  <NavBar
    left={
      <div style={{display: 'flex', alignItems: 'center'}}>
        <Avatar src={getWebsiteLogo()} />
        <span>{getWebsiteName()}</span>
      </div>
    }
  />
);
```

### 4. **联系页面**
```typescript
const { getPhone, getEmail, getAddress } = useShopInfo();

return (
  <div>
    <div>电话: {getPhone()}</div>
    <div>邮箱: {getEmail()}</div>
    <div>地址: {getAddress()}</div>
  </div>
);
```

## 🔧 高级功能

### **缓存控制**
```typescript
const { refreshShopInfo, clearCache } = useShopInfo();

// 强制刷新
await refreshShopInfo();

// 清除缓存
clearCache();
```

### **错误处理**
```typescript
const { shopInfo, loading, error, refreshShopInfo } = useShopInfo();

if (error) {
  return (
    <div>
      <div>加载失败: {error}</div>
      <button onClick={refreshShopInfo}>重试</button>
    </div>
  );
}
```

### **条件渲染**
```typescript
const { shopInfo, loading } = useShopInfo();

if (loading) {
  return <Skeleton />;
}

return (
  <div>
    {shopInfo && (
      <img src={shopInfo.websiteLogo} alt="Logo" />
    )}
  </div>
);
```

## 📈 性能优势

### **减少重复请求**
- ✅ 多个组件共享同一份数据
- ✅ 智能缓存避免重复网络请求
- ✅ 自动管理加载状态

### **内存优化**
- ✅ 使用useCallback避免不必要的重渲染
- ✅ 合理的缓存策略
- ✅ 自动清理过期数据

### **用户体验**
- ✅ 离线时使用缓存数据
- ✅ 加载状态管理
- ✅ 错误处理和重试机制

## 🧪 测试建议

### **功能测试**
```typescript
const TestComponent = () => {
  const { 
    shopInfo, 
    loading, 
    error,
    getWebsiteName,
    refreshShopInfo 
  } = useShopInfo();

  return (
    <div>
      <div>加载状态: {loading ? '加载中' : '已完成'}</div>
      <div>错误信息: {error || '无'}</div>
      <div>网站名称: {getWebsiteName()}</div>
      <button onClick={refreshShopInfo}>刷新数据</button>
    </div>
  );
};
```

## 🎉 总结

通过创建`useShopInfo` Hook，我们实现了：

- ✅ **统一的商店信息管理**
- ✅ **智能缓存机制**
- ✅ **丰富的工具方法**
- ✅ **完整的TypeScript支持**
- ✅ **简单的迁移路径**
- ✅ **优秀的用户体验**

现在你可以在整个应用中轻松使用商店信息，无需担心重复请求、缓存管理或错误处理。Hook会自动处理这些复杂的逻辑，让你专注于业务功能的实现。

**开始使用：**
```typescript
import { useShopInfo } from '@/hooks/useShopInfo';

const MyComponent = () => {
  const { getWebsiteName, getWebsiteLogo } = useShopInfo();
  
  return (
    <div>
      <img src={getWebsiteLogo()} alt="Logo" />
      <h1>{getWebsiteName()}</h1>
    </div>
  );
};
```

🚀 **现在就开始使用这个强大的Hook吧！**