使用 @downcity/ui 开发页面、表单、浮层与设置面板的推荐方式

UI SDK 开发指南

本页面面向实际使用 @downcity/ui 构建页面的开发者。

接入原则

@import "tailwindcss";
@import "@downcity/ui/source.css";
@import "@downcity/ui/styles.css";

如果只引入 styles.css 而没有引入 source.css，宿主应用可能拿不到 UI SDK 组件内部使用的 Tailwind utility。

组件选择建议

动作

主操作：Button
工具栏状态按钮：Toggle
多选切换栏：ToggleGroup
轻量状态标记：Badge

表单

单行输入：Input
多行输入：Textarea
布尔勾选：Checkbox
字段标题：Label

容器

结构化信息块：Card
同层级内容切换：Tabs
内容分隔：Separator
加载占位：Skeleton

浮层

阻断式弹窗：Dialog
侧边抽屉：Sheet
菜单动作：DropdownMenu
轻量说明面板：Popover
极短提示：Tooltip
全局通知：Toaster

常见页面组合

设置面板

import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Separator } from "@downcity/ui";

export function ModelSettingsPanel() {
  return (
    <Card className="max-w-2xl">
      <CardHeader>
        <CardTitle>Model Settings</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <Label htmlFor="provider">Provider</Label>
          <Input id="provider" placeholder="openai" />
        </div>
        <Separator />
        <div className="flex justify-end">
          <Button size="sm">保存</Button>
        </div>
      </CardContent>
    </Card>
  );
}