哪吒面板终极进化之VPS橱窗
内容提要
本文介绍了VPS橱窗的终极进化之路，即VPS小商城。文章详细说明了添加代码的步骤和演示效果，并介绍了特性和特殊说明，包括购买按钮、数量显示、价格展示、联系方式展示和到期日期进度条展示。最后附有效果图。
延伸解读
实现前提：分类与数据映射
文章强调必须为机器增加分类，并将机器放入对应分类中，否则脚本无法正确匹配。同时，extraData 对象通过机器 ID 关联价格、周期、起止日期等信息，affLinks 则按分类名称存储邀请链接。这意味着使用前需确保面板中的分类名称与 affLinks 的键一致，且每台机器的 ID 在 extraData 中有对应条目，否则相关展示可能缺失或出错。
功能扩展与自定义空间
脚本为每台机器添加了购买同款按钮、价格与周期标签、到期进度条以及多种联系方式图标。购买按钮的链接会拼接 pid 参数（若 extraData 中 pid 非零），便于追踪推广。联系方式中 main 字段决定哪个图标显示在购买按钮旁，其余图标以圆形按钮排列。图标名称需从 Semantic UI 图标库中选取，用户可自行调整 contacts 和 extraData 的内容来适配自己的推广信息。
到期进度条的视觉提示逻辑
进度条根据 start 和 expire 日期计算当前时间所占比例，并以橙色填充宽度展示。若 expire 为 '∞'，则进度条变为绿色且无文字阴影，表示无限期。否则进度条为红色样式，并显示到期日期。这种设计让用户直观感知机器剩余时间，但需注意日期格式需为脚本可解析的格式（如 MM/DD/YYYY），否则计算可能异常。
Q&A
VPS橱窗的终极进化是什么？
VPS橱窗的终极进化为VPS小商城，功能齐全。
如何在哪吒面板中添加自定义代码？
在哪吒面板的设置界面中，进入自定义代码部分添加相应的JS代码即可。
VPS小商城支持哪些功能？
支持购买同款按钮、数量显示、价格展示、付款周期展示、多种联系方式展示和到期日期进度条展示。
如何展示到期日期的进度条？
通过设置到期日期的相关信息，系统会自动生成进度条展示到期情况。
在affLinks中应该填写什么内容？
在affLinks中填写不同平台的邀请链接地址。
如何设置联系方式和图标？
在contacts中填写所需的联系方式和对应的图标。
