四端上传

yelaymaths_admin/src/components/ui.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+export function Button({
+  children,
+  onClick,
+  variant = 'primary',
+  disabled,
+  type = 'button',
+}: {
+  children: ReactNode;
+  onClick?: () => void;
+  variant?: 'primary' | 'ghost' | 'danger';
+  disabled?: boolean;
+  type?: 'button' | 'submit';
+}) {
+  const styles = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700',
+    ghost: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50',
+    danger: 'bg-red-600 text-white hover:bg-red-700',
+  }[variant];
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`rounded-md px-3 py-1.5 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${styles}`}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function Input({
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  type?: string;
+}) {
+  return (
+    <input
+      type={type}
+      value={value}
+      placeholder={placeholder}
+      onChange={(e) => onChange(e.target.value)}
+      className="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm outline-none focus:border-blue-500"
+    />
+  );
+}
+
+export function Textarea({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  return (
+    <textarea
+      value={value}
+      rows={6}
+      onChange={(e) => onChange(e.target.value)}
+      className="w-full rounded-md border border-gray-300 px-3 py-1.5 font-mono text-xs outline-none focus:border-blue-500"
+    />
+  );
+}
+
+export function Select({
+  value,
+  onChange,
+  options,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: Array<{ value: number; label: string }>;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm outline-none focus:border-blue-500"
+    >
+      {options.map((o) => (
+        <option key={o.value} value={String(o.value)}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export function Card({ title, children, action }: { title?: string; children: ReactNode; action?: ReactNode }) {
+  return (
+    <section className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm">
+      {(title || action) && (
+        <header className="mb-4 flex items-center justify-between">
+          {title && <h2 className="text-base font-semibold text-gray-900">{title}</h2>}
+          {action}
+        </header>
+      )}
+      {children}
+    </section>
+  );
+}
+
+export function Modal({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+}: {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: ReactNode;
+  footer?: ReactNode;
+}) {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+      <div className="max-h-[85vh] w-full max-w-2xl overflow-auto rounded-lg bg-white shadow-xl">
+        <header className="flex items-center justify-between border-b border-gray-200 px-5 py-3">
+          <h3 className="text-base font-semibold">{title}</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600" aria-label="关闭">
+            ✕
+          </button>
+        </header>
+        <div className="px-5 py-4">{children}</div>
+        {footer && <footer className="flex justify-end gap-2 border-t border-gray-200 px-5 py-3">{footer}</footer>}
+      </div>
+    </div>
+  );
+}
+
+/** 统一的错误 / 提示条。 */
+export function Notice({ message, kind = 'error' }: { message: string; kind?: 'error' | 'success' }) {
+  if (!message) return null;
+  const cls = kind === 'error' ? 'bg-red-50 text-red-700 border-red-200' : 'bg-green-50 text-green-700 border-green-200';
+  return <div className={`mb-3 rounded-md border px-3 py-2 text-sm ${cls}`}>{message}</div>;
+}
+
+export function Empty({ text = '暂无数据' }: { text?: string }) {
+  return <div className="py-10 text-center text-sm text-gray-400">{text}</div>;
+}
+