feat(workbench): integrate runtime data and map tooling

2026-09-22 10:45:46 +08:00
parent bf44cc0f25
commit bebcf2a06c
163 changed files with 15642 additions and 1312 deletions
@@ -0,0 +1,72 @@
+import { useId } from "react";
+
+import { cn } from "@/shared/ui/cn";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui/select";
+
+export interface FieldSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface FieldSelectProps {
+  label: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  options: FieldSelectOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+}
+
+export function FieldSelect({
+  label,
+  value,
+  onValueChange,
+  options,
+  placeholder = "请选择",
+  disabled,
+  className,
+  id
+}: FieldSelectProps) {
+  const generatedId = useId();
+  const triggerId = id ?? `field-select-${generatedId}`;
+  const selectableOptions = options.filter((option) => option.value !== "");
+
+  return (
+    <div className={cn("min-w-0", className)}>
+      <label htmlFor={triggerId} className="mb-1.5 block text-xs font-medium leading-4 text-slate-600">
+        {label}
+      </label>
+      <Select
+        value={value}
+        onValueChange={onValueChange}
+        disabled={disabled || selectableOptions.length === 0}
+      >
+        <SelectTrigger
+          id={triggerId}
+          className="h-auto min-h-10 w-full min-w-0 gap-2 rounded-lg border-slate-200 bg-white px-3 text-sm shadow-xs transition-[border-color,box-shadow,background-color] [@media(hover:hover)]:hover:border-slate-300 focus:ring-2 focus:ring-[var(--action-focus-ring)] motion-reduce:transition-none [&>span]:line-clamp-none [&>span]:whitespace-normal [&>span]:break-words [&>span]:text-left [&>svg]:shrink-0"
+        >
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent
+          position="popper"
+          sideOffset={4}
+          className="z-[90] max-w-[calc(100vw-1.5rem)]"
+        >
+          {selectableOptions.map((option) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+              className="whitespace-normal py-2 leading-5 [&>span:last-child]:whitespace-normal [&>span:last-child]:break-words"
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}