OpenFlare/frontend/app/(main)/admin/demo/tabs/controls-tab.tsx

// Copyright 2026 Arctel.net
// SPDX-License-Identifier: Apache-2.0

"use client"

import * as React from "react"
import {Code} from "lucide-react"
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
import {Label} from "@/components/ui/label"
import {Input} from "@/components/ui/input"
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
import {Checkbox} from "@/components/ui/checkbox"
import {Button} from "@/components/ui/button"

export function ControlsTab() {
  const [formData, setFormData] = React.useState({
    name: "",
    category: "database",
    allowNotify: true,
    channel: "all",
  })

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* 控件展示 */}
      <Card className="border-dashed shadow-none">
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-semibold">表单与输入框交互演示</CardTitle>
          <CardDescription>包含按钮变体、下拉选择、多选框及基础输入框的标准样式</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 输入框 */}
          <div className="space-y-1.5">
            <Label htmlFor="task-name" className="text-xs font-medium text-foreground">任务名称</Label>
            <Input
              id="task-name"
              value={formData.name}
              onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
              placeholder="输入要创建的任务描述..."
              className="h-8 text-xs shadow-none bg-background focus-visible:ring-1"
            />
            <p className="text-[10px] text-muted-foreground">任务名称将用于后台执行记录的可读性显示</p>
          </div>

          {/* 下拉框 */}
          <div className="space-y-1.5">
            <Label className="text-xs font-medium text-foreground">任务分类</Label>
            <Select
              value={formData.category}
              onValueChange={(val) => setFormData(prev => ({ ...prev, category: val }))}
            >
              <SelectTrigger className="h-8 text-xs shadow-none bg-background focus:ring-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="database">数据库运维</SelectItem>
                <SelectItem value="sync">数据批量同步</SelectItem>
                <SelectItem value="cleanup">过期磁盘清理</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* 多选框 Checkbox */}
          <div className="flex items-start gap-2.5 p-3 bg-muted/30 border border-dashed rounded-lg">
            <Checkbox
              id="allow-notify"
              checked={formData.allowNotify}
              onCheckedChange={(checked) => setFormData(prev => ({ ...prev, allowNotify: checked === true }))}
              className="mt-0.5"
            />
            <div className="grid gap-1">
              <label
                htmlFor="allow-notify"
                className="text-xs font-medium text-foreground cursor-pointer select-none leading-none"
              >
                允许触发异步通知推送
              </label>
              <p className="text-[10px] text-muted-foreground leading-normal">
                勾选后，在当前后台任务顺利执行结束时，会关联派发多渠道通知推送。
              </p>
            </div>
          </div>

          {/* 按钮变体 */}
          <div className="pt-2">
            <div className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">按钮样式对齐：</div>
            <div className="flex flex-wrap items-center gap-2">
              <Button size="sm" className="h-8 text-xs shadow-none">
                主要操作 (Primary)
              </Button>
              <Button variant="secondary" size="sm" className="h-8 text-xs shadow-none">
                次要操作 (Secondary)
              </Button>
              <Button variant="outline" size="sm" className="h-8 border-dashed text-xs shadow-none">
                辅助线框 (Outline)
              </Button>
              <Button variant="ghost" size="sm" className="h-8 text-xs hover:bg-muted">
                幽灵按钮 (Ghost)
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 控件设计规范说明 */}
      <Card className="border-dashed shadow-none bg-muted/20">
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
            <Code className="size-4 text-primary" />
            表单设计规范
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4 text-xs text-muted-foreground">
          <div className="space-y-2 leading-relaxed">
            <p className="font-semibold text-foreground text-[11px]">1. 统一控件高度与投影：</p>
            <p>
              输入框 (<code className="bg-muted px-1 py-0.5 rounded font-mono">Input</code>) 与下拉选择器 (<code className="bg-muted px-1 py-0.5 rounded font-mono">SelectTrigger</code>) 的高度应统一限制为小号高度 <code className="bg-muted px-1 py-0.5 rounded font-mono">h-8</code>，字体大小使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-xs</code>，并使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">shadow-none</code> 去除原生的重叠阴影。
            </p>

            <p className="font-semibold text-foreground text-[11px] pt-1">2. Checkbox 与文本的对齐：</p>
            <p>
              Checkbox 应在左侧垂直偏上对齐，使用容器 <code className="bg-muted px-1 py-0.5 rounded font-mono">flex items-start gap-2.5</code> 排列。Checkbox 组件本身添加 <code className="bg-muted px-1 py-0.5 rounded font-mono">mt-0.5</code>，从而在多行描述文本的情况下依然保持良好的顶对齐，避免出现居中对齐导致的凌乱感。
            </p>

            <p className="font-semibold text-foreground text-[11px] pt-1">3. 按钮使用策略：</p>
            <p>
              普通主表单及新增/保存按钮，一律使用默认 Primary 按钮或次要 <code className="bg-muted px-1 py-0.5 rounded font-mono">{'variant="secondary"'}</code> 按钮，小号高度统一采用 <code className="bg-muted px-1 py-0.5 rounded font-mono">h-8 text-xs</code>。线框按钮必须带有 <code className="bg-muted px-1 py-0.5 rounded font-mono">border-dashed shadow-none</code> 类。
            </p>
          </div>

          <div className="bg-background/80 p-3 rounded border border-border/40 font-mono text-[10px] space-y-2 overflow-x-auto">
            <div>{`// 1. Label 与 Input 对齐`}</div>
            <div>{`<div className="space-y-1.5">
  <Label htmlFor="id" className="text-xs font-medium text-foreground">标题</Label>
  <Input id="id" className="h-8 text-xs shadow-none" />
</div>`}</div>
            <div className="pt-2">{`// 2. Checkbox 顶对齐`}</div>
            <div>{`<div className="flex items-start gap-2.5">
  <Checkbox id="c" className="mt-0.5" />
  <div className="grid gap-1">
    <label htmlFor="c" className="text-xs font-medium leading-none">标题</label>
    <p className="text-[10px] text-muted-foreground">多行说明内容</p>
  </div>
</div>`}</div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}