template-10550/docs/APPINFO_FIELD_MIGRATION.md

🔄 useShopInfo Hook 字段迁移到AppInfo

📋 迁移概述

已成功将useShopInfo Hook从CmsWebsite字段结构迁移到AppInfo字段结构，以匹配后台返回的新字段格式。

🆚 字段对比表

核心字段映射

功能	原CmsWebsite字段	新AppInfo字段	状态
应用名称	websiteName	appName	✅ 已映射
Logo	websiteLogo	logo	✅ 已映射
图标	websiteIcon	icon	✅ 已映射
域名	domain	domain	✅ 保持不变
版本	version	version	✅ 保持不变
过期时间	expirationTime	expirationTime	✅ 保持不变
运行状态	running	running	✅ 保持不变
状态文本	statusText	statusText	✅ 保持不变
配置	config	config	✅ 保持不变
导航	topNavs/bottomNavs	topNavs/bottomNavs	✅ 保持不变

新增字段

字段	类型	说明
appId	number	应用ID
description	string	应用描述
keywords	string	关键词
appCode	string	应用代码
mpQrCode	string	小程序二维码
title	string	应用标题
expired	boolean	是否过期
expiredDays	number	过期天数
soon	number	即将过期标识
statusIcon	string	状态图标
serverTime	Object	服务器时间
setting	Object	应用设置

移除字段

原字段	处理方式	说明
websiteDarkLogo	使用logo替代	AppInfo中无深色Logo
phone	从config中获取	移至配置中
email	从config中获取	移至配置中
address	从config中获取	移至配置中
icpNo	从config中获取	移至配置中
search	从config中获取	移至配置中
templateId	移除	AppInfo中无此字段

🔧 新增工具方法

基于AppInfo的新方法

// 应用基本信息
getAppName()          // 获取应用名称
getAppLogo()          // 获取应用Logo
getAppIcon()          // 获取应用图标
getDescription()      // 获取应用描述
getKeywords()         // 获取关键词
getTitle()            // 获取应用标题
getMpQrCode()         // 获取小程序二维码

// 应用配置
getSetting()          // 获取应用设置
getServerTime()       // 获取服务器时间

// 过期状态管理
isExpired()           // 检查是否过期
getExpiredDays()      // 获取过期天数
isSoonExpired()       // 检查是否即将过期

兼容旧方法

// 保持向后兼容
getWebsiteName()      // 映射到getAppName()
getWebsiteLogo()      // 映射到getAppLogo()
getDarkLogo()         // 使用普通Logo
getPhone()            // 从config中获取
getEmail()            // 从config中获取
getAddress()          // 从config中获取
getIcpNo()            // 从config中获取
isSearchEnabled()     // 从config中获取

📊 使用示例

新方法使用

const {
  // 新的AppInfo方法
  getAppName,
  getAppLogo,
  getDescription,
  getMpQrCode,
  isExpired,
  getExpiredDays,
  
  // 兼容旧方法
  getWebsiteName,
  getWebsiteLogo
} = useShopInfo();

// 使用新方法
const appName = getAppName();           // "时里亲子市集"
const appLogo = getAppLogo();           // Logo URL
const description = getDescription();    // 应用描述
const qrCode = getMpQrCode();           // 小程序二维码
const expired = isExpired();            // false
const expiredDays = getExpiredDays();   // 30

// 兼容旧方法（推荐逐步迁移到新方法）
const websiteName = getWebsiteName();   // 等同于getAppName()
const websiteLogo = getWebsiteLogo();   // 等同于getAppLogo()

状态检查

const { getStatus, isExpired, isSoonExpired } = useShopInfo();

const status = getStatus();
console.log(status);
// {
//   running: 1,
//   statusText: "运行中",
//   statusIcon: "success",
//   expired: false,
//   expiredDays: 30,
//   soon: 0
// }

if (isExpired()) {
  console.log('应用已过期');
} else if (isSoonExpired()) {
  console.log(`应用将在${getExpiredDays()}天后过期`);
}

配置获取

const { getConfig, getSetting, getServerTime } = useShopInfo();

const config = getConfig();       // 应用配置
const setting = getSetting();     // 应用设置
const serverTime = getServerTime(); // 服务器时间

// 从配置中获取联系信息
const phone = getPhone();         // 从config.phone获取
const email = getEmail();         // 从config.email获取
const address = getAddress();     // 从config.address获取

🔄 迁移建议

1. 逐步迁移

// 阶段1：使用兼容方法（当前可用）
const websiteName = getWebsiteName();
const websiteLogo = getWebsiteLogo();

// 阶段2：迁移到新方法（推荐）
const appName = getAppName();
const appLogo = getAppLogo();

2. 新功能使用新方法

// 新功能直接使用AppInfo方法
const { 
  getAppName, 
  getAppLogo, 
  getDescription,
  isExpired,
  getMpQrCode 
} = useShopInfo();

3. 配置字段处理

// 对于移至config的字段，使用对应的getter方法
const phone = getPhone();     // 自动从config中获取
const email = getEmail();     // 自动从config中获取
const icpNo = getIcpNo();     // 自动从config中获取

⚠️ 注意事项

1. 字段可能为空

// AppInfo中某些字段可能不存在，需要提供默认值
const description = getDescription() || '暂无描述';
const qrCode = getMpQrCode() || '';

2. 配置字段依赖

// 联系信息现在依赖config字段
const config = getConfig();
if (config && typeof config === 'object') {
  const phone = getPhone();
  const email = getEmail();
}

3. 过期状态处理

// 新增的过期状态需要特殊处理
const { isExpired, getExpiredDays, isSoonExpired } = useShopInfo();

if (isExpired()) {
  // 应用已过期的处理逻辑
  showExpiredDialog();
} else if (isSoonExpired()) {
  // 即将过期的提醒逻辑
  showExpirationWarning(getExpiredDays());
}

🧪 测试验证

1. 字段映射测试

const TestComponent = () => {
  const { 
    shopInfo,
    getAppName,
    getAppLogo,
    getWebsiteName,
    getWebsiteLogo 
  } = useShopInfo();

  return (
    <div>
      <h3>原始数据</h3>
      <pre>{JSON.stringify(shopInfo, null, 2)}</pre>
      
      <h3>新方法</h3>
      <div>应用名称: {getAppName()}</div>
      <div>应用Logo: {getAppLogo()}</div>
      
      <h3>兼容方法</h3>
      <div>网站名称: {getWebsiteName()}</div>
      <div>网站Logo: {getWebsiteLogo()}</div>
    </div>
  );
};

2. 过期状态测试

const ExpirationTest = () => {
  const { 
    isExpired, 
    getExpiredDays, 
    isSoonExpired,
    getStatus 
  } = useShopInfo();

  const status = getStatus();

  return (
    <div>
      <div>过期状态: {isExpired() ? '已过期' : '正常'}</div>
      <div>过期天数: {getExpiredDays()}</div>
      <div>即将过期: {isSoonExpired() ? '是' : '否'}</div>
      <div>详细状态: {JSON.stringify(status, null, 2)}</div>
    </div>
  );
};

🎉 迁移完成

useShopInfo Hook已成功迁移到AppInfo字段结构：

• ✅ 新增AppInfo专用方法：基于新字段结构的工具方法
• ✅ 保持向后兼容：旧方法名仍然可用
• ✅ 增强功能：新增过期状态、应用设置等功能
• ✅ 智能映射：自动处理字段差异和默认值
• ✅ 类型安全：完整的TypeScript支持

现在Hook完全支持AppInfo字段结构，同时保持向后兼容！ 🚀