29 changed files with 1021 additions and 49 deletions
@ -0,0 +1,325 @@ |
|||||
|
# CmsAd 类型修复说明 |
||||
|
|
||||
|
## 📋 问题描述 |
||||
|
|
||||
|
原始代码中 `CmsAd` 接口的 `images` 和 `imageList` 字段使用了 `any` 类型，违反了 TypeScript ESLint 规则： |
||||
|
|
||||
|
```typescript |
||||
|
// ❌ 修复前 - 使用 any 类型 |
||||
|
export interface CmsAd { |
||||
|
images?: any; // Error: Unexpected any |
||||
|
imageList?: any; // Error: Unexpected any |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🔧 修复方案 |
||||
|
|
||||
|
### 1. 新增 CmsAdImage 接口 |
||||
|
|
||||
|
```typescript |
||||
|
/** |
||||
|
* 广告图片信息 |
||||
|
*/ |
||||
|
export interface CmsAdImage { |
||||
|
id?: number; // 图片ID |
||||
|
url?: string; // 图片URL |
||||
|
alt?: string; // 图片alt属性 |
||||
|
title?: string; // 图片标题 |
||||
|
link?: string; // 图片链接 |
||||
|
sortOrder?: number; // 排序顺序 |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 2. 更新 CmsAd 接口 |
||||
|
|
||||
|
```typescript |
||||
|
// ✅ 修复后 - 使用具体类型 |
||||
|
export interface CmsAd { |
||||
|
// 广告图片（单个图片或图片URL） |
||||
|
images?: string | CmsAdImage | CmsAdImage[]; |
||||
|
// 广告图片列表 |
||||
|
imageList?: CmsAdImage[]; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## 🎯 类型设计说明 |
||||
|
|
||||
|
### images 字段类型 |
||||
|
```typescript |
||||
|
images?: string | CmsAdImage | CmsAdImage[]; |
||||
|
``` |
||||
|
|
||||
|
支持三种数据格式： |
||||
|
- **`string`**: 单个图片URL字符串 |
||||
|
- **`CmsAdImage`**: 单个图片对象 |
||||
|
- **`CmsAdImage[]`**: 图片对象数组 |
||||
|
|
||||
|
### imageList 字段类型 |
||||
|
```typescript |
||||
|
imageList?: CmsAdImage[]; |
||||
|
``` |
||||
|
|
||||
|
专门用于图片列表，只接受图片对象数组。 |
||||
|
|
||||
|
## 📖 使用示例 |
||||
|
|
||||
|
### 1. 基础用法 |
||||
|
|
||||
|
```typescript |
||||
|
import { CmsAd, CmsAdImage } from '@/api/cms/cmsAd/model'; |
||||
|
|
||||
|
// 示例1：使用字符串URL |
||||
|
const ad1: CmsAd = { |
||||
|
adId: 1, |
||||
|
name: '首页横幅', |
||||
|
images: 'https://example.com/banner.jpg' |
||||
|
}; |
||||
|
|
||||
|
// 示例2：使用单个图片对象 |
||||
|
const ad2: CmsAd = { |
||||
|
adId: 2, |
||||
|
name: '侧边栏广告', |
||||
|
images: { |
||||
|
id: 1, |
||||
|
url: 'https://example.com/sidebar.jpg', |
||||
|
alt: '侧边栏广告', |
||||
|
link: '/products' |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 示例3：使用图片数组 |
||||
|
const ad3: CmsAd = { |
||||
|
adId: 3, |
||||
|
name: '轮播广告', |
||||
|
images: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
url: 'https://example.com/slide1.jpg', |
||||
|
alt: '轮播图1', |
||||
|
link: '/page1' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
url: 'https://example.com/slide2.jpg', |
||||
|
alt: '轮播图2', |
||||
|
link: '/page2' |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
``` |
||||
|
|
||||
|
### 2. 类型守卫函数 |
||||
|
|
||||
|
```typescript |
||||
|
// 检查是否为字符串URL |
||||
|
function isImageUrl(images: CmsAd['images']): images is string { |
||||
|
return typeof images === 'string'; |
||||
|
} |
||||
|
|
||||
|
// 检查是否为单个图片对象 |
||||
|
function isSingleImage(images: CmsAd['images']): images is CmsAdImage { |
||||
|
return typeof images === 'object' && !Array.isArray(images) && images !== null; |
||||
|
} |
||||
|
|
||||
|
// 检查是否为图片数组 |
||||
|
function isImageArray(images: CmsAd['images']): images is CmsAdImage[] { |
||||
|
return Array.isArray(images); |
||||
|
} |
||||
|
|
||||
|
// 使用示例 |
||||
|
function renderAdImages(ad: CmsAd) { |
||||
|
if (isImageUrl(ad.images)) { |
||||
|
return <img src={ad.images} alt={ad.name} />; |
||||
|
} |
||||
|
|
||||
|
if (isSingleImage(ad.images)) { |
||||
|
return ( |
||||
|
<img |
||||
|
src={ad.images.url} |
||||
|
alt={ad.images.alt || ad.name} |
||||
|
onClick={() => ad.images.link && window.open(ad.images.link)} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
if (isImageArray(ad.images)) { |
||||
|
return ( |
||||
|
<div className="image-gallery"> |
||||
|
{ad.images.map(img => ( |
||||
|
<img |
||||
|
key={img.id} |
||||
|
src={img.url} |
||||
|
alt={img.alt} |
||||
|
onClick={() => img.link && window.open(img.link)} |
||||
|
/> |
||||
|
))} |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
return null; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 3. React 组件示例 |
||||
|
|
||||
|
```typescript |
||||
|
import React from 'react'; |
||||
|
import { CmsAd } from '@/api/cms/cmsAd/model'; |
||||
|
|
||||
|
interface AdComponentProps { |
||||
|
ad: CmsAd; |
||||
|
} |
||||
|
|
||||
|
const AdComponent: React.FC<AdComponentProps> = ({ ad }) => { |
||||
|
const renderImages = () => { |
||||
|
if (!ad.images) return null; |
||||
|
|
||||
|
// 处理字符串URL |
||||
|
if (typeof ad.images === 'string') { |
||||
|
return ( |
||||
|
<img |
||||
|
src={ad.images} |
||||
|
alt={ad.name} |
||||
|
style={{ width: ad.width, height: ad.height }} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 处理单个图片对象 |
||||
|
if (!Array.isArray(ad.images)) { |
||||
|
return ( |
||||
|
<a href={ad.images.link} target="_blank" rel="noopener noreferrer"> |
||||
|
<img |
||||
|
src={ad.images.url} |
||||
|
alt={ad.images.alt || ad.name} |
||||
|
title={ad.images.title} |
||||
|
style={{ width: ad.width, height: ad.height }} |
||||
|
/> |
||||
|
</a> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 处理图片数组 |
||||
|
return ( |
||||
|
<div className="ad-carousel"> |
||||
|
{ad.images.map((img, index) => ( |
||||
|
<a |
||||
|
key={img.id || index} |
||||
|
href={img.link} |
||||
|
target="_blank" |
||||
|
rel="noopener noreferrer" |
||||
|
> |
||||
|
<img |
||||
|
src={img.url} |
||||
|
alt={img.alt || ad.name} |
||||
|
title={img.title} |
||||
|
style={{ width: ad.width, height: ad.height }} |
||||
|
/> |
||||
|
</a> |
||||
|
))} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<div className="ad-container" style={{ ...JSON.parse(ad.style || '{}') }}> |
||||
|
{renderImages()} |
||||
|
{ad.imageList && ad.imageList.length > 0 && ( |
||||
|
<div className="ad-image-list"> |
||||
|
{ad.imageList.map(img => ( |
||||
|
<img |
||||
|
key={img.id} |
||||
|
src={img.url} |
||||
|
alt={img.alt} |
||||
|
title={img.title} |
||||
|
/> |
||||
|
))} |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default AdComponent; |
||||
|
``` |
||||
|
|
||||
|
## 🔍 类型检查优势 |
||||
|
|
||||
|
### 1. 编译时类型安全 |
||||
|
```typescript |
||||
|
// ✅ 正确用法 |
||||
|
const ad: CmsAd = { |
||||
|
images: 'https://example.com/image.jpg' // string |
||||
|
}; |
||||
|
|
||||
|
const ad2: CmsAd = { |
||||
|
images: { url: 'https://example.com/image.jpg' } // CmsAdImage |
||||
|
}; |
||||
|
|
||||
|
// ❌ 错误用法 - TypeScript 会报错 |
||||
|
const ad3: CmsAd = { |
||||
|
images: 123 // Error: Type 'number' is not assignable |
||||
|
}; |
||||
|
``` |
||||
|
|
||||
|
### 2. 智能代码提示 |
||||
|
```typescript |
||||
|
const ad: CmsAd = { |
||||
|
images: { |
||||
|
// IDE 会提供智能提示：id, url, alt, title, link, sortOrder |
||||
|
} |
||||
|
}; |
||||
|
``` |
||||
|
|
||||
|
### 3. 重构安全性 |
||||
|
当修改 `CmsAdImage` 接口时，TypeScript 会自动检查所有使用该类型的代码，确保类型一致性。 |
||||
|
|
||||
|
## 📈 性能优化建议 |
||||
|
|
||||
|
### 1. 图片懒加载 |
||||
|
```typescript |
||||
|
const LazyAdImage: React.FC<{ image: CmsAdImage }> = ({ image }) => { |
||||
|
return ( |
||||
|
<img |
||||
|
src={image.url} |
||||
|
alt={image.alt} |
||||
|
loading="lazy" // 原生懒加载 |
||||
|
decoding="async" |
||||
|
/> |
||||
|
); |
||||
|
}; |
||||
|
``` |
||||
|
|
||||
|
### 2. 图片预加载 |
||||
|
```typescript |
||||
|
function preloadAdImages(ad: CmsAd) { |
||||
|
const urls: string[] = []; |
||||
|
|
||||
|
if (typeof ad.images === 'string') { |
||||
|
urls.push(ad.images); |
||||
|
} else if (Array.isArray(ad.images)) { |
||||
|
urls.push(...ad.images.map(img => img.url).filter(Boolean)); |
||||
|
} else if (ad.images?.url) { |
||||
|
urls.push(ad.images.url); |
||||
|
} |
||||
|
|
||||
|
urls.forEach(url => { |
||||
|
const link = document.createElement('link'); |
||||
|
link.rel = 'preload'; |
||||
|
link.as = 'image'; |
||||
|
link.href = url; |
||||
|
document.head.appendChild(link); |
||||
|
}); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## ✅ 修复结果 |
||||
|
|
||||
|
- ✅ 消除了 `@typescript-eslint/no-explicit-any` 错误 |
||||
|
- ✅ 提供了完整的类型安全 |
||||
|
- ✅ 支持多种图片数据格式 |
||||
|
- ✅ 保持了向后兼容性 |
||||
|
- ✅ 提供了清晰的类型文档 |
||||
|
|
||||
|
现在 `CmsAd` 接口具有完整的类型安全，可以在开发时提供更好的智能提示和错误检查！ |
||||
@ -0,0 +1,50 @@ |
|||||
|
import { ReactNode } from 'react'; |
||||
|
|
||||
|
interface ContainerProps { |
||||
|
children: ReactNode; |
||||
|
className?: string; |
||||
|
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full'; |
||||
|
padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl'; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 通用容器组件，用于内容居中和响应式布局 |
||||
|
*/ |
||||
|
const Container = ({ |
||||
|
children, |
||||
|
className = '', |
||||
|
size = '7xl', |
||||
|
padding = 'md' |
||||
|
}: ContainerProps) => { |
||||
|
// 根据 size 参数设置最大宽度
|
||||
|
const maxWidthClass = { |
||||
|
'sm': 'max-w-sm', |
||||
|
'md': 'max-w-md', |
||||
|
'lg': 'max-w-lg', |
||||
|
'xl': 'max-w-xl', |
||||
|
'2xl': 'max-w-2xl', |
||||
|
'3xl': 'max-w-3xl', |
||||
|
'4xl': 'max-w-4xl', |
||||
|
'5xl': 'max-w-5xl', |
||||
|
'6xl': 'max-w-6xl', |
||||
|
'7xl': 'max-w-7xl', |
||||
|
'full': 'max-w-full' |
||||
|
}[size]; |
||||
|
|
||||
|
// 根据 padding 参数设置内边距
|
||||
|
const paddingClass = { |
||||
|
'none': '', |
||||
|
'sm': 'px-2 sm:px-4', |
||||
|
'md': 'px-4 sm:px-6 lg:px-8', |
||||
|
'lg': 'px-6 sm:px-8 lg:px-12', |
||||
|
'xl': 'px-8 sm:px-12 lg:px-16' |
||||
|
}[padding]; |
||||
|
|
||||
|
return ( |
||||
|
<div className={`${maxWidthClass} mx-auto ${paddingClass} ${className}`}> |
||||
|
{children} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default Container; |
||||
@ -0,0 +1,159 @@ |
|||||
|
'use client'; |
||||
|
import { useSiteInfoValue } from '@/hooks/useSiteInfo'; |
||||
|
import Link from 'next/link'; |
||||
|
|
||||
|
/** |
||||
|
* 导航菜单展示组件 |
||||
|
* 演示如何使用全局状态中的导航菜单数据 |
||||
|
*/ |
||||
|
const NavigationDisplay = () => { |
||||
|
const { bottomNavs, topNavs, navsLoading, navsError, isNavsLoaded } = useSiteInfoValue(); |
||||
|
|
||||
|
if (navsLoading) { |
||||
|
return ( |
||||
|
<div className="bg-gray-50 p-6 rounded-lg"> |
||||
|
<div className="animate-pulse space-y-4"> |
||||
|
<div className="h-4 bg-gray-300 rounded w-1/4"></div> |
||||
|
<div className="space-y-2"> |
||||
|
<div className="h-3 bg-gray-300 rounded w-1/2"></div> |
||||
|
<div className="h-3 bg-gray-300 rounded w-1/3"></div> |
||||
|
<div className="h-3 bg-gray-300 rounded w-1/4"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
if (navsError) { |
||||
|
return ( |
||||
|
<div className="bg-red-50 border border-red-200 p-4 rounded-lg"> |
||||
|
<p className="text-red-600 text-sm">加载导航菜单失败: {navsError}</p> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 按父级分组底部导航
|
||||
|
const groupedBottomNavs = bottomNavs.reduce((groups: Record<string, typeof bottomNavs>, nav) => { |
||||
|
if (nav.parentId === 0) { |
||||
|
// 顶级菜单作为分组标题
|
||||
|
groups[nav.title || 'default'] = bottomNavs.filter(child => child.parentId === nav.navigationId); |
||||
|
} |
||||
|
return groups; |
||||
|
}, {}); |
||||
|
|
||||
|
// 按父级分组顶部导航
|
||||
|
const groupedTopNavs = topNavs.reduce((groups: Record<string, typeof topNavs>, nav) => { |
||||
|
if (nav.parentId === 0) { |
||||
|
// 顶级菜单作为分组标题
|
||||
|
groups[nav.title || 'default'] = topNavs.filter(child => child.parentId === nav.navigationId); |
||||
|
} |
||||
|
return groups; |
||||
|
}, {}); |
||||
|
|
||||
|
return ( |
||||
|
<div className="space-y-8"> |
||||
|
{/* 顶部导航菜单 */} |
||||
|
{Object.keys(groupedTopNavs).length > 0 && ( |
||||
|
<div className="bg-white border border-gray-200 p-6 rounded-lg shadow-sm"> |
||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center"> |
||||
|
<svg className="w-5 h-5 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20"> |
||||
|
<path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" /> |
||||
|
</svg> |
||||
|
顶部导航菜单 |
||||
|
</h3> |
||||
|
|
||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
||||
|
{Object.entries(groupedTopNavs).map(([groupTitle, navs]) => ( |
||||
|
<div key={groupTitle}> |
||||
|
<h4 className="font-medium text-gray-900 mb-3">{groupTitle}</h4> |
||||
|
<ul className="space-y-2"> |
||||
|
{navs.map((nav) => ( |
||||
|
<li key={nav.navigationId}> |
||||
|
<Link |
||||
|
href={nav.path || '#'} |
||||
|
className="text-sm text-gray-600 hover:text-blue-600 transition-colors flex items-center" |
||||
|
target={nav.target === '_blank' ? '_blank' : undefined} |
||||
|
rel={nav.target === '_blank' ? 'noopener noreferrer' : undefined} |
||||
|
> |
||||
|
{nav.icon && ( |
||||
|
<span className="mr-2" dangerouslySetInnerHTML={{ __html: nav.icon }} /> |
||||
|
)} |
||||
|
{nav.title} |
||||
|
</Link> |
||||
|
</li> |
||||
|
))} |
||||
|
</ul> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* 底部导航菜单 */} |
||||
|
{Object.keys(groupedBottomNavs).length > 0 && ( |
||||
|
<div className="bg-white border border-gray-200 p-6 rounded-lg shadow-sm"> |
||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center"> |
||||
|
<svg className="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"> |
||||
|
<path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" /> |
||||
|
</svg> |
||||
|
底部导航菜单 |
||||
|
</h3> |
||||
|
|
||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
||||
|
{Object.entries(groupedBottomNavs).map(([groupTitle, navs]) => ( |
||||
|
<div key={groupTitle}> |
||||
|
<h4 className="font-medium text-gray-900 mb-3">{groupTitle}</h4> |
||||
|
<ul className="space-y-2"> |
||||
|
{navs.map((nav) => ( |
||||
|
<li key={nav.navigationId}> |
||||
|
<Link |
||||
|
href={nav.path || '#'} |
||||
|
className="text-sm text-gray-600 hover:text-green-600 transition-colors flex items-center" |
||||
|
target={nav.target === '_blank' ? '_blank' : undefined} |
||||
|
rel={nav.target === '_blank' ? 'noopener noreferrer' : undefined} |
||||
|
> |
||||
|
{nav.icon && ( |
||||
|
<span className="mr-2" dangerouslySetInnerHTML={{ __html: nav.icon }} /> |
||||
|
)} |
||||
|
{nav.title} |
||||
|
</Link> |
||||
|
</li> |
||||
|
))} |
||||
|
</ul> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* 无数据状态 */} |
||||
|
{!isNavsLoaded && !navsLoading && ( |
||||
|
<div className="bg-yellow-50 border border-yellow-200 p-6 rounded-lg text-center"> |
||||
|
<svg className="w-12 h-12 text-yellow-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
||||
|
</svg> |
||||
|
<h3 className="text-lg font-medium text-yellow-800 mb-2">暂无导航菜单数据</h3> |
||||
|
<p className="text-yellow-600 text-sm"> |
||||
|
请在后台管理系统中配置导航菜单，或者检查 API 接口是否正常返回数据。 |
||||
|
</p> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* 导航菜单统计信息 */} |
||||
|
{isNavsLoaded && ( |
||||
|
<div className="bg-blue-50 border border-blue-200 p-4 rounded-lg"> |
||||
|
<div className="flex items-center justify-between text-sm"> |
||||
|
<span className="text-blue-800"> |
||||
|
导航菜单统计: 顶部 {topNavs.length} 个，底部 {bottomNavs.length} 个 |
||||
|
</span> |
||||
|
<span className="text-blue-600"> |
||||
|
数据来源: 全局状态缓存 |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default NavigationDisplay; |
||||
@ -0,0 +1,113 @@ |
|||||
|
'use client'; |
||||
|
import { useSiteInfoValue } from '@/hooks/useSiteInfo'; |
||||
|
|
||||
|
/** |
||||
|
* 站点信息展示组件 |
||||
|
* 演示如何在任意组件中使用全局站点信息 |
||||
|
*/ |
||||
|
const SiteInfoDisplay = () => { |
||||
|
const { siteInfo, loading, error, isLoaded } = useSiteInfoValue(); |
||||
|
|
||||
|
if (loading) { |
||||
|
return ( |
||||
|
<div className="bg-gray-50 p-4 rounded-lg"> |
||||
|
<div className="animate-pulse"> |
||||
|
<div className="h-4 bg-gray-300 rounded w-1/4 mb-2"></div> |
||||
|
<div className="h-3 bg-gray-300 rounded w-1/2"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
if (error) { |
||||
|
return ( |
||||
|
<div className="bg-red-50 border border-red-200 p-4 rounded-lg"> |
||||
|
<p className="text-red-600 text-sm">加载站点信息失败: {error}</p> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
if (!isLoaded || !siteInfo) { |
||||
|
return ( |
||||
|
<div className="bg-yellow-50 border border-yellow-200 p-4 rounded-lg"> |
||||
|
<p className="text-yellow-600 text-sm">暂无站点信息</p> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<div className="bg-white border border-gray-200 p-6 rounded-lg shadow-sm"> |
||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">站点信息</h3> |
||||
|
|
||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> |
||||
|
<div> |
||||
|
<label className="block text-sm font-medium text-gray-700 mb-1"> |
||||
|
网站名称 |
||||
|
</label> |
||||
|
<p className="text-sm text-gray-900">{siteInfo.websiteName || '未设置'}</p> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-sm font-medium text-gray-700 mb-1"> |
||||
|
网站标识 |
||||
|
</label> |
||||
|
<p className="text-sm text-gray-900">{siteInfo.websiteCode || '未设置'}</p> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-sm font-medium text-gray-700 mb-1"> |
||||
|
联系电话 |
||||
|
</label> |
||||
|
<p className="text-sm text-gray-900">{siteInfo.phone || '未设置'}</p> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-sm font-medium text-gray-700 mb-1"> |
||||
|
电子邮箱 |
||||
|
</label> |
||||
|
<p className="text-sm text-gray-900">{siteInfo.email || '未设置'}</p> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-sm font-medium text-gray-700 mb-1"> |
||||
|
ICP备案号 |
||||
|
</label> |
||||
|
<p className="text-sm text-gray-900">{siteInfo.icpNo || '未设置'}</p> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-sm font-medium text-gray-700 mb-1"> |
||||
|
状态 |
||||
|
</label> |
||||
|
<span className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${ |
||||
|
siteInfo.status === 1 |
||||
|
? 'bg-green-100 text-green-800' |
||||
|
: 'bg-red-100 text-red-800' |
||||
|
}`}>
|
||||
|
{siteInfo.status === 1 ? '运行中' : '未运行'} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{siteInfo.address && ( |
||||
|
<div className="mt-4"> |
||||
|
<label className="block text-sm font-medium text-gray-700 mb-1"> |
||||
|
地址 |
||||
|
</label> |
||||
|
<p className="text-sm text-gray-900">{siteInfo.address}</p> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{siteInfo.comments && ( |
||||
|
<div className="mt-4"> |
||||
|
<label className="block text-sm font-medium text-gray-700 mb-1"> |
||||
|
备注 |
||||
|
</label> |
||||
|
<p className="text-sm text-gray-900">{siteInfo.comments}</p> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default SiteInfoDisplay; |
||||
@ -0,0 +1,109 @@ |
|||||
|
import { useEffect } from 'react' |
||||
|
import { useSiteStore } from '@/stores/useSiteStore' |
||||
|
|
||||
|
/** |
||||
|
* 站点信息 Hook |
||||
|
* 自动获取站点信息，提供缓存和错误处理 |
||||
|
*/ |
||||
|
export const useSiteInfo = (options?: { |
||||
|
/** 是否自动获取数据 */ |
||||
|
autoFetch?: boolean |
||||
|
/** 是否强制刷新 */ |
||||
|
forceRefresh?: boolean |
||||
|
/** 是否同时获取导航菜单 */ |
||||
|
includeNavs?: boolean |
||||
|
}) => { |
||||
|
const { |
||||
|
siteInfo, |
||||
|
bottomNavs, |
||||
|
topNavs, |
||||
|
loading, |
||||
|
navsLoading, |
||||
|
error, |
||||
|
navsError, |
||||
|
lastFetched, |
||||
|
navsLastFetched, |
||||
|
fetchSiteInfo, |
||||
|
fetchNavigations, |
||||
|
refreshSiteInfo, |
||||
|
refreshNavigations, |
||||
|
clearCache, |
||||
|
setSiteInfo, |
||||
|
setNavigations |
||||
|
} = useSiteStore() |
||||
|
|
||||
|
const { autoFetch = true, forceRefresh = false, includeNavs = true } = options || {} |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (autoFetch) { |
||||
|
if (forceRefresh) { |
||||
|
refreshSiteInfo() |
||||
|
if (includeNavs) { |
||||
|
refreshNavigations() |
||||
|
} |
||||
|
} else { |
||||
|
fetchSiteInfo() |
||||
|
if (includeNavs) { |
||||
|
fetchNavigations() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, [autoFetch, forceRefresh, includeNavs, fetchSiteInfo, fetchNavigations, refreshSiteInfo, refreshNavigations]) |
||||
|
|
||||
|
return { |
||||
|
// 数据状态
|
||||
|
siteInfo, |
||||
|
bottomNavs, |
||||
|
topNavs, |
||||
|
loading, |
||||
|
navsLoading, |
||||
|
error, |
||||
|
navsError, |
||||
|
lastFetched, |
||||
|
navsLastFetched, |
||||
|
|
||||
|
// 计算属性
|
||||
|
isLoaded: !!siteInfo, |
||||
|
isNavsLoaded: bottomNavs.length > 0 || topNavs.length > 0, |
||||
|
isCacheValid: lastFetched ? (Date.now() - lastFetched) < 30 * 60 * 1000 : false, |
||||
|
isNavsCacheValid: navsLastFetched ? (Date.now() - navsLastFetched) < 30 * 60 * 1000 : false, |
||||
|
|
||||
|
// 操作方法
|
||||
|
refetch: fetchSiteInfo, |
||||
|
refetchNavs: fetchNavigations, |
||||
|
refresh: refreshSiteInfo, |
||||
|
refreshNavs: refreshNavigations, |
||||
|
clearCache, |
||||
|
setSiteInfo, |
||||
|
setNavigations, |
||||
|
|
||||
|
// 便捷方法
|
||||
|
retry: () => refreshSiteInfo(), |
||||
|
retryNavs: () => refreshNavigations() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 仅获取站点信息的 Hook（不自动请求） |
||||
|
*/ |
||||
|
export const useSiteInfoValue = () => { |
||||
|
const siteInfo = useSiteStore(state => state.siteInfo) |
||||
|
const bottomNavs = useSiteStore(state => state.bottomNavs) |
||||
|
const topNavs = useSiteStore(state => state.topNavs) |
||||
|
const loading = useSiteStore(state => state.loading) |
||||
|
const navsLoading = useSiteStore(state => state.navsLoading) |
||||
|
const error = useSiteStore(state => state.error) |
||||
|
const navsError = useSiteStore(state => state.navsError) |
||||
|
|
||||
|
return { |
||||
|
siteInfo, |
||||
|
bottomNavs, |
||||
|
topNavs, |
||||
|
loading, |
||||
|
navsLoading, |
||||
|
error, |
||||
|
navsError, |
||||
|
isLoaded: !!siteInfo, |
||||
|
isNavsLoaded: bottomNavs.length > 0 || topNavs.length > 0 |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,218 @@ |
|||||
|
import { create } from 'zustand' |
||||
|
import { persist, createJSONStorage } from 'zustand/middleware' |
||||
|
import { getSiteInfo, getBottomNavigations, getTopNavigations } from '@/api/layout' |
||||
|
import { CmsWebsite } from '@/api/cms/cmsWebsite/model' |
||||
|
import { CmsNavigation } from '@/api/cms/cmsNavigation/model' |
||||
|
|
||||
|
interface SiteState { |
||||
|
// 状态
|
||||
|
siteInfo: CmsWebsite | null |
||||
|
bottomNavs: CmsNavigation[] |
||||
|
topNavs: CmsNavigation[] |
||||
|
loading: boolean |
||||
|
navsLoading: boolean |
||||
|
error: string | null |
||||
|
navsError: string | null |
||||
|
lastFetched: number | null |
||||
|
navsLastFetched: number | null |
||||
|
|
||||
|
// 操作方法
|
||||
|
fetchSiteInfo: () => Promise<void> |
||||
|
fetchNavigations: () => Promise<void> |
||||
|
refreshSiteInfo: () => Promise<void> |
||||
|
refreshNavigations: () => Promise<void> |
||||
|
clearCache: () => void |
||||
|
setSiteInfo: (siteInfo: CmsWebsite) => void |
||||
|
setNavigations: (bottomNavs: CmsNavigation[], topNavs: CmsNavigation[]) => void |
||||
|
} |
||||
|
|
||||
|
// 缓存有效期：30分钟
|
||||
|
const CACHE_DURATION = 30 * 60 * 1000 |
||||
|
|
||||
|
export const useSiteStore = create<SiteState>()( |
||||
|
persist( |
||||
|
(set, get) => ({ |
||||
|
// 初始状态
|
||||
|
siteInfo: null, |
||||
|
bottomNavs: [], |
||||
|
topNavs: [], |
||||
|
loading: false, |
||||
|
navsLoading: false, |
||||
|
error: null, |
||||
|
navsError: null, |
||||
|
lastFetched: null, |
||||
|
navsLastFetched: null, |
||||
|
|
||||
|
// 获取站点信息（带缓存逻辑）
|
||||
|
fetchSiteInfo: async () => { |
||||
|
const { siteInfo, lastFetched } = get() |
||||
|
const now = Date.now() |
||||
|
|
||||
|
// 如果有缓存且未过期，直接返回
|
||||
|
if (siteInfo && lastFetched && (now - lastFetched) < CACHE_DURATION) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
set({ loading: true, error: null }) |
||||
|
|
||||
|
try { |
||||
|
const data = await getSiteInfo() |
||||
|
set({ |
||||
|
siteInfo: data || null, |
||||
|
loading: false, |
||||
|
error: null, |
||||
|
lastFetched: now |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
const errorMessage = error instanceof Error ? error.message : '获取站点信息失败' |
||||
|
set({ |
||||
|
loading: false, |
||||
|
error: errorMessage |
||||
|
}) |
||||
|
console.error('获取站点信息失败:', error) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取导航菜单（带缓存逻辑）
|
||||
|
fetchNavigations: async () => { |
||||
|
const { bottomNavs, navsLastFetched } = get() |
||||
|
const now = Date.now() |
||||
|
|
||||
|
// 如果有缓存且未过期，直接返回
|
||||
|
if (bottomNavs.length > 0 && navsLastFetched && (now - navsLastFetched) < CACHE_DURATION) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
set({ navsLoading: true, navsError: null }) |
||||
|
|
||||
|
try { |
||||
|
const [bottomNavsData, topNavsData] = await Promise.all([ |
||||
|
getBottomNavigations(), |
||||
|
getTopNavigations() |
||||
|
]) |
||||
|
|
||||
|
set({ |
||||
|
bottomNavs: bottomNavsData || [], |
||||
|
topNavs: topNavsData || [], |
||||
|
navsLoading: false, |
||||
|
navsError: null, |
||||
|
navsLastFetched: now |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
const errorMessage = error instanceof Error ? error.message : '获取导航菜单失败' |
||||
|
set({ |
||||
|
navsLoading: false, |
||||
|
navsError: errorMessage |
||||
|
}) |
||||
|
console.error('获取导航菜单失败:', error) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 强制刷新站点信息
|
||||
|
refreshSiteInfo: async () => { |
||||
|
set({ loading: true, error: null }) |
||||
|
|
||||
|
try { |
||||
|
const data = await getSiteInfo() |
||||
|
set({ |
||||
|
siteInfo: data || null, |
||||
|
loading: false, |
||||
|
error: null, |
||||
|
lastFetched: Date.now() |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
const errorMessage = error instanceof Error ? error.message : '刷新站点信息失败' |
||||
|
set({ |
||||
|
loading: false, |
||||
|
error: errorMessage |
||||
|
}) |
||||
|
console.error('刷新站点信息失败:', error) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 强制刷新导航菜单
|
||||
|
refreshNavigations: async () => { |
||||
|
set({ navsLoading: true, navsError: null }) |
||||
|
|
||||
|
try { |
||||
|
const [bottomNavsData, topNavsData] = await Promise.all([ |
||||
|
getBottomNavigations(), |
||||
|
getTopNavigations() |
||||
|
]) |
||||
|
|
||||
|
set({ |
||||
|
bottomNavs: bottomNavsData || [], |
||||
|
topNavs: topNavsData || [], |
||||
|
navsLoading: false, |
||||
|
navsError: null, |
||||
|
navsLastFetched: Date.now() |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
const errorMessage = error instanceof Error ? error.message : '刷新导航菜单失败' |
||||
|
set({ |
||||
|
navsLoading: false, |
||||
|
navsError: errorMessage |
||||
|
}) |
||||
|
console.error('刷新导航菜单失败:', error) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 清除缓存
|
||||
|
clearCache: () => { |
||||
|
set({ |
||||
|
siteInfo: null, |
||||
|
bottomNavs: [], |
||||
|
topNavs: [], |
||||
|
loading: false, |
||||
|
navsLoading: false, |
||||
|
error: null, |
||||
|
navsError: null, |
||||
|
lastFetched: null, |
||||
|
navsLastFetched: null |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 手动设置站点信息
|
||||
|
setSiteInfo: (siteInfo: CmsWebsite) => { |
||||
|
set({ |
||||
|
siteInfo, |
||||
|
lastFetched: Date.now(), |
||||
|
error: null |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 手动设置导航菜单
|
||||
|
setNavigations: (bottomNavs: CmsNavigation[], topNavs: CmsNavigation[]) => { |
||||
|
set({ |
||||
|
bottomNavs, |
||||
|
topNavs, |
||||
|
navsLastFetched: Date.now(), |
||||
|
navsError: null |
||||
|
}) |
||||
|
} |
||||
|
}), |
||||
|
{ |
||||
|
name: 'site-storage', // 存储键名
|
||||
|
storage: createJSONStorage(() => { |
||||
|
// 优先使用 sessionStorage，降级到 localStorage
|
||||
|
if (typeof window !== 'undefined') { |
||||
|
return window.sessionStorage || window.localStorage |
||||
|
} |
||||
|
// 服务端渲染时的占位符
|
||||
|
return { |
||||
|
getItem: () => null, |
||||
|
setItem: () => {}, |
||||
|
removeItem: () => {} |
||||
|
} |
||||
|
}), |
||||
|
// 只持久化必要的数据，不持久化 loading 状态
|
||||
|
partialize: (state) => ({ |
||||
|
siteInfo: state.siteInfo, |
||||
|
bottomNavs: state.bottomNavs, |
||||
|
topNavs: state.topNavs, |
||||
|
lastFetched: state.lastFetched, |
||||
|
navsLastFetched: state.navsLastFetched |
||||
|
}) |
||||
|
} |
||||
|
) |
||||
|
) |
||||
Loading…
Reference in new issue