feat(ui): integrate official shadcn/ui + Radix primitives + cmdk + cva in src/components/ui

stacks/portal/web/src/components/ui/command.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from './dialog';
+
+const Command = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-xl bg-[var(--bg-card)] text-[var(--text-main)]',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends React.ComponentPropsWithoutRef<typeof Dialog> {}
+
+const CommandDialog: React.FC<CommandDialogProps> = ({ children, ...props }) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="max-w-xl overflow-hidden p-0 shadow-2xl top-[22%] translate-y-0">
+        <DialogTitle className="sr-only">全局命令与服务搜索面板</DialogTitle>
+        <DialogDescription className="sr-only">
+          使用键盘上下方向键选择服务或操作，回车立即执行
+        </DialogDescription>
+        <Command>{children}</Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b hl-border px-4 py-3 gap-3" cmdk-input-wrapper="">
+    <Search className="h-4 w-4 shrink-0 text-[var(--text-muted)]" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex w-full bg-transparent text-sm outline-none placeholder:text-[var(--text-subtle)] disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+    <kbd className="px-1.5 py-0.5 text-[10px] font-mono-num rounded hl-muted text-[var(--text-muted)] shrink-0">
+      ESC
+    </kbd>
+  </div>
+));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-80 overflow-y-auto overflow-x-hidden p-2', className)}
+    {...props}
+  />
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-xs text-[var(--text-muted)]"
+    {...props}
+  />
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-[var(--text-main)] [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-[var(--text-subtle)]',
+      className
+    )}
+    {...props}
+  />
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center justify-between rounded-lg px-3 py-2 text-xs outline-none transition-colors data-[selected=true]:bg-[var(--bg-muted)] data-[selected=true]:text-[var(--text-main)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+};