Initial CMPP frontend prototype

src/components/ui/PagePrimitives.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import { Button } from '@/components/ui/Button';
+
+type QueryPanelProps = {
+  title: ReactNode;
+  summary?: ReactNode;
+  children: ReactNode;
+};
+
+type PaginationProps = {
+  total: number;
+  page?: number;
+  previousDisabled?: boolean;
+  nextDisabled?: boolean;
+  onPrevious?: () => void;
+  onNext?: () => void;
+};
+
+type InlineTextPreviewProps = {
+  label: ReactNode;
+  leading?: ReactNode;
+  children: ReactNode;
+};
+
+export function QueryPanel({ title, summary, children }: QueryPanelProps) {
+  return (
+    <div className="surface ui-query-panel">
+      <h2>{title}</h2>
+      <div className="ui-query-panel__grid">{children}</div>
+      {summary ? <p className="ui-query-panel__summary">{summary}</p> : null}
+    </div>
+  );
+}
+
+export function Pagination({
+  total,
+  page = 1,
+  previousDisabled = true,
+  nextDisabled = true,
+  onPrevious,
+  onNext,
+}: PaginationProps) {
+  return (
+    <div className="ui-pagination">
+      <span>显示 {total} 条记录</span>
+      <div>
+        <Button disabled={previousDisabled} onClick={onPrevious} size="sm" variant="ghost">上一页</Button>
+        <Button size="sm" variant="secondary">{page}</Button>
+        <Button disabled={nextDisabled} onClick={onNext} size="sm" variant="ghost">下一页</Button>
+      </div>
+    </div>
+  );
+}
+
+export function InlineTextPreview({ label, leading, children }: InlineTextPreviewProps) {
+  return (
+    <div className="ui-inline-text-preview">
+      <span>{label}</span>
+      <p>{leading}{children}</p>
+    </div>
+  );
+}