wushenghua/hapi
1
0
Fork 0
mirror of https://github.com/wu736139669/hapi.git synced 2026-08-05 06:24:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update Quick Start section to use npx and simplify steps

Browse Source
This commit is contained in:
weishu
2026-01-07 14:34:28 +08:00
parent 605d44f3ac
commit 89236d1d2e
3 changed files with 45 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/locales/en.json
+3 -2
View File
@@ -111,8 +111,9 @@
"installation": {
"title": "Get Started in Seconds",
"npm": {
"step1": "1. Install Globally",
"step2": "2. Start Server"
"step1": "1. Start the Server",
"step2": "2. Start a Coding Session",
"step3": "3. Open the UI"
}
},
"cta": {
website/src/locales/zh.json
+3 -2
View File
@@ -111,8 +111,9 @@
"installation": {
"title": "几秒钟内开始",
"npm": {
"step1": "1. 全局安装",
"step2": "2. 启动服务器"
"step1": "1. 启动服务器",
"step2": "2. 启动编码会话",
"step3": "3. 打开 UI"
}
},
"cta": {
website/src/pages/Home.tsx
+39 -37
View File
@@ -2,7 +2,6 @@ import Layout from "@/components/Layout";
import AppShowcase from "@/components/AppShowcase";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowRight, Check, Code2, Copy, Globe, Laptop, Lock, MessageSquare, Smartphone, Terminal, Zap, GitBranch, ShieldAlert, Coffee, Mountain, Footprints } from "lucide-react";
import { useState } from "react";
import { Link } from "wouter";
@@ -268,42 +267,45 @@ export default function Home() {
<div className="container max-w-4xl">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">{t('installation.title')}</h2>
<Tabs defaultValue="npm" className="w-full">
<TabsList className="grid w-full grid-cols-1 mb-8 h-14 p-1 bg-muted border-2 border-border rounded-xl">
<TabsTrigger value="npm" className="text-lg font-bold rounded-lg data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm">NPM</TabsTrigger>
</TabsList>
<TabsContent value="npm">
<Card className="border-2 border-border shadow-hard bg-card">
<CardContent className="p-6 space-y-6">
<div className="space-y-2">
<div className="flex justify-between items-center">
<h3 className="font-bold">{t('installation.npm.step1')}</h3>
</div>
<div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
<code>npm install -g @twsxtd/hapi</code>
<Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npm install -g @twsxtd/hapi", "install")}>
{copied === "install" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
</div>
<div className="space-y-2">
<div className="flex justify-between items-center">
<h3 className="font-bold">{t('installation.npm.step2')}</h3>
</div>
<div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
<code>hapi start</code>
<Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("hapi start", "start")}>
{copied === "start" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
<Card className="border-2 border-border shadow-hard bg-card">
<CardContent className="p-6 space-y-6">
<div className="space-y-2">
<div className="flex justify-between items-center">
<h3 className="font-bold">{t('installation.npm.step1')}</h3>
</div>
<div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
<code>npx @twsxtd/hapi server</code>
<Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npx @twsxtd/hapi server", "server")}>
{copied === "server" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
</div>
<div className="space-y-2">
<div className="flex justify-between items-center">
<h3 className="font-bold">{t('installation.npm.step2')}</h3>
</div>
<div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
<code>npx @twsxtd/hapi</code>
<Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npx @twsxtd/hapi", "session")}>
{copied === "session" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
</div>
<div className="space-y-2">
<div className="flex justify-between items-center">
<h3 className="font-bold">{t('installation.npm.step3')}</h3>
</div>
<div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
<code>http://&lt;your-ip&gt;:3006</code>
<Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("http://localhost:3006", "ui")}>
{copied === "ui" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
</section>