@octo-cyber/sea-king 0.5.0

package/web/pages/PhrasesPage.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { BookHeart, Eye, EyeOff, Shuffle, Filter } from 'lucide-react';
+import { listPhrases, getPhrasePractice } from '../services/sea-king-service';
+import type { PhraseTemplate } from '../types/sea-king';
+
+const SCENE_INFO: Record<string, { emoji: string; color: string }> = {
+  first_meet: { emoji: '👋', color: 'bg-blue-100 text-blue-700' },
+  daily_care: { emoji: '💝', color: 'bg-pink-100 text-pink-700' },
+  resolve_awkward: { emoji: '😅', color: 'bg-amber-100 text-amber-700' },
+  elegant_reject: { emoji: '🙏', color: 'bg-purple-100 text-purple-700' },
+  flirt: { emoji: '😏', color: 'bg-rose-100 text-rose-700' },
+  cool_down: { emoji: '❄️', color: 'bg-cyan-100 text-cyan-700' },
+  crisis_response: { emoji: '🚨', color: 'bg-red-100 text-red-700' },
+  morning_night: { emoji: '🌙', color: 'bg-indigo-100 text-indigo-700' },
+};
+
+export default function PhrasesPage() {
+  const t = useTranslations('seaKing.phrases');
+
+  const [phrases, setPhrases] = useState<PhraseTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedScene, setSelectedScene] = useState<string | undefined>();
+  const [revealedIds, setRevealedIds] = useState<Set<string>>(new Set());
+  const [practiceMode, setPracticeMode] = useState(false);
+
+  useEffect(() => {
+    loadPhrases();
+  }, [selectedScene]);
+
+  const loadPhrases = async () => {
+    setLoading(true);
+    try {
+      if (practiceMode) {
+        const data = await getPhrasePractice({ count: 5, scene: selectedScene });
+        setPhrases(data);
+      } else {
+        const data = await listPhrases({ scene: selectedScene, pageSize: 50 });
+        setPhrases(data.items);
+      }
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggleReveal = (id: string) => {
+    setRevealedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const scenes = Object.keys(SCENE_INFO);
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Header */}
+      <div className="bg-gradient-to-r from-pink-500 via-rose-500 to-red-500 rounded-2xl p-8 text-white relative overflow-hidden">
+        <div className="absolute top-0 right-0 opacity-10 text-[180px] leading-none select-none">
+          💬
+        </div>
+        <div className="relative z-10">
+          <div className="flex items-center gap-3 mb-2">
+            <BookHeart className="h-8 w-8" />
+            <h1 className="text-3xl font-bold">{t('title')}</h1>
+          </div>
+          <p className="text-pink-100 text-lg mt-2">{t('subtitle')}</p>
+        </div>
+      </div>
+
+      {/* Controls */}
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex items-center gap-2">
+          <Filter className="h-4 w-4 text-gray-400" />
+          <button
+            onClick={() => setSelectedScene(undefined)}
+            className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
+              !selectedScene ? 'bg-pink-500 text-white' : 'bg-gray-100 hover:bg-gray-200'
+            }`}
+          >
+            {t('allScenes')}
+          </button>
+          {scenes.map((scene) => {
+            const info = SCENE_INFO[scene]!;
+            return (
+              <button
+                key={scene}
+                onClick={() => setSelectedScene(scene)}
+                className={`px-3 py-1.5 rounded-lg text-sm transition-colors flex items-center gap-1 ${
+                  selectedScene === scene ? 'bg-pink-500 text-white' : `${info.color} hover:opacity-80`
+                }`}
+              >
+                <span>{info.emoji}</span>
+                {t(`scenes.${scene}`)}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="ml-auto flex gap-2">
+          <button
+            onClick={() => {
+              setPracticeMode(!practiceMode);
+              setRevealedIds(new Set());
+            }}
+            className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${
+              practiceMode
+                ? 'bg-amber-500 text-white'
+                : 'bg-gray-100 hover:bg-gray-200'
+            }`}
+          >
+            <Shuffle className="h-4 w-4" />
+            {t('practiceMode')}
+          </button>
+        </div>
+      </div>
+
+      {/* Phrases Grid */}
+      {loading ? (
+        <div className="flex items-center justify-center min-h-[200px]">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-500" />
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {phrases.map((phrase) => {
+            const isRevealed = revealedIds.has(phrase.id);
+            const sceneInfo = SCENE_INFO[phrase.scene] ?? { emoji: '💬', color: 'bg-gray-100' };
+
+            return (
+              <div
+                key={phrase.id}
+                className="bg-white rounded-xl border shadow-sm hover:shadow-md transition-shadow overflow-hidden"
+              >
+                {/* Scene Header */}
+                <div className="px-4 py-2 bg-gray-50 border-b flex items-center justify-between">
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${sceneInfo.color}`}>
+                    {sceneInfo.emoji} {t(`scenes.${phrase.scene}`)}
+                  </span>
+                  <span className="text-xs text-gray-400">
+                    +{phrase.favorBonus} 好感度
+                  </span>
+                </div>
+
+                {/* Trigger */}
+                <div className="p-4">
+                  <div className="mb-3">
+                    <div className="text-xs text-gray-400 mb-1">{t('theyAsk')}</div>
+                    <div className="bg-gray-100 rounded-xl px-4 py-3 text-sm">
+                      {phrase.trigger}
+                    </div>
+                  </div>
+
+                  {/* Bad Reply */}
+                  <div className="mb-3">
+                    <div className="text-xs text-red-400 mb-1 flex items-center gap-1">
+                      ❌ {t('badReply')}
+                    </div>
+                    <div className="bg-red-50 rounded-xl px-4 py-3 text-sm text-red-700 border border-red-200">
+                      {phrase.badReply}
+                    </div>
+                  </div>
+
+                  {/* Good Reply (can be hidden in practice mode) */}
+                  <div className="mb-3">
+                    <div className="text-xs text-green-500 mb-1 flex items-center justify-between">
+                      <span className="flex items-center gap-1">
+                        ✅ {t('goodReply')}
+                      </span>
+                      {practiceMode && (
+                        <button
+                          onClick={() => toggleReveal(phrase.id)}
+                          className="flex items-center gap-1 text-gray-400 hover:text-gray-600"
+                        >
+                          {isRevealed ? (
+                            <EyeOff className="h-3 w-3" />
+                          ) : (
+                            <Eye className="h-3 w-3" />
+                          )}
+                          {isRevealed ? t('hide') : t('reveal')}
+                        </button>
+                      )}
+                    </div>
+                    {(!practiceMode || isRevealed) ? (
+                      <div className="bg-green-50 rounded-xl px-4 py-3 text-sm text-green-700 border border-green-200">
+                        {phrase.goodReply}
+                      </div>
+                    ) : (
+                      <div className="bg-gray-100 rounded-xl px-4 py-3 text-sm text-gray-400 text-center border-2 border-dashed border-gray-300">
+                        🤔 {t('thinkFirst')}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Explanation */}
+                  {(!practiceMode || isRevealed) && (
+                    <div className="bg-blue-50 rounded-xl px-4 py-3 text-xs text-blue-700 border border-blue-200">
+                      💡 {phrase.explanation}
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {phrases.length === 0 && !loading && (
+        <div className="text-center py-12 text-gray-400">
+          <span className="text-4xl">📭</span>
+          <p className="mt-2">{t('noPhrases')}</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/web/services/sea-king-service.ts

@@ -0,0 +1,151 @@
+import type {
+  ChatCharacter,
+  ChatSession,
+  ChatMessage,
+  CrisisEvent,
+  PlayerAnalysis,
+  PhraseTemplate,
+  LeaderboardEntry,
+  SendMessageResult,
+} from '../types/sea-king';
+
+const BASE = '/api/v1/sea-king';
+
+async function fetchJson<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(url, {
+    headers: { 'Content-Type': 'application/json' },
+    ...init,
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(err.error ?? `HTTP ${res.status}`);
+  }
+  if (res.status === 204) return undefined as any;
+  return res.json();
+}
+
+// ─── Characters ────────────────────────────────────────────────────────────
+
+export async function listCharacters(): Promise<ChatCharacter[]> {
+  return fetchJson(`${BASE}/characters`);
+}
+
+export async function getCharacter(id: string): Promise<ChatCharacter> {
+  return fetchJson(`${BASE}/characters/${id}`);
+}
+
+// ─── Chat Sessions ─────────────────────────────────────────────────────────
+
+export async function startSession(params: {
+  characterCount?: number;
+  difficulty?: string;
+  preferredPersonalities?: string[];
+}): Promise<{ session: ChatSession; threads: any[] }> {
+  return fetchJson(`${BASE}/chat/sessions`, {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+}
+
+export async function getSession(sessionId: string): Promise<ChatSession> {
+  return fetchJson(`${BASE}/chat/sessions/${sessionId}`);
+}
+
+export async function sendMessage(params: {
+  threadId: string;
+  content: string;
+}): Promise<SendMessageResult> {
+  return fetchJson(`${BASE}/chat/messages`, {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+}
+
+export async function getThreadMessages(
+  threadId: string,
+  page?: number,
+  pageSize?: number,
+): Promise<{ items: ChatMessage[]; total: number }> {
+  const qs = new URLSearchParams();
+  if (page) qs.set('page', String(page));
+  if (pageSize) qs.set('pageSize', String(pageSize));
+  return fetchJson(`${BASE}/chat/threads/${threadId}/messages?${qs}`);
+}
+
+export async function endSession(sessionId: string): Promise<ChatSession> {
+  return fetchJson(`${BASE}/chat/sessions/${sessionId}/end`, { method: 'POST' });
+}
+
+export async function getChatHistory(
+  page?: number,
+  pageSize?: number,
+): Promise<{ items: ChatSession[]; total: number }> {
+  const qs = new URLSearchParams();
+  if (page) qs.set('page', String(page));
+  if (pageSize) qs.set('pageSize', String(pageSize));
+  return fetchJson(`${BASE}/chat/history?${qs}`);
+}
+
+// ─── Crisis Events ─────────────────────────────────────────────────────────
+
+export async function triggerCrisis(sessionId: string): Promise<CrisisEvent> {
+  return fetchJson(`${BASE}/crisis/trigger/${sessionId}`, { method: 'POST' });
+}
+
+export async function resolveCrisis(params: {
+  crisisId: string;
+  response: string;
+}): Promise<CrisisEvent> {
+  return fetchJson(`${BASE}/crisis/resolve`, {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+}
+
+// ─── Profile & Analysis ────────────────────────────────────────────────────
+
+export async function getAnalysis(): Promise<PlayerAnalysis> {
+  return fetchJson(`${BASE}/profile/analysis`);
+}
+
+// ─── Phrase Library ────────────────────────────────────────────────────────
+
+export async function listPhrases(params?: {
+  page?: number;
+  pageSize?: number;
+  scene?: string;
+  difficulty?: string;
+}): Promise<{ items: PhraseTemplate[]; total: number }> {
+  const qs = new URLSearchParams();
+  if (params?.page) qs.set('page', String(params.page));
+  if (params?.pageSize) qs.set('pageSize', String(params.pageSize));
+  if (params?.scene) qs.set('scene', params.scene);
+  if (params?.difficulty) qs.set('difficulty', params.difficulty);
+  return fetchJson(`${BASE}/phrases?${qs}`);
+}
+
+export async function getPhrasePractice(params?: {
+  count?: number;
+  scene?: string;
+  difficulty?: string;
+}): Promise<PhraseTemplate[]> {
+  const qs = new URLSearchParams();
+  if (params?.count) qs.set('count', String(params.count));
+  if (params?.scene) qs.set('scene', params.scene);
+  if (params?.difficulty) qs.set('difficulty', params.difficulty);
+  return fetchJson(`${BASE}/phrases/practice?${qs}`);
+}
+
+// ─── Leaderboard ───────────────────────────────────────────────────────────
+
+export async function getLeaderboard(params?: {
+  page?: number;
+  pageSize?: number;
+  season?: string;
+}): Promise<{ items: LeaderboardEntry[]; total: number }> {
+  const qs = new URLSearchParams();
+  if (params?.page) qs.set('page', String(params.page));
+  if (params?.pageSize) qs.set('pageSize', String(params.pageSize));
+  if (params?.season) qs.set('season', params.season);
+  return fetchJson(`${BASE}/leaderboard?${qs}`);
+}

package/web/types/sea-king.ts

@@ -0,0 +1,249 @@
+export interface ChatCharacter {
+  id: string;
+  name: string;
+  avatar: string;
+  personality: string;
+  gender: string;
+  backstory: string;
+  speakingStyle: string;
+  favorTraits: string | null;
+  peeves: string | null;
+  createdAt: string;
+}
+
+export interface ChatSession {
+  id: string;
+  userId: string;
+  status: 'active' | 'completed' | 'failed' | 'abandoned';
+  characterCount: number;
+  totalFavorScore: number;
+  crisisCount: number;
+  durationSeconds: number;
+  rank: string;
+  summary: string | null;
+  threads: ChatThread[];
+  crises: CrisisEvent[];
+  createdAt: string;
+}
+
+export interface ChatThread {
+  id: string;
+  sessionId: string;
+  characterId: string;
+  favorability: number;
+  favorHistory: string;
+  threadStatus: string;
+  unreadCount: number;
+  lastMessage: string | null;
+  lastActiveAt: string | null;
+  character: ChatCharacter;
+  messages: ChatMessage[];
+}
+
+export interface ChatMessage {
+  id: string;
+  threadId: string;
+  characterId: string | null;
+  role: 'user' | 'character' | 'system';
+  content: string;
+  favorDelta: number;
+  favorReason: string | null;
+  sentiment: string | null;
+  createdAt: string;
+}
+
+export interface CrisisEvent {
+  id: string;
+  sessionId: string;
+  crisisType: string;
+  description: string;
+  involvedCharacterIds: string;
+  status: 'triggered' | 'resolved' | 'failed';
+  userResponse: string | null;
+  resolutionScore: number | null;
+  feedback: string | null;
+  timeLimit: number;
+  createdAt: string;
+}
+
+export interface PlayerProfile {
+  id: string;
+  userId: string;
+  rank: string;
+  rankPoints: number;
+  totalSessions: number;
+  totalFavorGained: number;
+  crisisResolved: number;
+  humorScore: number;
+  empathyScore: number;
+  topicLeadScore: number;
+  timeManageScore: number;
+  crisisHandleScore: number;
+  bestStreak: number;
+}
+
+export interface PlayerAnalysis {
+  profile: PlayerProfile;
+  rankInfo: {
+    label: string;
+    emoji: string;
+    nextRank: string | null;
+    pointsToNext: number;
+  };
+  radarData: Array<{ dimension: string; score: number; label: string }>;
+}
+
+export interface PhraseTemplate {
+  id: string;
+  scene: string;
+  trigger: string;
+  badReply: string;
+  goodReply: string;
+  explanation: string;
+  favorBonus: number;
+  difficulty: string;
+  tags: string | null;
+}
+
+export interface LeaderboardEntry {
+  id: string;
+  userId: string;
+  displayName: string;
+  totalScore: number;
+  rank: string;
+  maxConcurrentChats: number;
+  crisisSuccessRate: number;
+  season: string;
+}
+
+export interface SendMessageResult {
+  userMessage: ChatMessage;
+  characterReply: ChatMessage;
+  favorDelta: number;
+  newFavorability: number;
+  threadStatus: string;
+}
+
+// ─── Live Mode Types (真人混战) ─────────────────────────────────────────────
+
+export interface MatchRoom {
+  id: string;
+  roomName: string;
+  mode: 'blind' | 'turing' | 'ranked';
+  status: 'waiting' | 'active' | 'revealing' | 'completed' | 'disbanded';
+  hostUserId: string;
+  maxPlayers: number;
+  humanCount: number;
+  aiCount: number;
+  roundTimeLimit: number;
+  totalRounds: number;
+  currentRound: number;
+  password: string | null;
+  threads: LiveThread[];
+  createdAt: string;
+}
+
+export interface LiveThread {
+  id: string;
+  roomId: string;
+  participantAId: string;
+  participantAName: string;
+  participantAAvatar: string;
+  participantBId: string;
+  participantBName: string;
+  participantBAvatar: string;
+  /** 前端不知道对方是人还是AI，这就是核心秘密 */
+  favorabilityAtoB: number;
+  favorabilityBtoA: number;
+  status: 'active' | 'paused' | 'completed' | 'ai_replaced';
+  messageCount: number;
+  createdAt: string;
+}
+
+export interface LiveMessage {
+  id: string;
+  threadId: string;
+  senderId: string;
+  senderName: string;
+  content: string;
+  /** sourceType 不会传到前端 — 这是以假乱真的核心 */
+  favorDelta: number;
+  favorReason: string | null;
+  sentiment: string;
+  createdAt: string;
+}
+
+export interface PlayerQueueEntry {
+  id: string;
+  userId: string;
+  displayName: string;
+  rank: string;
+  preferredMode: string;
+  status: 'waiting' | 'matched' | 'expired' | 'cancelled';
+  matchedRoomId: string | null;
+  createdAt: string;
+}
+
+export interface Persona {
+  name: string;
+  avatar: string;
+  personality: string;
+  backstory: string;
+}
+
+/** 图灵猜测（提交时） */
+export interface TuringGuessSubmit {
+  threadId: string;
+  targetId: string;
+  guess: 'human' | 'ai';
+  confidence: number;
+  reason?: string;
+}
+
+/** 图灵揭晓结果（单条） */
+export interface TuringRevealItem {
+  threadId: string;
+  targetId: string;
+  targetName: string;
+  guess: 'human' | 'ai';
+  actual: 'human' | 'ai';
+  wasAiTakeover: boolean;
+  isCorrect: boolean;
+  pointsDelta: number;
+  confidence: number;
+  reason: string | null;
+}
+
+/** 图灵揭晓结果（房间级） */
+export interface TuringRevealResult {
+  roomId: string;
+  results: TuringRevealItem[];
+  totalPoints: number;
+  accuracy: number;
+  title: string;
+}
+
+/** 图灵个人战绩 */
+export interface TuringStats {
+  totalGuesses: number;
+  correctGuesses: number;
+  accuracy: number;
+  totalPoints: number;
+  bestStreak: number;
+}
+
+/** WebSocket 事件 */
+export interface WSEvent {
+  type: string;
+  data: unknown;
+  timestamp: number;
+}
+
+/** 在线状态 */
+export interface RoomParticipant {
+  id: string;
+  name: string;
+  avatar: string;
+  isOnline: boolean;
+  /** 不暴露 isAI！ */
+}