scriptoriumadmin/skillhub
1
0
Fork 0
mirror of https://github.com/iflytek/skillhub.git synced 2026-08-27 11:14:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

style(web): simplify install tab indicator

Browse source 
Signed-off-by: dongmucat <1127093059@qq.com>
This commit is contained in:
dongmucat 2026-06-05 16:52:35 +08:00
parent 0cca866e25
commit 3b2d41f718
2 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/src/features/skill/install-command.test.ts
View file

@ -111,6 +111,20 @@ describe('install-command', () => {
expect(html).toContain('break-all')
})
it('renders install method tabs with only a short active underline', () => {
setMockWindow('https://app.example.com')
const html = renderToStaticMarkup(createElement(InstallCommand, {
namespace: 'global',
slug: 'meeting-minutes-generator',
}))
expect(html).toContain('after:w-6')
expect(html).toContain('after:h-0.5')
expect(html).not.toContain('rounded-lg border bg-background/80 p-1')
expect(html).not.toContain('flex-1 rounded-md')
})
it('renders ClawHub CLI as the default install method', () => {
setMockWindow('https://app.example.com')

9
web/src/features/skill/install-command.tsx
View file

@ -43,6 +43,9 @@ interface CommandBlockProps {
command: string
}
const installMethodTabTriggerClass =
"relative border-b-0 px-1 py-2 text-xs after:absolute after:bottom-[-1px] after:left-1/2 after:h-0.5 after:w-6 after:-translate-x-1/2 after:rounded-full after:bg-transparent after:content-[''] data-[state=active]:after:bg-primary"
function CommandBlock({ command }: CommandBlockProps) {
const { t } = useTranslation()
const [copied, copy] = useCopyToClipboard()
@ -85,11 +88,11 @@ export function InstallCommand({ namespace, slug }: InstallCommandProps) {
return (
<Tabs defaultValue="clawhub" className="space-y-3">
<TabsList className="w-full gap-2 rounded-lg border bg-background/80 p-1 text-xs">
<TabsTrigger value="clawhub" className="flex-1 rounded-md px-3 py-2 text-xs">
<TabsList className="w-full gap-6 border-border/70 bg-transparent p-0 text-xs">
<TabsTrigger value="clawhub" className={installMethodTabTriggerClass}>
{t('skillDetail.installMethodClawhub')}
</TabsTrigger>
<TabsTrigger value="skillhub" className="flex-1 rounded-md px-3 py-2 text-xs">
<TabsTrigger value="skillhub" className={installMethodTabTriggerClass}>
{t('skillDetail.installMethodSkillhub')}
</TabsTrigger>
</TabsList>