koishi-plugin-chatluna-affinity 0.3.0 → 0.3.2

package/client/AffinityDashboardPage.vue

@@ -0,0 +1,30 @@
+<!--
+  好感度仪表盘页面
+  作为 Koishi ctx.page 的 Vue 外壳挂载 React 仪表盘
+-->
+<template>
+    <k-layout container="page-affinity-dashboard-shell" main="page-affinity-dashboard">
+        <k-content>
+            <div ref="dashboardRoot" />
+        </k-content>
+    </k-layout>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { mountAffinityDashboard } from './dashboard/mount'
+
+const dashboardRoot = ref<HTMLElement | null>(null)
+let disposeDashboard: (() => void) | null = null
+
+onMounted(async () => {
+    await nextTick()
+    if (!dashboardRoot.value) return
+    disposeDashboard = mountAffinityDashboard(dashboardRoot.value)
+})
+
+onBeforeUnmount(() => {
+    disposeDashboard?.()
+    disposeDashboard = null
+})
+</script>

package/client/components/ui/alert.tsx

@@ -0,0 +1,50 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-2xl border p-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      role="alert"
+      className={cn(alertVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"h5">) {
+  return (
+    <h5 className={cn("mb-1 font-medium leading-none", className)} {...props} />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-sm [&_p]:leading-relaxed", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/client/components/ui/avatar.tsx

@@ -0,0 +1,47 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      className={cn(
+        "relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      className={cn("aspect-square h-full w-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted text-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/client/components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return (
+    <span className={cn(badgeVariants({ variant, className }))} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/client/components/ui/button.tsx

@@ -0,0 +1,53 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-8 rounded-xl px-3 text-xs",
+        icon: "h-8 w-8 rounded-xl",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/client/components/ui/card.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex flex-col space-y-1.5 p-4", className)} {...props} />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-base font-semibold leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("p-4 pt-0", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex items-center p-4 pt-0", className)} {...props} />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/client/components/ui/chart.tsx

@@ -0,0 +1,136 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "../../lib/utils";
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode;
+    color?: string;
+  }
+>;
+
+const ChartContext = React.createContext<{ config: ChartConfig } | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ReactNode;
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/70 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children as React.ReactElement}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
+  const colorConfig = Object.entries(config).filter(([, item]) => item.color);
+
+  if (!colorConfig.length) return null;
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: `
+[data-chart=${id}] {
+${colorConfig
+  .map(([key, item]) => `  --color-${key}: ${item.color};`)
+  .join("\n")}
+}
+`,
+      }}
+    />
+  );
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  className,
+  hideLabel = false,
+}: {
+  active?: boolean;
+  payload?: Array<{
+    color?: string;
+    dataKey?: string | number;
+    name?: string | number;
+    value?: unknown;
+  }>;
+  label?: React.ReactNode;
+  className?: string;
+  hideLabel?: boolean;
+}) {
+  const { config } = useChart();
+
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 gap-1.5 rounded-2xl border bg-background px-3 py-2 text-xs shadow-xl",
+        className,
+      )}
+    >
+      {!hideLabel && label ? (
+        <div className="font-medium text-foreground">{label}</div>
+      ) : null}
+      <div className="grid gap-1.5">
+        {payload.map((item) => {
+          const key = String(item.dataKey || item.name || "");
+          const itemConfig = config[key];
+          const color = item.color || itemConfig?.color;
+
+          return (
+            <div
+              className="flex min-w-0 items-center gap-2 text-muted-foreground"
+              key={key}
+            >
+              <span
+                className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                style={{ backgroundColor: color }}
+              />
+              <span className="truncate">{itemConfig?.label || key}</span>
+              <span className="ml-auto font-mono font-medium text-foreground">
+                {String(item.value ?? "")}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { ChartContainer, ChartTooltip, ChartTooltipContent };

package/client/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+function Toaster(props: ToasterProps) {
+  return (
+    <Sonner
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Toaster };

package/client/components/ui/table.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div className="relative w-full overflow-auto rounded-2xl border bg-background">
+      <table className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      className={cn(
+        "h-10 px-3 text-left align-middle font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return <td className={cn("p-3 align-middle", className)} {...props} />;
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/client/components/ui/tabs.tsx

@@ -0,0 +1,82 @@
+import { Tabs as HeroTabs } from "@heroui/react/tabs";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+type TabsProps = Omit<
+  React.ComponentProps<typeof HeroTabs>,
+  "defaultSelectedKey" | "onSelectionChange" | "selectedKey"
+> & {
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  value?: string;
+};
+
+function Tabs({
+  className,
+  defaultValue,
+  onValueChange,
+  value,
+  ...props
+}: TabsProps) {
+  return (
+    <HeroTabs
+      className={cn("flex flex-col gap-4", className)}
+      defaultSelectedKey={defaultValue}
+      selectedKey={value}
+      onSelectionChange={(key) => onValueChange?.(String(key))}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof HeroTabs.List>) {
+  return (
+    <HeroTabs.ListContainer className="w-fit">
+      <HeroTabs.List
+        className={cn("w-fit shadow-none", className)}
+        {...props}
+      />
+    </HeroTabs.ListContainer>
+  );
+}
+
+function TabsTrigger({
+  className,
+  value,
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof HeroTabs.Tab>, "id"> & {
+  value: string;
+}) {
+  return (
+    <HeroTabs.Tab
+      className={cn("min-w-fit whitespace-nowrap px-4 text-sm", className)}
+      id={value}
+      {...props}
+    >
+      {children}
+      <HeroTabs.Indicator />
+    </HeroTabs.Tab>
+  );
+}
+
+function TabsContent({
+  className,
+  value,
+  ...props
+}: Omit<React.ComponentProps<typeof HeroTabs.Panel>, "id"> & {
+  value: string;
+}) {
+  return (
+    <HeroTabs.Panel
+      className={cn("mt-0 p-0 outline-none", className)}
+      id={value}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };