UI 基础与表单

import {
  Page,
  PageHeader,
  Panel,
  PanelHeader,
  PanelContent,
  PanelFooter,
  Button,
  SettingsGroup,
  SettingsRow,
  Switch,
} from "@semicoder/malatang-sdk/ui";
 
export function LayoutExample() {
  return (
    <Page>
      <PageHeader title="偏好" description="配置当前插件。" actions={<Button>保存</Button>} />
      <Panel>
        <PanelHeader>阅读设置</PanelHeader>
        <PanelContent>
          <SettingsGroup title="显示" description="只影响本插件。">
            <SettingsRow label="紧凑模式" description="减少条目间距。">
              <Switch aria-label="紧凑模式" defaultChecked />
            </SettingsRow>
          </SettingsGroup>
        </PanelContent>
        <PanelFooter>
          <Button variant="secondary">恢复默认</Button>
        </PanelFooter>
      </Panel>
    </Page>
  );
}

import { useState } from "react";
import {
  Button,
  IconButton,
  Copy,
  Field,
  Input,
  InputGroup,
  SearchInput,
  Textarea,
} from "@semicoder/malatang-sdk/ui";
 
export function InputsExample() {
  const [name, setName] = useState("");
  return (
    <div className="p:space-y-4">
      <Field label="名称" hint="最多 60 字符" error={name.length > 60 ? "名称过长" : undefined}>
        <Input value={name} onChange={(event) => setName(event.target.value)} />
      </Field>
      <Field label="搜索">
        <SearchInput placeholder="输入关键词" />
      </Field>
      <Field label="备注">
        <Textarea rows={4} />
      </Field>
      <InputGroup>
        <Input aria-label="分享地址" readOnly value="example" />
        <IconButton
          label="复制地址"
          variant="ghost"
          onClick={() => void navigator.clipboard.writeText("example")}
        >
          <Copy size={16} aria-hidden="true" />
        </IconButton>
      </InputGroup>
      <Button size="sm" variant="secondary">
        取消
      </Button>
    </div>
  );
}

import { useState } from "react";
import {
  Checkbox,
  Field,
  NumberField,
  Radio,
  RadioGroup,
  Slider,
  Switch,
} from "@semicoder/malatang-sdk/ui";
 
export function ControlsExample() {
  const [enabled, setEnabled] = useState(false);
  const [amount, setAmount] = useState<number | null>(20);
  return (
    <div className="p:space-y-4">
      <Field label="开启提醒">
        <Switch checked={enabled} onCheckedChange={setEnabled} />
      </Field>
      <Field label="包含摘要">
        <Checkbox defaultChecked />
      </Field>
      <Field label="语言">
        <RadioGroup defaultValue="zh">
          <Radio value="zh" aria-label="中文" />
          <span>中文</span>
          <Radio value="en" aria-label="英文" />
          <span>英文</span>
        </RadioGroup>
      </Field>
      <Field label="数量">
        <NumberField value={amount} onValueChange={setAmount} min={0} max={100} step={1} />
      </Field>
      <Field label="强度">
        <Slider defaultValue={20} min={0} max={100} step={1} />
      </Field>
    </div>
  );
}

import { useState } from "react";
import {
  Field,
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectGroupLabel,
  SelectItem,
} from "@semicoder/malatang-sdk/ui";
 
export function SelectExample() {
  const [language, setLanguage] = useState<string | null>("zh");
  return (
    <Field label="输出语言">
      <Select value={language} onValueChange={setLanguage}>
        <SelectTrigger>
          <SelectValue placeholder="请选择语言" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectGroupLabel>语言</SelectGroupLabel>
            <SelectItem value="zh">中文</SelectItem>
            <SelectItem value="en">英文</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </Field>
  );
}

import { useState } from "react";
import {
  Field,
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxList,
  ComboboxItem,
} from "@semicoder/malatang-sdk/ui";
 
const languages = ["中文", "English", "日本語"];
export function ComboboxExample() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <Field label="搜索语言">
      <Combobox items={languages} value={value} onValueChange={setValue}>
        <ComboboxInput placeholder="输入语言" />
        <ComboboxContent>
          <ComboboxEmpty>没有匹配项</ComboboxEmpty>
          <ComboboxList>
            {(item: string) => (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </Field>
  );
}