Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
0d6334592d | ||
|
|
c501bb7dd4 | ||
|
|
d24389af66 | ||
| 97f38b44f5 | |||
|
|
62350492e9 | ||
|
|
9540c2b550 | ||
|
|
006f3d4dbb | ||
|
|
ff8d497f97 | ||
|
|
9c2799f7d5 | ||
|
|
dd70f9d886 | ||
|
|
35cccf6a8f | ||
| c5616600fa | |||
|
|
986708fbb4 | ||
|
|
6a1b68ed2c | ||
|
|
32970acf32 | ||
|
|
812bb8c248 | ||
|
|
09f9e6588f | ||
|
|
10a167febd |
171
SEO-README.md
171
SEO-README.md
@@ -1,171 +0,0 @@
|
|||||||
# SEO 优化说明
|
|
||||||
|
|
||||||
本项目已完成基础 SEO 优化，以下是已实施的改动。
|
|
||||||
|
|
||||||
## 已完成的优化项
|
|
||||||
|
|
||||||
### 1. HTML Meta 标签优化 ✅
|
|
||||||
|
|
||||||
在 `index.html` 中添加了完整的 SEO 元数据：
|
|
||||||
|
|
||||||
- **基础 Meta 标签**
|
|
||||||
- title, description, keywords
|
|
||||||
- author, theme-color
|
|
||||||
- canonical URL
|
|
||||||
|
|
||||||
- **Open Graph 标签**（社交媒体分享优化）
|
|
||||||
- og:type, og:url, og:title
|
|
||||||
- og:description, og:image, og:site_name
|
|
||||||
|
|
||||||
- **Twitter Card 标签**
|
|
||||||
- twitter:card, twitter:title
|
|
||||||
- twitter:description, twitter:image
|
|
||||||
|
|
||||||
- **结构化数据**（JSON-LD）
|
|
||||||
- Schema.org WebSite 类型标记
|
|
||||||
- 提升搜索引擎理解能力
|
|
||||||
|
|
||||||
### 2. SEO 配置文件 ✅
|
|
||||||
|
|
||||||
- **`public/robots.txt`** - 搜索引擎爬虫规则
|
|
||||||
- 允许所有爬虫访问
|
|
||||||
- 指定 sitemap 位置
|
|
||||||
|
|
||||||
- **`public/sitemap.xml`** - 站点地图（自动生成）
|
|
||||||
- 包含所有工具页面 URL
|
|
||||||
- 设置更新频率和优先级
|
|
||||||
- 通过 `scripts/generate-sitemap.ts` 自动生成
|
|
||||||
|
|
||||||
- **`public/manifest.json`** - PWA 配置
|
|
||||||
- 支持渐进式 Web 应用
|
|
||||||
- 改善移动端体验
|
|
||||||
|
|
||||||
### 3. 构建流程优化 ✅
|
|
||||||
|
|
||||||
- **`package.json`**
|
|
||||||
- 构建时自动生成 sitemap
|
|
||||||
- 添加 tsx 依赖用于运行生成脚本
|
|
||||||
|
|
||||||
## 文件清单
|
|
||||||
|
|
||||||
### 新增文件
|
|
||||||
```
|
|
||||||
public/
|
|
||||||
├── robots.txt # 爬虫规则
|
|
||||||
├── sitemap.xml # 站点地图（自动生成）
|
|
||||||
└── manifest.json # PWA 配置
|
|
||||||
|
|
||||||
scripts/
|
|
||||||
└── generate-sitemap.ts # Sitemap 生成脚本
|
|
||||||
```
|
|
||||||
|
|
||||||
### 修改文件
|
|
||||||
```
|
|
||||||
index.html # 添加 SEO meta 标签和结构化数据
|
|
||||||
package.json # 添加 sitemap 生成命令
|
|
||||||
```
|
|
||||||
|
|
||||||
## 使用说明
|
|
||||||
|
|
||||||
### 开发
|
|
||||||
```bash
|
|
||||||
pnpm install # 安装依赖
|
|
||||||
pnpm dev # 启动开发服务器
|
|
||||||
```
|
|
||||||
|
|
||||||
### 构建
|
|
||||||
```bash
|
|
||||||
pnpm run build # 构建项目（自动生成 sitemap）
|
|
||||||
pnpm run generate:sitemap # 单独生成 sitemap
|
|
||||||
```
|
|
||||||
|
|
||||||
### 部署前检查
|
|
||||||
|
|
||||||
⚠️ **重要：部署前必须更新配置文件中的域名！**
|
|
||||||
|
|
||||||
需要将以下文件中的 `https://litek.typist.cc` 替换为你的实际域名：
|
|
||||||
|
|
||||||
1. **`index.html`**
|
|
||||||
- canonical URL
|
|
||||||
- Open Graph URL 和 image
|
|
||||||
- Twitter Card image
|
|
||||||
- Structured Data URL
|
|
||||||
|
|
||||||
2. **`public/robots.txt`**
|
|
||||||
- Sitemap URL
|
|
||||||
|
|
||||||
3. **`scripts/generate-sitemap.ts`**
|
|
||||||
- BASE_URL 常量
|
|
||||||
|
|
||||||
更新后重新构建：
|
|
||||||
```bash
|
|
||||||
pnpm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
## SEO 验证
|
|
||||||
|
|
||||||
### 部署后验证
|
|
||||||
|
|
||||||
1. **提交 sitemap 到 Google Search Console**
|
|
||||||
- 访问 https://search.google.com/search-console
|
|
||||||
- 添加网站资源
|
|
||||||
- 提交 sitemap: `https://你的域名/sitemap.xml`
|
|
||||||
|
|
||||||
2. **测试结构化数据**
|
|
||||||
- 访问 https://validator.schema.org/
|
|
||||||
- 输入网站 URL
|
|
||||||
- 检查是否有错误
|
|
||||||
|
|
||||||
3. **测试 Open Graph 预览**
|
|
||||||
- Facebook: https://developers.facebook.com/tools/debug/
|
|
||||||
- Twitter: https://cards-dev.twitter.com/validator
|
|
||||||
|
|
||||||
4. **性能测试**
|
|
||||||
- Google PageSpeed Insights: https://pagespeed.web.dev/
|
|
||||||
- 目标分数: SEO > 95
|
|
||||||
|
|
||||||
## 可访问的 URL
|
|
||||||
|
|
||||||
部署后，以下 URL 应该可以正常访问：
|
|
||||||
|
|
||||||
- `https://你的域名/` - 主页
|
|
||||||
- `https://你的域名/robots.txt` - 爬虫规则
|
|
||||||
- `https://你的域名/sitemap.xml` - 站点地图
|
|
||||||
- `https://你的域名/manifest.json` - PWA 配置
|
|
||||||
- `https://你的域名/tool/uuid` - UUID 工具
|
|
||||||
- `https://你的域名/tool/json` - JSON 工具
|
|
||||||
- `https://你的域名/tool/base64` - Base64 工具
|
|
||||||
- `https://你的域名/tool/network/dns` - DNS 工具
|
|
||||||
- ... 其他工具页面
|
|
||||||
|
|
||||||
## 添加新工具时更新 SEO
|
|
||||||
|
|
||||||
当添加新工具时，需要更新 `scripts/generate-sitemap.ts`：
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
const tools = [
|
|
||||||
// 现有工具...
|
|
||||||
{ path: '/tool/你的新工具', priority: '0.9' },
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
然后重新构建项目。
|
|
||||||
|
|
||||||
## SEO 效果预期
|
|
||||||
|
|
||||||
- **1-2 周**：搜索引擎开始索引页面
|
|
||||||
- **1-2 月**：主要关键词开始有排名
|
|
||||||
- **3-6 月**：稳定的搜索排名和自然流量增长
|
|
||||||
|
|
||||||
## 技术栈
|
|
||||||
|
|
||||||
- React 19 + TypeScript
|
|
||||||
- Vite (Rolldown)
|
|
||||||
- React Router v7
|
|
||||||
- Radix UI + Tailwind CSS 4
|
|
||||||
- Nginx
|
|
||||||
|
|
||||||
## 联系方式
|
|
||||||
|
|
||||||
需要更多工具或有建议？联系：litek@mail.typist.cc
|
|
||||||
|
|
||||||
@@ -18,6 +18,11 @@
|
|||||||
<link rel="dns-prefetch" href="https://ipinfo.io">
|
<link rel="dns-prefetch" href="https://ipinfo.io">
|
||||||
<link rel="preconnect" href="https://ipinfo.io" crossorigin>
|
<link rel="preconnect" href="https://ipinfo.io" crossorigin>
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Open Graph / Facebook -->
|
<!-- Open Graph / Facebook -->
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:url" content="https://litek.typist.cc/" />
|
<meta property="og:url" content="https://litek.typist.cc/" />
|
||||||
@@ -59,5 +64,9 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
|
||||||
|
<!-- Cloudflare Web Analytics -->
|
||||||
|
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "2aecdc025eb043bc89ce931b54a80054"}'></script>
|
||||||
|
<!-- End Cloudflare Web Analytics -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "litek",
|
"name": "litek",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.23",
|
"version": "0.0.31",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
@@ -17,12 +17,15 @@
|
|||||||
"@radix-ui/react-collapsible": "^1.1.12",
|
"@radix-ui/react-collapsible": "^1.1.12",
|
||||||
"@radix-ui/react-dialog": "^1.1.15",
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
|
"@radix-ui/react-label": "^2.1.7",
|
||||||
|
"@radix-ui/react-popover": "^1.1.15",
|
||||||
"@radix-ui/react-separator": "^1.1.7",
|
"@radix-ui/react-separator": "^1.1.7",
|
||||||
"@radix-ui/react-slot": "^1.2.3",
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
"@radix-ui/react-tooltip": "^1.2.8",
|
"@radix-ui/react-tooltip": "^1.2.8",
|
||||||
"@tailwindcss/vite": "^4.1.16",
|
"@tailwindcss/vite": "^4.1.16",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"cmdk": "^1.1.1",
|
||||||
"lucide-react": "^0.548.0",
|
"lucide-react": "^0.548.0",
|
||||||
"nanoid": "^5.1.6",
|
"nanoid": "^5.1.6",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
|
|||||||
85
pnpm-lock.yaml
generated
85
pnpm-lock.yaml
generated
@@ -20,6 +20,12 @@ importers:
|
|||||||
'@radix-ui/react-dropdown-menu':
|
'@radix-ui/react-dropdown-menu':
|
||||||
specifier: ^2.1.16
|
specifier: ^2.1.16
|
||||||
version: 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
version: 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
'@radix-ui/react-label':
|
||||||
|
specifier: ^2.1.7
|
||||||
|
version: 2.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
'@radix-ui/react-popover':
|
||||||
|
specifier: ^1.1.15
|
||||||
|
version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
'@radix-ui/react-separator':
|
'@radix-ui/react-separator':
|
||||||
specifier: ^1.1.7
|
specifier: ^1.1.7
|
||||||
version: 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
version: 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
@@ -38,6 +44,9 @@ importers:
|
|||||||
clsx:
|
clsx:
|
||||||
specifier: ^2.1.1
|
specifier: ^2.1.1
|
||||||
version: 2.1.1
|
version: 2.1.1
|
||||||
|
cmdk:
|
||||||
|
specifier: ^1.1.1
|
||||||
|
version: 1.1.1(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
lucide-react:
|
lucide-react:
|
||||||
specifier: ^0.548.0
|
specifier: ^0.548.0
|
||||||
version: 0.548.0(react@19.2.0)
|
version: 0.548.0(react@19.2.0)
|
||||||
@@ -1050,6 +1059,19 @@ packages:
|
|||||||
'@types/react':
|
'@types/react':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
'@radix-ui/react-label@2.1.7':
|
||||||
|
resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
'@types/react-dom': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
'@types/react-dom':
|
||||||
|
optional: true
|
||||||
|
|
||||||
'@radix-ui/react-menu@2.1.16':
|
'@radix-ui/react-menu@2.1.16':
|
||||||
resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
|
resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@@ -1063,6 +1085,19 @@ packages:
|
|||||||
'@types/react-dom':
|
'@types/react-dom':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
'@radix-ui/react-popover@1.1.15':
|
||||||
|
resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
'@types/react-dom': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
'@types/react-dom':
|
||||||
|
optional: true
|
||||||
|
|
||||||
'@radix-ui/react-popper@1.2.8':
|
'@radix-ui/react-popper@1.2.8':
|
||||||
resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
|
resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@@ -1703,6 +1738,12 @@ packages:
|
|||||||
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
|
|
||||||
|
cmdk@1.1.1:
|
||||||
|
resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
|
||||||
|
peerDependencies:
|
||||||
|
react: ^18 || ^19 || ^19.0.0-rc
|
||||||
|
react-dom: ^18 || ^19 || ^19.0.0-rc
|
||||||
|
|
||||||
color-convert@2.0.1:
|
color-convert@2.0.1:
|
||||||
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
|
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
|
||||||
engines: {node: '>=7.0.0'}
|
engines: {node: '>=7.0.0'}
|
||||||
@@ -4085,6 +4126,15 @@ snapshots:
|
|||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
'@types/react': 19.2.2
|
'@types/react': 19.2.2
|
||||||
|
|
||||||
|
'@radix-ui/react-label@2.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
|
||||||
|
dependencies:
|
||||||
|
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
react: 19.2.0
|
||||||
|
react-dom: 19.2.0(react@19.2.0)
|
||||||
|
optionalDependencies:
|
||||||
|
'@types/react': 19.2.2
|
||||||
|
'@types/react-dom': 19.2.2(@types/react@19.2.2)
|
||||||
|
|
||||||
'@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
|
'@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@radix-ui/primitive': 1.1.3
|
'@radix-ui/primitive': 1.1.3
|
||||||
@@ -4111,6 +4161,29 @@ snapshots:
|
|||||||
'@types/react': 19.2.2
|
'@types/react': 19.2.2
|
||||||
'@types/react-dom': 19.2.2(@types/react@19.2.2)
|
'@types/react-dom': 19.2.2(@types/react@19.2.2)
|
||||||
|
|
||||||
|
'@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
|
||||||
|
dependencies:
|
||||||
|
'@radix-ui/primitive': 1.1.3
|
||||||
|
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
|
||||||
|
'@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
|
||||||
|
'@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
'@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.0)
|
||||||
|
'@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
'@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
|
||||||
|
'@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
'@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
'@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
'@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
|
||||||
|
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
|
||||||
|
aria-hidden: 1.2.6
|
||||||
|
react: 19.2.0
|
||||||
|
react-dom: 19.2.0(react@19.2.0)
|
||||||
|
react-remove-scroll: 2.7.1(@types/react@19.2.2)(react@19.2.0)
|
||||||
|
optionalDependencies:
|
||||||
|
'@types/react': 19.2.2
|
||||||
|
'@types/react-dom': 19.2.2(@types/react@19.2.2)
|
||||||
|
|
||||||
'@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
|
'@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
'@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
@@ -4736,6 +4809,18 @@ snapshots:
|
|||||||
|
|
||||||
clsx@2.1.1: {}
|
clsx@2.1.1: {}
|
||||||
|
|
||||||
|
cmdk@1.1.1(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
|
||||||
|
dependencies:
|
||||||
|
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
|
||||||
|
'@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
'@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
|
||||||
|
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
react: 19.2.0
|
||||||
|
react-dom: 19.2.0(react@19.2.0)
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- '@types/react'
|
||||||
|
- '@types/react-dom'
|
||||||
|
|
||||||
color-convert@2.0.1:
|
color-convert@2.0.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
color-name: 1.1.4
|
color-name: 1.1.4
|
||||||
|
|||||||
@@ -114,11 +114,7 @@ export const AppSidebar = () => {
|
|||||||
</SidebarGroupContent>
|
</SidebarGroupContent>
|
||||||
</SidebarGroup>
|
</SidebarGroup>
|
||||||
</SidebarContent>
|
</SidebarContent>
|
||||||
<SidebarFooter className="flex flex-row justify-between items-center gap-2">
|
<SidebarFooter className="flex flex-col gap-2" />
|
||||||
<SidebarMenuButton variant="outline" asChild>
|
|
||||||
<a href="mailto:litek@mail.typist.cc">need more tools?</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarFooter>
|
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
469
src/components/tool/currency.tsx
Normal file
469
src/components/tool/currency.tsx
Normal file
@@ -0,0 +1,469 @@
|
|||||||
|
import { useState, useEffect, type FC } from "react";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||||
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Check, X, Plus } from "lucide-react";
|
||||||
|
|
||||||
|
interface Currency {
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
symbol: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Available currencies (supported by Frankfurter API)
|
||||||
|
const AVAILABLE_CURRENCIES: Currency[] = [
|
||||||
|
{ code: "USD", name: "US Dollar", symbol: "$" },
|
||||||
|
{ code: "CNY", name: "Chinese Yuan", symbol: "¥" },
|
||||||
|
{ code: "EUR", name: "Euro", symbol: "€" },
|
||||||
|
{ code: "GBP", name: "British Pound", symbol: "£" },
|
||||||
|
{ code: "JPY", name: "Japanese Yen", symbol: "¥" },
|
||||||
|
{ code: "HKD", name: "Hong Kong Dollar", symbol: "HK$" },
|
||||||
|
{ code: "AUD", name: "Australian Dollar", symbol: "A$" },
|
||||||
|
{ code: "CAD", name: "Canadian Dollar", symbol: "C$" },
|
||||||
|
{ code: "SGD", name: "Singapore Dollar", symbol: "S$" },
|
||||||
|
{ code: "CHF", name: "Swiss Franc", symbol: "CHF" },
|
||||||
|
{ code: "NZD", name: "New Zealand Dollar", symbol: "NZ$" },
|
||||||
|
{ code: "KRW", name: "South Korean Won", symbol: "₩" },
|
||||||
|
{ code: "THB", name: "Thai Baht", symbol: "฿" },
|
||||||
|
{ code: "MYR", name: "Malaysian Ringgit", symbol: "RM" },
|
||||||
|
{ code: "INR", name: "Indian Rupee", symbol: "₹" },
|
||||||
|
{ code: "BRL", name: "Brazilian Real", symbol: "R$" },
|
||||||
|
{ code: "MXN", name: "Mexican Peso", symbol: "MX$" },
|
||||||
|
{ code: "SEK", name: "Swedish Krona", symbol: "kr" },
|
||||||
|
{ code: "NOK", name: "Norwegian Krone", symbol: "kr" },
|
||||||
|
{ code: "DKK", name: "Danish Krone", symbol: "kr" },
|
||||||
|
{ code: "PLN", name: "Polish Złoty", symbol: "zł" },
|
||||||
|
{ code: "TRY", name: "Turkish Lira", symbol: "₺" },
|
||||||
|
{ code: "PHP", name: "Philippine Peso", symbol: "₱" },
|
||||||
|
{ code: "IDR", name: "Indonesian Rupiah", symbol: "Rp" },
|
||||||
|
{ code: "ILS", name: "Israeli New Shekel", symbol: "₪" },
|
||||||
|
{ code: "CZK", name: "Czech Koruna", symbol: "Kč" },
|
||||||
|
{ code: "RON", name: "Romanian Leu", symbol: "lei" },
|
||||||
|
{ code: "HUF", name: "Hungarian Forint", symbol: "Ft" },
|
||||||
|
{ code: "BGN", name: "Bulgarian Lev", symbol: "лв" },
|
||||||
|
{ code: "ISK", name: "Icelandic Króna", symbol: "kr" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Required currencies (cannot be removed) - USD first, CNY second
|
||||||
|
const REQUIRED_CURRENCIES = ["USD", "CNY"];
|
||||||
|
|
||||||
|
const STORAGE_KEY = "selectedCurrencies";
|
||||||
|
const RATES_CACHE_KEY = "currencyRatesCache";
|
||||||
|
|
||||||
|
const Tool: FC = () => {
|
||||||
|
const [amounts, setAmounts] = useState<Record<string, string>>({});
|
||||||
|
const [selectedCurrencies, setSelectedCurrencies] = useState<string[]>([]);
|
||||||
|
const [rates, setRates] = useState<Record<string, number>>({});
|
||||||
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
// Load selected currencies from localStorage
|
||||||
|
useEffect(() => {
|
||||||
|
try {
|
||||||
|
const saved = localStorage.getItem(STORAGE_KEY);
|
||||||
|
if (saved) {
|
||||||
|
const parsed = JSON.parse(saved);
|
||||||
|
if (Array.isArray(parsed) && parsed.length >= 2) {
|
||||||
|
setSelectedCurrencies(parsed);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to load saved currencies:", error);
|
||||||
|
}
|
||||||
|
// Default: USD and CNY (USD first)
|
||||||
|
setSelectedCurrencies(["USD", "CNY"]);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Save selected currencies to localStorage
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedCurrencies.length >= 2) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(selectedCurrencies));
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to save currencies:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [selectedCurrencies]);
|
||||||
|
|
||||||
|
// Fetch exchange rates with date-based caching
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchRates = async () => {
|
||||||
|
try {
|
||||||
|
// 1. Try to load from cache
|
||||||
|
const cached = localStorage.getItem(RATES_CACHE_KEY);
|
||||||
|
if (cached) {
|
||||||
|
try {
|
||||||
|
const { rates: cachedRates, date: cachedDate, fetchedAt } = JSON.parse(cached);
|
||||||
|
|
||||||
|
const now = Date.now();
|
||||||
|
const twelveHoursInMs = 12 * 60 * 60 * 1000;
|
||||||
|
|
||||||
|
// Strategy: Use cache if it's recent enough (within 12 hours)
|
||||||
|
// This handles all edge cases: weekends, holidays, timezone differences
|
||||||
|
// Exchange rates update once per day, so 12-hour cache is reasonable
|
||||||
|
if (fetchedAt && (now - fetchedAt < twelveHoursInMs)) {
|
||||||
|
setRates(cachedRates);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
// Cache is older than 12 hours, show it first then update in background
|
||||||
|
setRates(cachedRates);
|
||||||
|
setLoading(false);
|
||||||
|
// Continue to fetch new data below
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to parse cached rates:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Fetch latest data from network
|
||||||
|
setLoading(true);
|
||||||
|
const response = await fetch("https://api.frankfurter.app/latest?base=USD", {
|
||||||
|
cache: "no-cache",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
const allRates: Record<string, number> = { USD: 1, ...data.rates };
|
||||||
|
const apiDate = data.date; // Date from API (YYYY-MM-DD format)
|
||||||
|
|
||||||
|
// 3. Update state and cache (with timestamp)
|
||||||
|
setRates(allRates);
|
||||||
|
localStorage.setItem(
|
||||||
|
RATES_CACHE_KEY,
|
||||||
|
JSON.stringify({
|
||||||
|
rates: allRates,
|
||||||
|
date: apiDate,
|
||||||
|
fetchedAt: Date.now() // Timestamp when we fetched the data
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
// If cache exists, continue using it even if network fails
|
||||||
|
const cached = localStorage.getItem(RATES_CACHE_KEY);
|
||||||
|
if (cached) {
|
||||||
|
try {
|
||||||
|
const { rates: cachedRates } = JSON.parse(cached);
|
||||||
|
setRates(cachedRates);
|
||||||
|
toast.info("Using cached exchange rates (network request failed)");
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to use cached rates:", e);
|
||||||
|
if (error instanceof Error) {
|
||||||
|
toast.error(`Failed to fetch rates: ${error.message}`);
|
||||||
|
} else {
|
||||||
|
toast.error("Failed to fetch rates");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (error instanceof Error) {
|
||||||
|
toast.error(`Failed to fetch rates: ${error.message}`);
|
||||||
|
} else {
|
||||||
|
toast.error("Failed to fetch rates");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchRates();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Initialize amounts after rates are loaded
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedCurrencies.length > 0 && Object.keys(rates).length > 0) {
|
||||||
|
if (Object.keys(amounts).length === 0) {
|
||||||
|
// Initial setup: 1 USD as base
|
||||||
|
const initialAmounts: Record<string, string> = {};
|
||||||
|
const baseAmountInUSD = 1; // 1 USD
|
||||||
|
|
||||||
|
selectedCurrencies.forEach(code => {
|
||||||
|
if (rates[code]) {
|
||||||
|
const convertedAmount = baseAmountInUSD * rates[code];
|
||||||
|
initialAmounts[code] = convertedAmount.toFixed(2);
|
||||||
|
} else {
|
||||||
|
initialAmounts[code] = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setAmounts(initialAmounts);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [selectedCurrencies, rates, amounts]);
|
||||||
|
|
||||||
|
// Auto-update amounts when rates change
|
||||||
|
useEffect(() => {
|
||||||
|
if (Object.keys(rates).length > 0 && Object.keys(amounts).length > 0) {
|
||||||
|
// Find first currency with value as base
|
||||||
|
const baseCurrency = selectedCurrencies.find(code => amounts[code] && parseFloat(amounts[code]) > 0);
|
||||||
|
|
||||||
|
if (baseCurrency && rates[baseCurrency]) {
|
||||||
|
const baseValue = parseFloat(amounts[baseCurrency]);
|
||||||
|
const amountInUSD = baseValue / rates[baseCurrency];
|
||||||
|
|
||||||
|
// Recalculate all currencies
|
||||||
|
const updatedAmounts: Record<string, string> = {};
|
||||||
|
selectedCurrencies.forEach(code => {
|
||||||
|
if (rates[code]) {
|
||||||
|
const convertedAmount = amountInUSD * rates[code];
|
||||||
|
updatedAmounts[code] = convertedAmount.toFixed(2);
|
||||||
|
} else {
|
||||||
|
updatedAmounts[code] = amounts[code] || "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Only update if values changed
|
||||||
|
const hasChanged = selectedCurrencies.some(
|
||||||
|
code => updatedAmounts[code] !== amounts[code]
|
||||||
|
);
|
||||||
|
if (hasChanged) {
|
||||||
|
setAmounts(updatedAmounts);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [rates]);
|
||||||
|
|
||||||
|
// Handle amount input change
|
||||||
|
const handleAmountChange = (currencyCode: string, value: string) => {
|
||||||
|
// Only allow numbers and decimal point
|
||||||
|
if (value !== "" && !/^\d*\.?\d*$/.test(value)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!rates[currencyCode]) {
|
||||||
|
setAmounts({ ...amounts, [currencyCode]: value });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear all if empty
|
||||||
|
if (value === "" || value === "0" || parseFloat(value) === 0) {
|
||||||
|
const newAmounts: Record<string, string> = {};
|
||||||
|
selectedCurrencies.forEach(code => {
|
||||||
|
newAmounts[code] = "";
|
||||||
|
});
|
||||||
|
setAmounts(newAmounts);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputValue = parseFloat(value);
|
||||||
|
|
||||||
|
// Calculate other currencies
|
||||||
|
const newAmounts: Record<string, string> = { [currencyCode]: value };
|
||||||
|
|
||||||
|
// Convert to USD first
|
||||||
|
const amountInUSD = inputValue / rates[currencyCode];
|
||||||
|
|
||||||
|
// Convert to other currencies
|
||||||
|
selectedCurrencies.forEach(code => {
|
||||||
|
if (code !== currencyCode && rates[code]) {
|
||||||
|
const convertedAmount = amountInUSD * rates[code];
|
||||||
|
newAmounts[code] = convertedAmount.toFixed(2);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setAmounts(newAmounts);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add currency
|
||||||
|
const addCurrency = (currencyCode: string) => {
|
||||||
|
if (!selectedCurrencies.includes(currencyCode)) {
|
||||||
|
setSelectedCurrencies([...selectedCurrencies, currencyCode]);
|
||||||
|
|
||||||
|
// Calculate initial amount for new currency
|
||||||
|
if (rates[currencyCode] && Object.keys(amounts).length > 0) {
|
||||||
|
const firstCurrency = selectedCurrencies[0];
|
||||||
|
if (firstCurrency && amounts[firstCurrency] && rates[firstCurrency]) {
|
||||||
|
const firstAmount = parseFloat(amounts[firstCurrency]) || 0;
|
||||||
|
const amountInUSD = firstAmount / rates[firstCurrency];
|
||||||
|
const newAmount = amountInUSD * rates[currencyCode];
|
||||||
|
setAmounts({ ...amounts, [currencyCode]: newAmount.toFixed(2) });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(`Added ${currencyCode}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Remove currency
|
||||||
|
const removeCurrency = (currencyCode: string) => {
|
||||||
|
if (REQUIRED_CURRENCIES.includes(currencyCode)) {
|
||||||
|
toast.error(`${currencyCode} is required and cannot be removed`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (selectedCurrencies.length <= 2) {
|
||||||
|
toast.error("At least two currencies are required");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSelectedCurrencies(selectedCurrencies.filter((c) => c !== currencyCode));
|
||||||
|
|
||||||
|
// Remove corresponding amount
|
||||||
|
const newAmounts = { ...amounts };
|
||||||
|
delete newAmounts[currencyCode];
|
||||||
|
setAmounts(newAmounts);
|
||||||
|
|
||||||
|
toast.success(`Removed ${currencyCode}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get currency info
|
||||||
|
const getCurrency = (code: string): Currency | undefined => {
|
||||||
|
return AVAILABLE_CURRENCIES.find((c) => c.code === code);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-4 h-full">
|
||||||
|
|
||||||
|
{/* Currency selector */}
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Label>Select Currencies</Label>
|
||||||
|
{/* Add currency button - fixed at top right */}
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button variant="outline" size="sm" className="gap-1">
|
||||||
|
<Plus className="size-4" />
|
||||||
|
Add Currency
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[300px] p-0" align="end" side="bottom" sideOffset={5}>
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Search currencies..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No currency found</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{AVAILABLE_CURRENCIES.map((currency) => {
|
||||||
|
const isSelected = selectedCurrencies.includes(currency.code);
|
||||||
|
const isRequired = REQUIRED_CURRENCIES.includes(currency.code);
|
||||||
|
return (
|
||||||
|
<CommandItem
|
||||||
|
key={currency.code}
|
||||||
|
value={`${currency.code} ${currency.name}`}
|
||||||
|
disabled={isRequired}
|
||||||
|
onSelect={() => {
|
||||||
|
if (isRequired) return; // Required currencies cannot be toggled
|
||||||
|
if (isSelected && selectedCurrencies.length > 2) {
|
||||||
|
removeCurrency(currency.code);
|
||||||
|
} else if (!isSelected) {
|
||||||
|
addCurrency(currency.code);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={`mr-2 size-4 flex-shrink-0 ${
|
||||||
|
isSelected ? "opacity-100" : "opacity-0"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<span className="inline-block w-8 text-right flex-shrink-0">{currency.symbol}</span>
|
||||||
|
<span className="ml-2">{currency.code}</span>
|
||||||
|
</CommandItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Selected currency badges */}
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{selectedCurrencies.map((code) => {
|
||||||
|
const currency = getCurrency(code);
|
||||||
|
const isRequired = REQUIRED_CURRENCIES.includes(code);
|
||||||
|
return (
|
||||||
|
<Badge
|
||||||
|
key={code}
|
||||||
|
variant={isRequired ? "default" : "secondary"}
|
||||||
|
className={`relative gap-1 px-2.5 py-1 transition-all duration-200 ${
|
||||||
|
!isRequired
|
||||||
|
? "cursor-pointer hover:bg-destructive hover:text-destructive-foreground hover:border-destructive group"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
if (!isRequired) {
|
||||||
|
removeCurrency(code);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className={!isRequired ? "group-hover:opacity-0 transition-opacity duration-200" : ""}>
|
||||||
|
{currency?.symbol} {code}
|
||||||
|
</span>
|
||||||
|
{!isRequired && (
|
||||||
|
<X className="absolute inset-0 m-auto size-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
|
||||||
|
)}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{REQUIRED_CURRENCIES.map((c) => getCurrency(c)?.code).join(", ")} are required. At least two currencies needed.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Currency list */}
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center py-8 text-muted-foreground">
|
||||||
|
Loading exchange rates...
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-3 flex-1 overflow-auto">
|
||||||
|
<div className="text-sm font-medium">Currency Amounts:</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 auto-rows-min">
|
||||||
|
{selectedCurrencies.map((code) => {
|
||||||
|
const currency = getCurrency(code);
|
||||||
|
if (!currency) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card key={code} className="flex flex-col">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
<div className="leading-tight">
|
||||||
|
<div>{currency.symbol} {currency.code}</div>
|
||||||
|
<div className="text-xs font-normal mt-1">{currency.name}</div>
|
||||||
|
</div>
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter amount"
|
||||||
|
value={amounts[code] || ""}
|
||||||
|
onChange={(e) => handleAmountChange(code, e.target.value)}
|
||||||
|
className="text-xl font-semibold"
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && Object.keys(rates).length > 0 && (
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
Exchange rate data from:{" "}
|
||||||
|
<a
|
||||||
|
href="https://www.frankfurter.app/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="underline hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
Frankfurter API
|
||||||
|
</a>
|
||||||
|
{" "}(Based on European Central Bank data)
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Tool;
|
||||||
|
|
||||||
@@ -1,10 +1,11 @@
|
|||||||
import { lazy, type ReactNode, type ComponentType } from 'react';
|
import { lazy, type ReactNode, type ComponentType } from 'react';
|
||||||
import { FileJson, Hash, Binary, Network, Globe, Activity, Gauge, Wifi, MapPin } from 'lucide-react'
|
import { FileJson, Hash, Binary, Network, Globe, Activity, Gauge, Wifi, MapPin, Coins } from 'lucide-react'
|
||||||
|
|
||||||
// 懒加载工具组件
|
// 懒加载工具组件
|
||||||
const UUID = lazy(() => import('./uuid'))
|
const UUID = lazy(() => import('./uuid'))
|
||||||
const JSON = lazy(() => import('./json'))
|
const JSON = lazy(() => import('./json'))
|
||||||
const Base64 = lazy(() => import('./base64'))
|
const Base64 = lazy(() => import('./base64'))
|
||||||
|
const Currency = lazy(() => import('./currency'))
|
||||||
const DNS = lazy(() => import('./network/dns'))
|
const DNS = lazy(() => import('./network/dns'))
|
||||||
const Ping = lazy(() => import('./network/ping'))
|
const Ping = lazy(() => import('./network/ping'))
|
||||||
const TCPing = lazy(() => import('./network/tcping'))
|
const TCPing = lazy(() => import('./network/tcping'))
|
||||||
@@ -42,6 +43,13 @@ export const tools: Tool[] = [
|
|||||||
icon: <Binary />,
|
icon: <Binary />,
|
||||||
component: Base64,
|
component: Base64,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "currency",
|
||||||
|
name: "Currency Converter",
|
||||||
|
description: "Real-time currency exchange rates",
|
||||||
|
icon: <Coins />,
|
||||||
|
component: Currency,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "network",
|
path: "network",
|
||||||
name: "Network Tools",
|
name: "Network Tools",
|
||||||
|
|||||||
46
src/components/ui/badge.tsx
Normal file
46
src/components/ui/badge.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span"> &
|
||||||
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "span"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
92
src/components/ui/card.tsx
Normal file
92
src/components/ui/card.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
184
src/components/ui/command.tsx
Normal file
184
src/components/ui/command.tsx
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { Command as CommandPrimitive } from "cmdk"
|
||||||
|
import { SearchIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog"
|
||||||
|
|
||||||
|
function Command({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive
|
||||||
|
data-slot="command"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandDialog({
|
||||||
|
title = "Command Palette",
|
||||||
|
description = "Search for a command to run...",
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Dialog> & {
|
||||||
|
title?: string
|
||||||
|
description?: string
|
||||||
|
className?: string
|
||||||
|
showCloseButton?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Dialog {...props}>
|
||||||
|
<DialogHeader className="sr-only">
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
|
<DialogDescription>{description}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogContent
|
||||||
|
className={cn("overflow-hidden p-0", className)}
|
||||||
|
showCloseButton={showCloseButton}
|
||||||
|
>
|
||||||
|
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||||
|
{children}
|
||||||
|
</Command>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandInput({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="command-input-wrapper"
|
||||||
|
className="flex h-9 items-center gap-2 border-b px-3"
|
||||||
|
>
|
||||||
|
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
||||||
|
<CommandPrimitive.Input
|
||||||
|
data-slot="command-input"
|
||||||
|
className={cn(
|
||||||
|
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.List
|
||||||
|
data-slot="command-list"
|
||||||
|
className={cn(
|
||||||
|
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandEmpty({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Empty
|
||||||
|
data-slot="command-empty"
|
||||||
|
className="py-6 text-center text-sm"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandGroup({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Group
|
||||||
|
data-slot="command-group"
|
||||||
|
className={cn(
|
||||||
|
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Separator
|
||||||
|
data-slot="command-separator"
|
||||||
|
className={cn("bg-border -mx-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Item
|
||||||
|
data-slot="command-item"
|
||||||
|
className={cn(
|
||||||
|
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="command-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Command,
|
||||||
|
CommandDialog,
|
||||||
|
CommandInput,
|
||||||
|
CommandList,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandItem,
|
||||||
|
CommandShortcut,
|
||||||
|
CommandSeparator,
|
||||||
|
}
|
||||||
141
src/components/ui/dialog.tsx
Normal file
141
src/components/ui/dialog.tsx
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Dialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||||
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||||
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||||
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
data-slot="dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||||
|
showCloseButton?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close
|
||||||
|
data-slot="dialog-close"
|
||||||
|
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||||
|
>
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
data-slot="dialog-title"
|
||||||
|
className={cn("text-lg leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
data-slot="dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
}
|
||||||
24
src/components/ui/label.tsx
Normal file
24
src/components/ui/label.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Label({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
data-slot="label"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Label }
|
||||||
46
src/components/ui/popover.tsx
Normal file
46
src/components/ui/popover.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Popover({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||||
|
return <PopoverPrimitive.Root data-slot="popover" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||||
|
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverContent({
|
||||||
|
className,
|
||||||
|
align = "center",
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<PopoverPrimitive.Portal>
|
||||||
|
<PopoverPrimitive.Content
|
||||||
|
data-slot="popover-content"
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</PopoverPrimitive.Portal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverAnchor({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||||
|
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
|
||||||
@@ -116,6 +116,7 @@
|
|||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
|
font-family: 'Roboto Mono', 'Noto Sans SC', 'SF Mono', Consolas, monospace;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
33
src/main.tsx
33
src/main.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
|
|||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
|
|
||||||
import { Toaster } from '@/components/ui/sonner'
|
import { Toaster } from '@/components/ui/sonner'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
|
||||||
import './index.css'
|
import './index.css'
|
||||||
import { AppRouter } from './router'
|
import { AppRouter } from './router'
|
||||||
@@ -19,11 +19,32 @@ if ('serviceWorker' in navigator && import.meta.env.PROD) {
|
|||||||
import('workbox-window').then(({ Workbox }) => {
|
import('workbox-window').then(({ Workbox }) => {
|
||||||
const wb = new Workbox('/sw.js')
|
const wb = new Workbox('/sw.js')
|
||||||
|
|
||||||
wb.addEventListener('installed', (event) => {
|
// 检测到新版本时，在后台下载完成后显示通知
|
||||||
if (event.isUpdate) {
|
wb.addEventListener('waiting', () => {
|
||||||
console.log('New service worker installed, reloading page...')
|
// 显示更新通知，右上角弹窗
|
||||||
window.location.reload()
|
toast.info('found new version', {
|
||||||
}
|
description: 'new content available, click update to get the latest version',
|
||||||
|
duration: Infinity, // 持续显示，直到用户操作
|
||||||
|
action: {
|
||||||
|
label: 'update now',
|
||||||
|
onClick: () => {
|
||||||
|
// 用户点击更新按钮
|
||||||
|
wb.messageSkipWaiting()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cancel: {
|
||||||
|
label: 'later',
|
||||||
|
onClick: () => {
|
||||||
|
// 用户选择稍后更新，关闭通知
|
||||||
|
// 新版本会在下次手动刷新时自动激活
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 当新的 Service Worker 接管页面时，刷新页面
|
||||||
|
wb.addEventListener('controlling', () => {
|
||||||
|
window.location.reload()
|
||||||
})
|
})
|
||||||
|
|
||||||
wb.register()
|
wb.register()
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export default defineConfig({
|
|||||||
runtimeCaching: [
|
runtimeCaching: [
|
||||||
{
|
{
|
||||||
urlPattern: /^https:\/\/ipinfo\.io\/.*/i,
|
urlPattern: /^https:\/\/ipinfo\.io\/.*/i,
|
||||||
handler: 'CacheFirst', // 改为 CacheFirst，优先使用缓存
|
handler: "NetworkFirst",
|
||||||
options: {
|
options: {
|
||||||
cacheName: 'ipinfo-cache',
|
cacheName: 'ipinfo-cache',
|
||||||
expiration: {
|
expiration: {
|
||||||
@@ -43,11 +43,41 @@ export default defineConfig({
|
|||||||
statuses: [0, 200]
|
statuses: [0, 200]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// Google Fonts 样式表缓存
|
||||||
|
urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
|
||||||
|
handler: 'StaleWhileRevalidate',
|
||||||
|
options: {
|
||||||
|
cacheName: 'google-fonts-stylesheets',
|
||||||
|
expiration: {
|
||||||
|
maxEntries: 10,
|
||||||
|
maxAgeSeconds: 60 * 60 * 24 * 365 // 1 年
|
||||||
|
},
|
||||||
|
cacheableResponse: {
|
||||||
|
statuses: [0, 200]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// Google Fonts 字体文件缓存
|
||||||
|
urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
|
||||||
|
handler: 'CacheFirst',
|
||||||
|
options: {
|
||||||
|
cacheName: 'google-fonts-webfonts',
|
||||||
|
expiration: {
|
||||||
|
maxEntries: 30,
|
||||||
|
maxAgeSeconds: 60 * 60 * 24 * 365 // 1 年
|
||||||
|
},
|
||||||
|
cacheableResponse: {
|
||||||
|
statuses: [0, 200]
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
cleanupOutdatedCaches: true,
|
cleanupOutdatedCaches: true,
|
||||||
clientsClaim: true,
|
clientsClaim: true, // 新 SW 激活后立即接管
|
||||||
skipWaiting: true
|
skipWaiting: false // 不自动跳过等待，需要手动触发
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user