Add description field to PowerPackage interface and update UI to display package descriptions. Enhance styles for description tags in Buy Power component.

This commit is contained in:
超级老白兔
2025-11-04 15:09:09 +08:00
parent baf389ec65
commit 05c5915e7b
3 changed files with 30 additions and 0 deletions

View File

@@ -14,6 +14,7 @@ export interface PowerPackage {
isHot: number; // 是否热门
isVip: number; // 是否VIP
features: string[]; // 功能特性
description: string[]; // 描述关键词
status: number;
createTime: string;
updateTime: string;

View File

@@ -132,6 +132,24 @@
color: #52c41a;
}
.packageDescription {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
margin-bottom: 8px;
}
.descriptionTag {
display: inline-block;
padding: 4px 10px;
font-size: 12px;
color: #1890ff;
background: #e6f7ff;
border-radius: 4px;
border: 1px solid #91d5ff;
}
.packageFeatures {
display: flex;
flex-direction: column;

View File

@@ -204,6 +204,17 @@ const BuyPowerPage: React.FC = () => {
)}
</div>
{/* 描述信息 */}
{pkg.description && pkg.description.length > 0 && (
<div className={style.packageDescription}>
{pkg.description.map((desc, index) => (
<span key={index} className={style.descriptionTag}>
{desc}
</span>
))}
</div>
)}
{/* 特性列表 */}
{pkg.features && pkg.features.length > 0 && (
<div className={style.packageFeatures}>