一个使用 Astro + Tailwind CSS 构建的静态订阅服务管理界面,帮助您管理和跟踪各种订阅服务的到期时间。
- 📅 到期提醒: 自动计算并显示订阅服务的到期状态
- 🎯 智能分类: 按状态筛选(已过期、即将到期、正常)
- 📊 统计概览: 显示总订阅数、过期数量和月度支出
- 📱 响应式设计: 支持桌面和移动设备
- 🏷️ 标签系统: 支持为订阅服务添加标签
- 💰 多币种支持: 支持人民币、美元、欧元等
- 📝 Markdown 管理: 使用 Markdown 文件管理订阅数据
src/
├── content/
│ ├── config.ts # 内容集合配置
│ └── subscriptions/ # 订阅服务 Markdown 文件
├── layouts/
│ └── Layout.astro # 页面布局
├── pages/
│ └── index.astro # 主页面
└── components/ # 组件目录(可扩展)
- 安装依赖:
npm install
- 启动开发服务器:
npm run dev
- 构建生产版本:
npm run build
- 预览生产版本:
npm run preview
在 src/content/subscriptions/
目录下创建新的 Markdown 文件,例如 example.md
:
---
title: 服务名称
service: 提供商
price: 价格数字
currency: CNY # CNY, USD, EUR
billingCycle: monthly # monthly, yearly, quarterly, weekly
nextBillingDate: 2025-12-31 # YYYY-MM-DD 格式
category: 分类名称
description: 服务描述
website: https://example.com
isActive: true
tags: ["标签1", "标签2"]
notes: 备注信息
---
# 详细描述
在这里可以添加关于订阅服务的详细信息。
- 🔴 已过期: 超过到期日期
- 🟡 即将到期: 3天内到期
- 🟠 需要关注: 7天内到期
- 🟢 正常: 7天以上到期
- Astro - 静态站点生成器
- Tailwind CSS - CSS 框架
- TypeScript - 类型安全
- Markdown - 内容管理
在 src/pages/index.astro
中找到月度支出计算部分,可以修改汇率:
// 当前美元汇率设置为 7.2
sub.data.currency === 'CNY' ? monthlyPrice : monthlyPrice * 7.2
在 getExpiryStatus
函数中可以调整提醒时间:
// 修改这些数值来调整提醒阈值
else if (diffDays <= 3) { // 3天内显示警告
else if (diffDays <= 7) { // 7天内显示注意
这是一个纯静态网站,可以部署到任何静态托管服务:
MIT License