eric/gitlab-instance-0a899031_digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

's'

Browse Source
This commit is contained in:
eric
2026-03-08 03:40:53 -05:00
parent f589b71b19
commit 51eeea3be3
8 changed files with 747 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
app/components/Tools.tsx
View File

@@ -1,124 +1,28 @@
const categories = [
{
icon: "💬",
title: "远程协作",
count: 12,
tools: [
{ name: "Slack", desc: "团队沟通" },
{ name: "Notion", desc: "知识管理" },
{ name: "Linear", desc: "项目追踪" },
{ name: "Figma", desc: "协同设计" },
],
color: "from-sky-500 to-cyan-500",
bg: "bg-sky-50",
text: "text-sky-700",
},
{
icon: "🎥",
title: "视频会议",
count: 8,
tools: [
{ name: "Zoom", desc: "视频会议" },
{ name: "Google Meet", desc: "在线会议" },
{ name: "Around", desc: "轻量会议" },
{ name: "Loom", desc: "异步视频" },
],
color: "from-violet-500 to-purple-500",
bg: "bg-violet-50",
text: "text-violet-700",
},
{
icon: "📋",
title: "项目管理",
count: 10,
tools: [
{ name: "Trello", desc: "看板管理" },
{ name: "Asana", desc: "任务管理" },
{ name: "Monday", desc: "工作流" },
{ name: "ClickUp", desc: "全能协作" },
],
color: "from-emerald-500 to-teal-500",
bg: "bg-emerald-50",
text: "text-emerald-700",
},
{
icon: "💻",
title: "开发工具",
count: 15,
tools: [
{ name: "VS Code", desc: "代码编辑" },
{ name: "GitHub", desc: "代码托管" },
{ name: "Vercel", desc: "部署平台" },
{ name: "Cursor", desc: "AI 编程" },
],
color: "from-blue-500 to-indigo-500",
bg: "bg-blue-50",
text: "text-blue-700",
},
{
icon: "🎨",
title: "设计工具",
count: 9,
tools: [
{ name: "Figma", desc: "UI 设计" },
{ name: "Canva", desc: "图形设计" },
{ name: "Framer", desc: "网页设计" },
{ name: "Midjourney", desc: "AI 作图" },
],
color: "from-pink-500 to-rose-500",
bg: "bg-pink-50",
text: "text-pink-700",
},
{
icon: "💳",
title: "财务工具",
count: 7,
tools: [
{ name: "Wise", desc: "跨境转账" },
{ name: "PayPal", desc: "在线支付" },
{ name: "Stripe", desc: "收款平台" },
{ name: "Deel", desc: "薪酬合规" },
],
color: "from-amber-500 to-orange-500",
bg: "bg-amber-50",
text: "text-amber-700",
},
{
icon: "🔒",
title: "安全与 VPN",
count: 6,
tools: [
{ name: "NordVPN", desc: "网络安全" },
{ name: "1Password", desc: "密码管理" },
{ name: "Authy", desc: "双因素认证" },
{ name: "ProtonMail", desc: "加密邮件" },
],
color: "from-slate-500 to-gray-600",
bg: "bg-slate-50",
text: "text-slate-700",
},
{
icon: "📝",
title: "生产力",
count: 11,
tools: [
{ name: "Obsidian", desc: "笔记系统" },
{ name: "Todoist", desc: "待办清单" },
{ name: "RescueTime", desc: "时间追踪" },
{ name: "Arc", desc: "浏览器" },
],
color: "from-teal-500 to-cyan-500",
bg: "bg-teal-50",
text: "text-teal-700",
},
];
import toolsData from "../data/tools.json";
const toolStats = [
{ value: "50+", label: "精选工具" },
{ value: "8", label: "分类" },
{ value: "15", label: "开发工具" },
{ value: "12", label: "协作工具" },
];
const categories = toolsData.categories as Array<{
icon: string;
title: string;
color: string;
bg: string;
text: string;
tools: Array<{ name: string; desc: string; href: string }>;
}>;
function truncateDesc(desc: string, maxLen = 5) {
if (!desc || desc.length <= maxLen) return desc;
return desc.slice(0, maxLen) + "...";
}
const toolStats = (() => {
const total = categories.reduce((s, c) => s + c.tools.length, 0);
return [
{ value: `${total}+`, label: "精选工具" },
{ value: String(categories.length), label: "分类" },
{ value: "数字游民", label: "出海" },
{ value: "佣金", label: "推荐" },
];
})();
export default function Tools() {
return (
@@ -132,15 +36,15 @@ export default function Tools() {
<span className="gradient-text">工具推荐</span>
</h2>
<p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
数字游民必备工具精选，覆盖远程协作、开发、设计、财务等 8 大分类。
数字游民出海必备工具精选，含游民社区、VPS、金融收款、出海掘金等，每个链接可点击跳转。
</p>
</div>
<div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
<div className="mt-14 grid gap-5 overflow-visible sm:grid-cols-2 lg:grid-cols-4">
{categories.map((cat) => (
<div
key={cat.title}
className="card-hover group overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm"
className="card-hover group overflow-visible rounded-2xl border border-slate-100 bg-white shadow-sm"
>
<div className={`h-1.5 bg-gradient-to-r ${cat.color}`} />
<div className="p-5">
@@ -150,20 +54,28 @@ export default function Tools() {
<h3 className="font-bold text-slate-900">{cat.title}</h3>
</div>
<span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${cat.bg} ${cat.text}`}>
{cat.count}
{cat.tools.length}
</span>
</div>
<div className="space-y-2">
{cat.tools.map((tool) => (
<div
<a
key={tool.name}
className="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm transition-colors group-hover:bg-slate-100/80"
href={tool.href}
target="_blank"
rel="noopener noreferrer"
className="group/item flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm transition-colors hover:bg-slate-100/80 hover:text-sky-600"
>
<span className="font-medium text-slate-700">
{tool.name}
<span className="font-medium text-slate-700">{tool.name}</span>
<span className="relative text-slate-400">
{truncateDesc(tool.desc)}
{tool.desc && tool.desc.length > 5 && (
<span className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 w-max max-w-[90vw] -translate-x-1/2 whitespace-normal break-words rounded-lg bg-slate-800 px-3 py-2 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/item:opacity-100">
{tool.desc}
</span>
)}
</span>
<span className="text-slate-400">{tool.desc}</span>
</div>
</a>
))}
</div>
</div>