From bbd416ceca1f6725c0c35d207697410d38b387a7 Mon Sep 17 00:00:00 2001 From: tww <1451548858@qq.com> Date: Sun, 15 Mar 2026 21:14:36 +0800 Subject: [PATCH] Quick Start --- document/docs/04-developer/api/cli-compat.md | 34 ++++ .../current/04-developer/api/cli-compat.md | 34 ++++ web/src/features/skill/install-command.tsx | 28 +++- web/src/i18n/locales/en.json | 48 +++++- web/src/i18n/locales/zh.json | 48 +++++- web/src/pages/home.tsx | 145 +++++++++++++++++- web/src/pages/landing.tsx | 143 ++++++++++++++++- 7 files changed, 469 insertions(+), 11 deletions(-) diff --git a/document/docs/04-developer/api/cli-compat.md b/document/docs/04-developer/api/cli-compat.md index 07f54afe..e411a59d 100644 --- a/document/docs/04-developer/api/cli-compat.md +++ b/document/docs/04-developer/api/cli-compat.md @@ -8,6 +8,40 @@ description: ClawHub CLI 协议兼容层 SkillHub 提供 ClawHub CLI 协议兼容层，现有工具可无缝迁移。 +## 配置 ClawHub CLI + +要让 ClawHub CLI 连接到你的 SkillHub 实例，需要配置以下环境变量： + +### 环境变量配置 + +**Linux/macOS (bash/zsh):** +```bash +# ~/.bashrc 或 ~/.zshrc +export CLAWHUB_SITE=https://skill.xfyun.cn +export CLAWHUB_REGISTRY=https://skill.xfyun.cn +``` + +**Windows (PowerShell):** +```powershell +# 永久设置（当前用户） +[Environment]::SetEnvironmentVariable('CLAWHUB_SITE', 'https://skill.xfyun.cn', 'User') +[Environment]::SetEnvironmentVariable('CLAWHUB_REGISTRY', 'https://skill.xfyun.cn', 'User') + +# 或者临时设置（当前会话） +$env:CLAWHUB_SITE = 'https://skill.xfyun.cn' +$env:CLAWHUB_REGISTRY = 'https://skill.xfyun.cn' +``` + +### 使用 CLI 标志（单次命令） + +```bash +clawhub --site https://skill.xfyun.cn --registry https://skill.xfyun.cn install +``` + +### 前端一键复制 + +SkillHub 网页端的技能详情页会自动显示带有正确环境变量的安装命令，直接复制即可使用。 + ## Well-known 发现 ```http diff --git a/document/i18n/en/docusaurus-plugin-content-docs/current/04-developer/api/cli-compat.md b/document/i18n/en/docusaurus-plugin-content-docs/current/04-developer/api/cli-compat.md index eac1fb54..11f5e688 100644 --- a/document/i18n/en/docusaurus-plugin-content-docs/current/04-developer/api/cli-compat.md +++ b/document/i18n/en/docusaurus-plugin-content-docs/current/04-developer/api/cli-compat.md @@ -8,6 +8,40 @@ description: ClawHub CLI protocol compatibility layer SkillHub provides a ClawHub CLI protocol compatibility layer for seamless migration of existing tools. +## Configuring ClawHub CLI + +To connect ClawHub CLI to your SkillHub instance, configure the following environment variables: + +### Environment Variable Configuration + +**Linux/macOS (bash/zsh):** +```bash +# ~/.bashrc or ~/.zshrc +export CLAWHUB_SITE=https://skill.xfyun.cn +export CLAWHUB_REGISTRY=https://skill.xfyun.cn +``` + +**Windows (PowerShell):** +```powershell +# Permanent setting (current user) +[Environment]::SetEnvironmentVariable('CLAWHUB_SITE', 'https://skill.xfyun.cn', 'User') +[Environment]::SetEnvironmentVariable('CLAWHUB_REGISTRY', 'https://skill.xfyun.cn', 'User') + +# Or temporary setting (current session) +$env:CLAWHUB_SITE = 'https://skill.xfyun.cn' +$env:CLAWHUB_REGISTRY = 'https://skill.xfyun.cn' +``` + +### Using CLI Flags (Single Command) + +```bash +clawhub --site https://skill.xfyun.cn --registry https://skill.xfyun.cn install +``` + +### One-click Copy from Web UI + +The SkillHub skill detail page automatically displays install commands with the correct environment variables pre-configured. Simply copy and use. + ## Well-known Discovery ```http diff --git a/web/src/features/skill/install-command.tsx b/web/src/features/skill/install-command.tsx index 49ed15c7..7db3edf6 100644 --- a/web/src/features/skill/install-command.tsx +++ b/web/src/features/skill/install-command.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useState, useMemo } from 'react' import { useTranslation } from 'react-i18next' import { Check, Copy } from 'lucide-react' import { Button } from '@/shared/ui/button' @@ -9,12 +9,32 @@ interface InstallCommandProps { version?: string } +function getAppBaseUrl(): string { + if (typeof window === 'undefined') { + return '' + } + const runtimeConfig = window.__SKILLHUB_RUNTIME_CONFIG__ + if (runtimeConfig?.appBaseUrl) { + return runtimeConfig.appBaseUrl + } + return `${window.location.protocol}//${window.location.host}` +} + export function InstallCommand({ namespace, slug, version }: InstallCommandProps) { const { t } = useTranslation() const [copied, setCopied] = useState(false) - const command = version - ? `clawhub install ${namespace}/${slug}@${version}` - : `clawhub install ${namespace}/${slug}` + + const baseUrl = useMemo(() => getAppBaseUrl(), []) + + const cleanNamespace = namespace.startsWith('@') ? namespace.slice(1) : namespace + const command = useMemo(() => { + const installCmd = `clawhub install ${slug} ` + // 如果是默认的 clawhub.ai 不需要环境变量，否则显示完整配置 + if (baseUrl && !baseUrl.includes('clawhub.ai') && !baseUrl.includes('localhost') && !baseUrl.includes('127.0.0.1')) { + return `CLAWHUB_SITE=${baseUrl} CLAWHUB_REGISTRY=${baseUrl} ${installCmd}` + } + return installCmd + }, [cleanNamespace, slug, version, baseUrl]) const handleCopy = async () => { try { diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json index 3ba8c57e..2c92c08e 100644 --- a/web/src/i18n/locales/en.json +++ b/web/src/i18n/locales/en.json @@ -69,7 +69,29 @@ "footerLicense": "© 2026 SkillHub. Apache License 2.0.", "footerDocs": "Docs", "footerGithub": "GitHub", - "footerCommunity": "Community" + "footerCommunity": "Community", + "quickStart": { + "title": "Quick Start", + "subtitle": "快速开始", + "description": "Get started with SkillHub in just a few simple steps", + "tip": "💡 Tip: Visit the skill detail page for one-click install commands with environment variables", + "steps": { + "configureEnv": { + "title": "1. Configure Environment Variables", + "description": "Configure ClawHub CLI to connect to SkillHub" + }, + "installSkills": { + "title": "2. Install Skills", + "description": "Search and install the skills you need", + "code": "# Search skills\nclawhub search \n\n# Install skill\nclawhub install " + }, + "publishSkills": { + "title": "3. Publish Skills", + "description": "Share your skills with the team", + "code": "# Publish skill\nclawhub publish\n\n# Or use web interface\n# Click \"Publish Skill\"" + } + } + } }, "home": { "subtitle": "Modern Skill Registry", @@ -80,7 +102,29 @@ "popularDescription": "Most popular skills in the community", "latestTitle": "Latest Releases", "latestDescription": "Freshly published skills", - "viewAll": "View All →" + "viewAll": "View All →", + "quickStart": { + "title": "Quick Start", + "subtitle": "快速开始", + "description": "Get started with SkillHub in just a few simple steps", + "tip": "💡 Tip: Visit the skill detail page for one-click install commands with environment variables", + "steps": { + "configureEnv": { + "title": "1. Configure Environment Variables", + "description": "Configure ClawHub CLI to connect to SkillHub" + }, + "installSkills": { + "title": "2. Install Skills", + "description": "Search and install the skills you need", + "code": "# Search skills\nclawhub search \n\n# Install skill\nclawhub install " + }, + "publishSkills": { + "title": "3. Publish Skills", + "description": "Share your skills with the team", + "code": "# Publish skill\nclawhub publish\n\n# Or use web interface\n# Click \"Publish Skill\"" + } + } + } }, "search": { "title": "Search Skills", diff --git a/web/src/i18n/locales/zh.json b/web/src/i18n/locales/zh.json index 78e9b37b..c115779c 100644 --- a/web/src/i18n/locales/zh.json +++ b/web/src/i18n/locales/zh.json @@ -69,7 +69,29 @@ "footerLicense": "© 2026 SkillHub。Apache License 2.0。", "footerDocs": "文档", "footerGithub": "GitHub", - "footerCommunity": "社区" + "footerCommunity": "社区", + "quickStart": { + "title": "快速开始", + "subtitle": "Quick Start", + "description": "只需几个简单步骤，即可开始使用 SkillHub", + "tip": "💡 提示：访问技能详情页可获取带环境变量的一键复制安装命令", + "steps": { + "configureEnv": { + "title": "1. 配置环境变量", + "description": "设置 ClawHub CLI 连接到 SkillHub" + }, + "installSkills": { + "title": "2. 安装技能", + "description": "搜索并安装你需要的技能", + "code": "# 搜索技能\nclawhub search \n\n# 安装技能\nclawhub install " + }, + "publishSkills": { + "title": "3. 发布技能", + "description": "分享你的技能给团队使用", + "code": "# 发布技能\nclawhub publish\n\n# 或使用网页界面\n# 点击\"发布技能\"" + } + } + } }, "home": { "subtitle": "现代化的技能注册中心", @@ -80,7 +102,29 @@ "popularDescription": "社区最受欢迎的技能", "latestTitle": "最新发布", "latestDescription": "刚刚发布的新技能", - "viewAll": "查看全部 →" + "viewAll": "查看全部 →", + "quickStart": { + "title": "快速开始", + "subtitle": "Quick Start", + "description": "只需几个简单步骤，即可开始使用 SkillHub", + "tip": "💡 提示：访问技能详情页可获取带环境变量的一键复制安装命令", + "steps": { + "configureEnv": { + "title": "1. 配置环境变量", + "description": "设置 ClawHub CLI 连接到 SkillHub" + }, + "installSkills": { + "title": "2. 安装技能", + "description": "搜索并安装你需要的技能", + "code": "# 搜索技能\nclawhub search \n\n# 安装技能\nclawhub install " + }, + "publishSkills": { + "title": "3. 发布技能", + "description": "分享你的技能给团队使用", + "code": "# 发布技能\nclawhub publish\n\n# 或使用网页界面\n# 点击\"发布技能\"" + } + } + } }, "search": { "title": "搜索技能", diff --git a/web/src/pages/home.tsx b/web/src/pages/home.tsx index f96afdd2..73a66c60 100644 --- a/web/src/pages/home.tsx +++ b/web/src/pages/home.tsx @@ -5,6 +5,144 @@ import { SkillCard } from '@/features/skill/skill-card' import { SkeletonList } from '@/shared/components/skeleton-loader' import { useSearchSkills } from '@/shared/hooks/use-skill-queries' import { Button } from '@/shared/ui/button' +import { Check, Copy, Terminal, Settings, PackageOpen } from 'lucide-react' +import { useState, useMemo } from 'react' + +function getAppBaseUrl(): string { + if (typeof window === 'undefined') { + return 'https://skill.xfyun.cn' + } + const runtimeConfig = window.__SKILLHUB_RUNTIME_CONFIG__ + if (runtimeConfig?.appBaseUrl) { + return runtimeConfig.appBaseUrl + } + return `${window.location.protocol}//${window.location.host}` +} + +function CopyButton({ text }: { text: string }) { + const { t } = useTranslation() + const [copied, setCopied] = useState(false) + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(text) + setCopied(true) + window.setTimeout(() => setCopied(false), 2000) + } catch (err) { + console.error('Failed to copy:', err) + } + } + + return ( + + ) +} + +function CodeBlock({ code }: { code: string }) { + return ( +
+
+ bash + +
+ 
+        {code}
+
+
+ ) +} + +function QuickStartSection() { + const { t } = useTranslation() + const baseUrl = useMemo(() => getAppBaseUrl(), []) + + const steps = [ + { + icon: , + title: t('home.quickStart.steps.configureEnv.title'), + description: t('home.quickStart.steps.configureEnv.description'), + code: `# Linux/macOS +export CLAWHUB_SITE=${baseUrl} +export CLAWHUB_REGISTRY=${baseUrl} + +# Windows PowerShell +$env:CLAWHUB_SITE = '${baseUrl}' +$env:CLAWHUB_REGISTRY = '${baseUrl}'`, + }, + { + icon: , + title: t('home.quickStart.steps.installSkills.title'), + description: t('home.quickStart.steps.installSkills.description'), + code: t('home.quickStart.steps.installSkills.code'), + }, + { + icon: , + title: t('home.quickStart.steps.publishSkills.title'), + description: t('home.quickStart.steps.publishSkills.description'), + code: t('home.quickStart.steps.publishSkills.code'), + }, + ] + + return ( +
+
+

+ {t('home.quickStart.title')} + + {t('home.quickStart.subtitle')} + +

+

+ {t('home.quickStart.description')} +

+
+ +
+ {steps.map((step, idx) => ( +
+
+
+ {step.icon} +
+
+
+

+ {step.title} +

+

+ {step.description} +

+
+ +
+
+
+ ))} +
+ +
+
+ + {t('home.quickStart.tip')} + +
+
+
+ ) +} export function HomePage() { const { t } = useTranslation() @@ -59,7 +197,7 @@ export function HomePage() { {/* Popular Downloads Section */} -
+

{t('home.popularTitle')}

@@ -89,7 +227,7 @@ export function HomePage() {
{/* Latest Releases Section */} -
+

{t('home.latestTitle')}

@@ -117,6 +255,9 @@ export function HomePage() {
)}
+ + {/* Quick Start Section */} + ) } diff --git a/web/src/pages/landing.tsx b/web/src/pages/landing.tsx index ebd4def6..fb86f305 100644 --- a/web/src/pages/landing.tsx +++ b/web/src/pages/landing.tsx @@ -5,7 +5,145 @@ import { useAuth } from '@/features/auth/use-auth' import { LanguageSwitcher } from '@/shared/components/language-switcher' import { UserMenu } from '@/shared/components/user-menu' import { Button } from '@/shared/ui/button' -import { useEffect, useRef, useState } from 'react' +import { Check, Copy, Terminal, Settings, PackageOpen } from 'lucide-react' +import { useEffect, useRef, useState, useMemo } from 'react' + +function getAppBaseUrl(): string { + if (typeof window === 'undefined') { + return 'https://skill.xfyun.cn' + } + const runtimeConfig = window.__SKILLHUB_RUNTIME_CONFIG__ + if (runtimeConfig?.appBaseUrl) { + return runtimeConfig.appBaseUrl + } + return `${window.location.protocol}//${window.location.host}` +} + +function CopyButton({ text }: { text: string }) { + const { t } = useTranslation() + const [copied, setCopied] = useState(false) + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(text) + setCopied(true) + window.setTimeout(() => setCopied(false), 2000) + } catch (err) { + console.error('Failed to copy:', err) + } + } + + return ( + + ) +} + +function CodeBlock({ code }: { code: string }) { + return ( +
+
+ bash + +
+ 
+        {code}
+
+
+ ) +} + +function QuickStartSection() { + const { t } = useTranslation() + const baseUrl = useMemo(() => getAppBaseUrl(), []) + + const steps = [ + { + icon: , + title: t('landing.quickStart.steps.configureEnv.title'), + description: t('landing.quickStart.steps.configureEnv.description'), + code: `# Linux/macOS +export CLAWHUB_SITE=${baseUrl} +export CLAWHUB_REGISTRY=${baseUrl} + +# Windows PowerShell +$env:CLAWHUB_SITE = '${baseUrl}' +$env:CLAWHUB_REGISTRY = '${baseUrl}'`, + }, + { + icon: , + title: t('landing.quickStart.steps.installSkills.title'), + description: t('landing.quickStart.steps.installSkills.description'), + code: t('landing.quickStart.steps.installSkills.code'), + }, + { + icon: , + title: t('landing.quickStart.steps.publishSkills.title'), + description: t('landing.quickStart.steps.publishSkills.description'), + code: t('landing.quickStart.steps.publishSkills.code'), + }, + ] + + return ( +
+
+

+ {t('landing.quickStart.title')} + + {t('landing.quickStart.subtitle')} + +

+

+ {t('landing.quickStart.description')} +

+
+ +
+ {steps.map((step, idx) => ( +
+
+
+ {step.icon} +
+
+
+

+ {step.title} +

+

+ {step.description} +

+
+ +
+
+
+ ))} +
+ +
+
+ + {t('landing.quickStart.tip')} + +
+
+
+ ) +} export function LandingPage() { const { t } = useTranslation() @@ -278,6 +416,9 @@ export function LandingPage() { + {/* Quick Start Section */} + +