Initial open source release

components/IntelligenceBrief.tsx

@@ -0,0 +1,583 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import Link from 'next/link';
+import {
+  AlertTriangle,
+  Check,
+  Clipboard,
+  ExternalLink,
+  Flame,
+  Lightbulb,
+  Link2,
+  Radar,
+  Target,
+  UserRoundCheck,
+} from 'lucide-react';
+import type { ReactNode } from 'react';
+
+export interface DashboardSignalItem {
+  chatroom_id: string;
+  chat_name: string;
+  local_id: number;
+  sender: string;
+  time: string;
+  title: string;
+  snippet: string;
+  score: number;
+  reasons: string[];
+}
+
+export interface DashboardOpportunityItem extends DashboardSignalItem {
+  action: string;
+}
+
+export interface DashboardActionItem extends DashboardOpportunityItem {
+  why: string;
+  urgency: 'high' | 'medium' | 'low';
+}
+
+export interface DashboardSignalSource {
+  sender: string;
+  signal_count: number;
+  group_count: number;
+  top_group: string;
+  last_seen: string;
+  strengths: string[];
+}
+
+export interface DashboardTopicLifecycle {
+  title: string;
+  status: 'rising' | 'spreading' | 'hot' | 'cooling';
+  today_count: number;
+  previous_avg: number;
+  group_count: number;
+  reason: string;
+  keywords: string[];
+}
+
+export interface DashboardLinkHighlight {
+  kind: 'article' | 'tool';
+  title: string;
+  url: string;
+  domain: string;
+  score: number;
+  verdict: string;
+  count: number;
+  group_count: number;
+  last_seen: string;
+}
+
+export interface DashboardPeopleRadar {
+  sender: string;
+  role: '分享者' | '需求提出者' | '连接者' | '观点源';
+  score: number;
+  group_count: number;
+  signal_count: number;
+  top_group: string;
+  reason: string;
+}
+
+export interface DashboardContentIdea {
+  title: string;
+  angle: string;
+  suggested_channel: '公众号' | 'X' | '小红书' | '博客';
+  evidence: string;
+  source_count: number;
+}
+
+export interface DashboardAnomalySignal {
+  kind: 'spike' | 'cross_group' | 'dense_links' | 'quiet_day';
+  title: string;
+  description: string;
+  severity: 'high' | 'medium' | 'low';
+  href?: string;
+}
+
+export interface DashboardIntelligence {
+  date: string;
+  must_read: DashboardSignalItem[];
+  opportunities: DashboardOpportunityItem[];
+  signal_sources: DashboardSignalSource[];
+  action_items: DashboardActionItem[];
+  topic_lifecycle: DashboardTopicLifecycle[];
+  link_highlights: DashboardLinkHighlight[];
+  people_radar: DashboardPeopleRadar[];
+  content_ideas: DashboardContentIdea[];
+  anomalies: DashboardAnomalySignal[];
+}
+
+export default function IntelligenceBrief({ intelligence }: { intelligence?: DashboardIntelligence }) {
+  const [copied, setCopied] = useState(false);
+  const data =
+    intelligence ??
+    ({
+      date: '',
+      must_read: [],
+      opportunities: [],
+      signal_sources: [],
+      action_items: [],
+      topic_lifecycle: [],
+      link_highlights: [],
+      people_radar: [],
+      content_ideas: [],
+      anomalies: [],
+    } satisfies DashboardIntelligence);
+  const summary = useMemo(() => buildDailySummary(data), [data]);
+
+  async function copySummary() {
+    await navigator.clipboard.writeText(summary);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <div className="space-y-4">
+      <section className="card flex items-center justify-between gap-4 px-4 py-3">
+        <div className="min-w-0">
+          <div className="report-kicker">Briefing Note</div>
+          <div className="mt-1 flex items-center gap-1.5 text-[14px] font-semibold">
+            <Radar size={14} className="text-[var(--accent)]" />
+            今日情报简报
+          </div>
+          <div className="mt-1 truncate text-[12px] text-[var(--text-2)]">
+            {summary.split('\n').slice(1, 4).join(' · ')}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={copySummary}
+          className="btn shrink-0"
+          disabled={!data.date}
+          title="复制今日情报摘要"
+        >
+          {copied ? <Check size={13} /> : <Clipboard size={13} />}
+          <span>{copied ? '已复制' : '复制摘要'}</span>
+        </button>
+      </section>
+
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[1.1fr_1fr_1fr]">
+        <ActionPanel date={data.date} items={data.action_items} fallback={data.opportunities} />
+        <TopicLifecyclePanel topics={data.topic_lifecycle} />
+        <AnomalyPanel anomalies={data.anomalies} />
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[1.1fr_1fr_1fr]">
+        <LinkHighlightPanel items={data.link_highlights} />
+        <PeopleRadarPanel people={data.people_radar} fallback={data.signal_sources} />
+        <ContentIdeaPanel ideas={data.content_ideas} />
+      </div>
+
+      <MustReadPanel date={data.date} items={data.must_read} />
+    </div>
+  );
+}
+
+function ActionPanel({
+  date,
+  items,
+  fallback,
+}: {
+  date: string;
+  items: DashboardActionItem[];
+  fallback: DashboardOpportunityItem[];
+}) {
+  const displayItems =
+    items.length > 0
+      ? items
+      : fallback.map((item) => ({
+          ...item,
+          why: '包含明确需求或行动线索，适合进入上下文判断',
+          urgency: 'medium' as const,
+        }));
+  return (
+    <section className="card min-h-[300px] p-4">
+      <PanelTitle
+        icon={<Target size={14} className="text-[var(--warn)]" />}
+        title="今日值得出手"
+        meta={`${displayItems.length} 条`}
+      />
+      {displayItems.length === 0 ? (
+        <EmptyState text="暂无明确行动项" />
+      ) : (
+        <div className="mt-3 space-y-2">
+          {displayItems.slice(0, 6).map((item) => (
+            <Link
+              key={`${item.chatroom_id}:${item.local_id}`}
+              href={`/groups/${encodeURIComponent(item.chatroom_id)}?date=${date}`}
+              className="block rounded-md border border-transparent px-2 py-2 transition-colors hover:border-[rgba(213,162,83,0.34)] hover:bg-[var(--surface-2)]"
+            >
+              <div className="flex items-center justify-between gap-2">
+                <span className="rounded border border-[rgba(213,162,83,0.22)] bg-[var(--warn-soft)] px-1.5 py-0.5 text-[10px] text-[var(--warn)]">
+                  {item.action}
+                </span>
+                <span className={urgencyClass(item.urgency)}>{urgencyText(item.urgency)}</span>
+              </div>
+              <div className="mt-1 line-clamp-2 text-[12px] leading-snug text-[var(--text)]">{item.title}</div>
+              <div className="mt-1 line-clamp-1 text-[10px] text-[var(--text-3)]">{item.why}</div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function TopicLifecyclePanel({ topics }: { topics: DashboardTopicLifecycle[] }) {
+  return (
+    <section className="card min-h-[300px] p-4">
+      <PanelTitle
+        icon={<Flame size={14} className="text-[var(--accent)]" />}
+        title="趋势升温"
+        meta={`${topics.length} 个话题`}
+      />
+      {topics.length === 0 ? (
+        <EmptyState text="暂无可识别趋势" />
+      ) : (
+        <div className="mt-3 space-y-2">
+          {topics.slice(0, 6).map((topic) => (
+            <div key={topic.title} className="rounded-md px-2 py-2 hover:bg-[var(--surface-2)]">
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0">
+                  <div className="line-clamp-1 text-[12px] font-medium text-[var(--text)]">{topic.title}</div>
+                  <div className="mt-1 line-clamp-1 text-[10px] text-[var(--text-3)]">{topic.reason}</div>
+                </div>
+                <span className={topicStatusClass(topic.status)}>{topicStatusText(topic.status)}</span>
+              </div>
+              <div className="mt-1 flex gap-2 text-[10px] text-[var(--text-3)]">
+                <span>{topic.today_count} 条</span>
+                <span>{topic.group_count} 群</span>
+                <span>均值 {topic.previous_avg}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function AnomalyPanel({ anomalies }: { anomalies: DashboardAnomalySignal[] }) {
+  return (
+    <section className="card min-h-[300px] p-4">
+      <PanelTitle
+        icon={<AlertTriangle size={14} className="text-[var(--warn)]" />}
+        title="异常信号"
+        meta={`${anomalies.length} 条`}
+      />
+      {anomalies.length === 0 ? (
+        <EmptyState text="暂无异常波动" />
+      ) : (
+        <div className="mt-3 space-y-2">
+          {anomalies.slice(0, 6).map((item) => {
+            const body = (
+              <>
+                <div className="flex items-start justify-between gap-2">
+                  <div className="line-clamp-1 text-[12px] font-medium text-[var(--text)]">{item.title}</div>
+                  <span className={severityClass(item.severity)}>{severityText(item.severity)}</span>
+                </div>
+                <div className="mt-1 line-clamp-2 text-[10px] leading-snug text-[var(--text-3)]">
+                  {item.description}
+                </div>
+              </>
+            );
+            return item.href ? (
+              <a
+                key={`${item.kind}:${item.title}`}
+                href={item.href}
+                target={item.href.startsWith('http') ? '_blank' : undefined}
+                rel={item.href.startsWith('http') ? 'noreferrer' : undefined}
+                className="block rounded-md px-2 py-2 hover:bg-[var(--surface-2)]"
+              >
+                {body}
+              </a>
+            ) : (
+              <div key={`${item.kind}:${item.title}`} className="rounded-md px-2 py-2 hover:bg-[var(--surface-2)]">
+                {body}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function LinkHighlightPanel({ items }: { items: DashboardLinkHighlight[] }) {
+  return (
+    <section className="card min-h-[300px] p-4">
+      <PanelTitle
+        icon={<Link2 size={14} className="text-[var(--accent)]" />}
+        title="链接精选"
+        meta={`${items.length} 条`}
+      />
+      {items.length === 0 ? (
+        <EmptyState text="暂无高价值链接" />
+      ) : (
+        <div className="mt-3 space-y-2">
+          {items.slice(0, 6).map((item) => (
+            <a
+              key={item.url}
+              href={item.url}
+              target="_blank"
+              rel="noreferrer"
+              className="block rounded-md px-2 py-2 hover:bg-[var(--surface-2)]"
+            >
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0">
+                  <div className="line-clamp-1 text-[12px] font-medium text-[var(--text)]">{item.title}</div>
+                  <div className="mt-1 line-clamp-1 text-[10px] text-[var(--text-3)]">{item.verdict}</div>
+                </div>
+                <span className="signal-chip rounded px-1.5 py-0.5 text-[10px]">
+                  {item.kind === 'tool' ? '工具' : '文章'}
+                </span>
+              </div>
+              <div className="mt-1 flex gap-2 text-[10px] text-[var(--text-3)]">
+                <span className="truncate">{item.domain}</span>
+                <span>{item.group_count} 群</span>
+                <span>{item.count} 次</span>
+              </div>
+            </a>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function PeopleRadarPanel({
+  people,
+  fallback,
+}: {
+  people: DashboardPeopleRadar[];
+  fallback: DashboardSignalSource[];
+}) {
+  const displayPeople =
+    people.length > 0
+      ? people
+      : fallback.map((source) => ({
+          sender: source.sender,
+          role: '分享者' as const,
+          score: source.signal_count,
+          group_count: source.group_count,
+          signal_count: source.signal_count,
+          top_group: source.top_group,
+          reason: `${source.signal_count} 条高信号`,
+        }));
+  return (
+    <section className="card min-h-[300px] p-4">
+      <PanelTitle
+        icon={<UserRoundCheck size={14} className="text-[var(--accent)]" />}
+        title="人物雷达"
+        meta={`${displayPeople.length} 人`}
+      />
+      {displayPeople.length === 0 ? (
+        <EmptyState text="暂无稳定情报源" />
+      ) : (
+        <div className="mt-3 space-y-1.5">
+          {displayPeople.slice(0, 7).map((person, index) => (
+            <div key={`${person.sender}:${person.top_group}`} className="grid grid-cols-[22px_1fr_42px] items-center gap-2 rounded-md px-2 py-2 hover:bg-[var(--surface-2)]">
+              <span className="rounded bg-[var(--surface-2)] py-0.5 text-center text-[10px] tabular-nums text-[var(--text-3)]">
+                {index + 1}
+              </span>
+              <div className="min-w-0">
+                <div className="truncate text-[12px] text-[var(--text)]">{person.sender}</div>
+                <div className="truncate text-[10px] text-[var(--text-3)]">
+                  {person.role} · {person.reason}
+                </div>
+              </div>
+              <div className="text-right">
+                <div className="text-[13px] font-semibold tabular-nums text-[var(--accent)]">{person.score}</div>
+                <div className="text-[10px] text-[var(--text-3)]">{person.group_count} 群</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function ContentIdeaPanel({ ideas }: { ideas: DashboardContentIdea[] }) {
+  return (
+    <section className="card min-h-[300px] p-4">
+      <PanelTitle
+        icon={<Lightbulb size={14} className="text-[var(--warn)]" />}
+        title="内容选题"
+        meta={`${ideas.length} 个`}
+      />
+      {ideas.length === 0 ? (
+        <EmptyState text="暂无可转化选题" />
+      ) : (
+        <div className="mt-3 space-y-2">
+          {ideas.slice(0, 6).map((idea) => (
+            <div key={`${idea.suggested_channel}:${idea.title}`} className="rounded-md px-2 py-2 hover:bg-[var(--surface-2)]">
+              <div className="flex items-start justify-between gap-2">
+                <div className="line-clamp-2 text-[12px] font-medium leading-snug text-[var(--text)]">{idea.title}</div>
+                <span className="rounded bg-[var(--surface-2)] px-1.5 py-0.5 text-[10px] text-[var(--text-2)]">
+                  {idea.suggested_channel}
+                </span>
+              </div>
+              <div className="mt-1 line-clamp-1 text-[10px] text-[var(--text-3)]">{idea.angle}</div>
+              <div className="mt-1 text-[10px] text-[var(--text-3)]">证据：{idea.evidence}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function MustReadPanel({ date, items }: { date: string; items: DashboardSignalItem[] }) {
+  return (
+    <section className="card min-h-[300px] p-4">
+      <PanelTitle
+        icon={<Radar size={14} className="text-[var(--accent)]" />}
+        title="最值得关注"
+        meta={`${items.length} 条高信号`}
+      />
+      {items.length === 0 ? (
+        <EmptyState text="暂无高信号消息" />
+      ) : (
+        <div className="mt-3 space-y-1">
+          {items.slice(0, 5).map((item, index) => (
+            <SignalRow key={`${item.chatroom_id}:${item.local_id}`} item={item} date={date} rank={index + 1} />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function SignalRow({
+  item,
+  date,
+  rank,
+}: {
+  item: DashboardSignalItem;
+  date: string;
+  rank: number;
+}) {
+  return (
+    <Link
+      href={`/groups/${encodeURIComponent(item.chatroom_id)}?date=${date}`}
+      className="grid grid-cols-[22px_1fr_16px] items-start gap-2 rounded-md px-2 py-2 transition-colors hover:bg-[var(--surface-2)]"
+    >
+      <span className="rounded bg-[var(--surface-2)] py-0.5 text-center text-[10px] tabular-nums text-[var(--text-3)]">
+        {rank}
+      </span>
+      <span className="min-w-0">
+        <span className="flex min-w-0 items-start justify-between gap-2">
+          <span className="line-clamp-1 text-[12px] font-medium text-[var(--text)]">{item.title}</span>
+          <span className="shrink-0 rounded bg-[var(--surface-2)] px-1.5 py-0.5 text-[10px] tabular-nums text-[var(--text-3)]">
+            {item.score}
+          </span>
+        </span>
+        <span className="mt-1 flex min-w-0 items-center gap-1.5 text-[10px] text-[var(--text-3)]">
+          <span className="truncate">
+            {item.chat_name} · {item.sender}
+          </span>
+          <span className="shrink-0 tabular-nums">{item.time.slice(11)}</span>
+        </span>
+        <span className="mt-1 flex flex-wrap gap-1">
+          {item.reasons.slice(0, 3).map((reason) => (
+            <span
+              key={reason}
+              className="signal-chip rounded px-1.5 py-0.5 text-[10px]"
+              title={reasonExplanation(reason)}
+            >
+              {reason}
+            </span>
+          ))}
+        </span>
+      </span>
+      <ExternalLink size={12} className="mt-0.5 text-[var(--text-3)]" />
+    </Link>
+  );
+}
+
+function PanelTitle({ icon, title, meta }: { icon: ReactNode; title: string; meta: string }) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-1.5 text-[14px] font-semibold">
+        {icon}
+        {title}
+      </div>
+      <div className="text-[11px] text-[var(--text-3)]">{meta}</div>
+    </div>
+  );
+}
+
+function EmptyState({ text }: { text: string }) {
+  return (
+    <div className="flex h-[220px] items-center justify-center text-[12px] text-[var(--text-3)]">
+      {text}
+    </div>
+  );
+}
+
+function buildDailySummary(data: DashboardIntelligence): string {
+  const lines = [`${data.date || '今日'} 情报摘要`];
+  lines.push(`出手：${data.action_items.slice(0, 3).map((item) => `${item.action}｜${item.title}`).join('；') || '暂无'}`);
+  lines.push(`趋势：${data.topic_lifecycle.slice(0, 3).map((topic) => `${topic.title}(${topicStatusText(topic.status)})`).join('；') || '暂无'}`);
+  lines.push(
+    `链接：${data.link_highlights.slice(0, 3).map((item) => item.title).join('；') || '暂无'}`,
+  );
+  lines.push(
+    `异常：${data.anomalies.slice(0, 2).map((item) => item.title).join('；') || '暂无'}`,
+  );
+  return lines.join('\n');
+}
+
+function urgencyText(urgency: DashboardActionItem['urgency']): string {
+  if (urgency === 'high') return '高';
+  if (urgency === 'medium') return '中';
+  return '低';
+}
+
+function urgencyClass(urgency: DashboardActionItem['urgency']): string {
+  const base = 'shrink-0 rounded px-1.5 py-0.5 text-[10px]';
+  if (urgency === 'high') return `${base} bg-[var(--warn-soft)] text-[var(--warn)]`;
+  if (urgency === 'medium') return `${base} bg-[var(--accent-soft)] text-[var(--accent)]`;
+  return `${base} bg-[var(--surface-2)] text-[var(--text-3)]`;
+}
+
+function topicStatusText(status: DashboardTopicLifecycle['status']): string {
+  if (status === 'spreading') return '扩散';
+  if (status === 'rising') return '升温';
+  if (status === 'cooling') return '退潮';
+  return '高热';
+}
+
+function topicStatusClass(status: DashboardTopicLifecycle['status']): string {
+  const base = 'shrink-0 rounded px-1.5 py-0.5 text-[10px]';
+  if (status === 'spreading') return `${base} bg-[var(--accent-soft)] text-[var(--accent)]`;
+  if (status === 'rising') return `${base} bg-[var(--warn-soft)] text-[var(--warn)]`;
+  if (status === 'cooling') return `${base} bg-[var(--surface-2)] text-[var(--text-3)]`;
+  return `${base} bg-[var(--surface-2)] text-[var(--text-2)]`;
+}
+
+function severityText(severity: DashboardAnomalySignal['severity']): string {
+  if (severity === 'high') return '高';
+  if (severity === 'medium') return '中';
+  return '低';
+}
+
+function severityClass(severity: DashboardAnomalySignal['severity']): string {
+  const base = 'shrink-0 rounded px-1.5 py-0.5 text-[10px]';
+  if (severity === 'high') return `${base} bg-[var(--warn-soft)] text-[var(--warn)]`;
+  if (severity === 'medium') return `${base} bg-[var(--accent-soft)] text-[var(--accent)]`;
+  return `${base} bg-[var(--surface-2)] text-[var(--text-3)]`;
+}
+
+function reasonExplanation(reason: string): string {
+  const map: Record<string, string> = {
+    '机会/需求': '包含合作、采购、报名、求推荐或找资源等可行动信号',
+    '工具/产品': '提到了工具、产品、模型、插件、项目或技术栈',
+    链接信号: '包含可跳转链接，适合进入原文或资源查看',
+    可跟进: '含有联系、报名、评估、试用、帮忙等行动线索',
+    长观点: '消息长度较高，可能包含完整观点或经验复盘',
+    问题: '包含明确问题，可能适合回复或继续追踪',
+  };
+  return map[reason] ?? reason;
+}