koishi-plugin-chatluna-affinity 0.3.0 → 0.3.2

package/client/dashboard/mount.tsx

@@ -0,0 +1,9 @@
+import { createRoot, type Root } from "react-dom/client";
+import React from "react";
+import { AffinityDashboard } from "./AffinityDashboard";
+
+export function mountAffinityDashboard(element: Element): () => void {
+  const root: Root = createRoot(element);
+  root.render(<AffinityDashboard />);
+  return () => root.unmount();
+}

package/client/dashboard/types.ts

@@ -0,0 +1,85 @@
+export interface DashboardTopUser {
+  userId: string;
+  name: string;
+  avatarUrl: string | null;
+  affinity: number;
+  longTermAffinity: number;
+  relation: string;
+  relationTone: "custom" | "low" | "medium" | "high" | "unknown";
+  chatCount: number;
+  lastInteractionAt: string | null;
+  historyPoints: DashboardUserHistoryPoint[];
+}
+
+export interface DashboardRelationStat {
+  relation: string;
+  kind: "preset" | "custom";
+  count: number;
+}
+
+export interface DashboardTrendPoint {
+  label: string;
+  users: number;
+  averageAffinity: number;
+  chatCount: number;
+  blacklisted: number;
+}
+
+export interface DashboardMetricChange {
+  current: number;
+  previous: number;
+  percent: number | null;
+}
+
+export interface DashboardUserHistoryPoint {
+  label: string;
+  timestamp: string | null;
+  affinity: number;
+  longTermAffinity: number;
+  chatCount: number;
+}
+
+export interface DashboardBlacklistItem {
+  platform: string;
+  userId: string;
+  name: string;
+  avatarUrl: string | null;
+  affinity: number | null;
+  mode: "permanent" | "temporary";
+  blockedAt: string | null;
+  expiresAt: string | null;
+  note: string;
+}
+
+export interface DashboardData {
+  scopeId: string;
+  generatedAt: string;
+  totals: {
+    users: number;
+    blacklisted: number;
+    permanentBlacklisted: number;
+    temporaryBlacklisted: number;
+    aliases: number;
+    chatCount: number;
+  };
+  averages: {
+    affinity: number;
+    longTermAffinity: number;
+    shortTermAffinity: number;
+  };
+  latestInteractionAt: string | null;
+  weeklyChanges: {
+    users: DashboardMetricChange;
+    averageAffinity: DashboardMetricChange;
+    chatCount: DashboardMetricChange;
+    aliases: DashboardMetricChange;
+  };
+  trends: {
+    week: DashboardTrendPoint[];
+    month: DashboardTrendPoint[];
+    all: DashboardTrendPoint[];
+  };
+  relationStats: DashboardRelationStat[];
+  blacklistItems: DashboardBlacklistItem[];
+  topUsers: DashboardTopUser[];
+}

package/client/index.ts

@@ -5,8 +5,21 @@
 
 import { Context } from '@koishijs/client'
 import AffinityDetailsLoader from './AffinityDetailsLoader.vue'
+import AffinityDashboardPage from './AffinityDashboardPage.vue'
+import './style.css'
 
 export default (ctx: Context) => {
+    ctx.page({
+        id: 'chatluna-affinity-dashboard',
+        path: '/chatluna-affinity/dashboard',
+        name: '好感度仪表盘',
+        desc: '查看当前 scopeId 的好感度统计',
+        icon: 'star-empty',
+        order: 560,
+        authority: 1,
+        component: AffinityDashboardPage,
+    })
+
     ctx.slot({
         type: 'plugin-details',
         component: AffinityDetailsLoader,

package/client/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/client/style.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@heroui/styles/base";
+@import "@heroui/styles/themes/default";
+@import "@heroui/styles/utilities";
+@import "@heroui/styles/components/tabs.css";
+@import "@heroui/styles/components/tooltip.css";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+}
+
+.page-affinity-dashboard-shell,
+.page-affinity-dashboard-shell .main-container,
+.page-affinity-dashboard-shell .layout-header,
+.page-affinity-dashboard,
+.page-affinity-dashboard .el-scrollbar,
+.page-affinity-dashboard .el-scrollbar__wrap,
+.page-affinity-dashboard .el-scrollbar__view,
+.page-affinity-dashboard .k-content {
+  background: #f8fafc;
+}
+
+.page-affinity-dashboard .k-content {
+  width: 100%;
+  max-width: 80rem;
+}
+
+.page-affinity-dashboard-shell .layout-header {
+  display: none;
+}
+
+.affinity-dashboard {
+  --background: #ffffff;
+  --foreground: #0f172a;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+  --primary: #0f172a;
+  --primary-foreground: #f8fafc;
+  --secondary: #f1f5f9;
+  --secondary-foreground: #0f172a;
+  --muted: #f1f5f9;
+  --muted-foreground: #64748b;
+  --accent: #e2e8f0;
+  --accent-foreground: #0f172a;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --border: #e2e8f0;
+  --input: #cbd5e1;
+  --ring: #94a3b8;
+  --chart-1: #2563eb;
+  --chart-2: #16a34a;
+  --chart-3: #d97706;
+  --chart-4: #dc2626;
+
+  box-sizing: border-box;
+  display: grid;
+  gap: 16px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  min-height: calc(100vh - 6rem);
+  padding: 0;
+  color: var(--foreground);
+}
+
+.affinity-dashboard > * {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.affinity-dashboard .tabs__list {
+  width: fit-content;
+}
+
+.affinity-dashboard .tabs__tab:not([data-selected="true"]) {
+  color: var(--muted-foreground);
+}
+
+.affinity-dashboard *,
+.affinity-dashboard *::before,
+.affinity-dashboard *::after {
+  box-sizing: border-box;
+}
+
+.affinity-dashboard__empty {
+  margin: 0;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+@media (max-width: 720px) {
+  .page-affinity-dashboard .k-content {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .affinity-dashboard {
+    min-height: auto;
+  }
+}