@octo-cyber/humble-brag-lab 0.5.2

package/web/messages/zh-CN.json

@@ -0,0 +1,76 @@
+{
+  "nav": {
+    "humbleBragLab": {
+      "title": "凡尔赛鉴定师",
+      "description": "识别和分析隐性炫耀式发言",
+      "pages": {
+        "analyzer": "凡尔赛鉴定"
+      }
+    }
+  },
+  "humbleBragLab": {
+    "title": "凡尔赛鉴定师",
+    "description": "识别和分析隐性炫耀式发言",
+    "pages": {
+      "analyzer": "凡尔赛鉴定"
+    },
+    "analyzer": {
+      "title": "凡尔赛鉴定师",
+      "subtitle": "一眼看穿隐性炫耀，翻译成大白话",
+      "placeholder": "请输入一段话，例如：「唉，又被老板让我带新项目了，真的好累……」",
+      "analyze": "开始鉴定",
+      "analyzing": "鉴定中...",
+      "clear": "清空",
+      "charCount": "{count} / 2000"
+    },
+    "result": {
+      "title": "鉴定结果",
+      "scoreLabel": "凡尔赛指数",
+      "rankLabel": "段位",
+      "translationLabel": "直白翻译",
+      "patternsLabel": "识别到的凡尔赛模式",
+      "highlightsLabel": "凡尔赛片段",
+      "collectBtn": "收藏这句话",
+      "collected": "已收藏",
+      "copyTranslation": "复制翻译",
+      "copied": "已复制"
+    },
+    "patterns": {
+      "fakeComplaint": "抱怨式炫耀",
+      "luxuryMention": "奢侈品随口一提",
+      "eliteAffiliation": "名校/顶尖机构背书",
+      "humilityReversal": "假谦虚反转句",
+      "disguisedSuccess": "以悲剧包装喜讯",
+      "imposedHonor": "被迫承受荣誉",
+      "wealthHint": "财富暗示",
+      "superiorityCompare": "优越感对比",
+      "surpriseBoast": "假装意外的成就",
+      "casualFlexing": "随手式炫耀"
+    },
+    "ranks": {
+      "description": "凡尔赛段位说明",
+      "levels": "路人 → 学徒 → 白银 → 黄金 → 铂金 → 钻石 → 王者"
+    },
+    "classics": {
+      "title": "经典凡尔赛语录",
+      "subtitle": "来自民间的真实案例",
+      "tryIt": "试试这句"
+    },
+    "history": {
+      "title": "最近鉴定记录",
+      "empty": "还没有鉴定记录",
+      "reanalyze": "再次鉴定"
+    },
+    "collections": {
+      "title": "我的凡尔赛收藏",
+      "empty": "收藏夹是空的",
+      "remove": "取消收藏"
+    },
+    "tabs": {
+      "analyzer": "鉴定",
+      "classics": "经典语录",
+      "history": "历史记录",
+      "collections": "我的收藏"
+    }
+  }
+}

package/web/pages/HumbleBragLabPage.tsx

@@ -0,0 +1,561 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { Card, CardContent, CardHeader, CardTitle } from '@octo-cyber/ui/components/ui/card'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@octo-cyber/ui/components/ui/tabs'
+import {
+  Sparkles, Copy, BookmarkPlus, BookmarkCheck, RotateCcw, ChevronRight,
+} from 'lucide-react'
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface PatternMatch {
+  pattern: string
+  snippet: string
+  weight: number
+}
+
+interface AnalysisResult {
+  id: string
+  score: number
+  rank: string
+  translation: string
+  patterns: PatternMatch[]
+  highlights: string[]
+}
+
+interface AnalysisRecord {
+  id: string
+  inputText: string
+  score: number
+  rank: string
+  translation: string
+  createdAt: string
+}
+
+interface CollectionItem {
+  id: string
+  text: string
+  translation: string
+  score: number
+  rank: string
+  createdAt: string
+}
+
+interface ClassicQuote {
+  id: string
+  text: string
+  translation: string
+  score: number
+  rank: string
+  category: string
+}
+
+// ── API helpers ───────────────────────────────────────────────────────────────
+
+async function apiAnalyze(text: string): Promise<AnalysisResult> {
+  const res = await fetch('/api/v1/humble-brag-lab/analyze', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ text }),
+  })
+  if (!res.ok) throw new Error('分析失败')
+  const json = await res.json()
+  return json.data as AnalysisResult
+}
+
+async function apiFetchRecords(): Promise<AnalysisRecord[]> {
+  const res = await fetch('/api/v1/humble-brag-lab/records')
+  if (!res.ok) return []
+  const json = await res.json()
+  return json.data as AnalysisRecord[]
+}
+
+async function apiFetchClassics(): Promise<ClassicQuote[]> {
+  const res = await fetch('/api/v1/humble-brag-lab/classic-quotes')
+  if (!res.ok) return []
+  const json = await res.json()
+  return json.data as ClassicQuote[]
+}
+
+async function apiFetchCollections(): Promise<CollectionItem[]> {
+  const res = await fetch('/api/v1/humble-brag-lab/collections')
+  if (!res.ok) return []
+  const json = await res.json()
+  return json.data as CollectionItem[]
+}
+
+async function apiAddCollection(data: {
+  text: string; translation: string; score: number; rank: string; recordId?: string
+}): Promise<void> {
+  const res = await fetch('/api/v1/humble-brag-lab/collections', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+  if (!res.ok) throw new Error('收藏失败')
+}
+
+async function apiRemoveCollection(id: string): Promise<void> {
+  await fetch(`/api/v1/humble-brag-lab/collections/${id}`, { method: 'DELETE' })
+}
+
+// ── Score Gauge ───────────────────────────────────────────────────────────────
+
+function ScoreGauge({ score }: { score: number }) {
+  const color =
+    score >= 80 ? 'text-red-500' :
+    score >= 60 ? 'text-orange-500' :
+    score >= 40 ? 'text-yellow-500' :
+    score >= 20 ? 'text-blue-500' : 'text-muted-foreground'
+
+  const ringColor =
+    score >= 80 ? 'stroke-red-500' :
+    score >= 60 ? 'stroke-orange-500' :
+    score >= 40 ? 'stroke-yellow-500' :
+    score >= 20 ? 'stroke-blue-500' : 'stroke-muted'
+
+  const radius = 52
+  const circumference = 2 * Math.PI * radius
+  const progress = (score / 100) * circumference
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div className="relative h-32 w-32">
+        <svg className="h-32 w-32 -rotate-90" viewBox="0 0 128 128">
+          <circle cx="64" cy="64" r={radius} fill="none" stroke="currentColor"
+            className="text-muted/30" strokeWidth="10" />
+          <circle cx="64" cy="64" r={radius} fill="none" strokeWidth="10"
+            className={`transition-all duration-700 ${ringColor}`}
+            strokeDasharray={`${progress} ${circumference}`}
+            strokeLinecap="round" />
+        </svg>
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span className={`text-3xl font-bold tabular-nums ${color}`}>{score}</span>
+          <span className="text-xs text-muted-foreground">/ 100</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ── Rank Badge ────────────────────────────────────────────────────────────────
+
+function RankBadge({ rank, size = 'default' }: { rank: string; size?: 'default' | 'lg' }) {
+  const isKing = rank.includes('王者')
+  const isDiamond = rank.includes('钻石') || rank.includes('Diamond')
+  const isPlatinum = rank.includes('铂金') || rank.includes('Platinum')
+  const isGold = rank.includes('黄金') || rank.includes('Gold')
+
+  const cls =
+    isKing ? 'bg-yellow-100 text-yellow-800 border-yellow-300 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-700' :
+    isDiamond ? 'bg-purple-100 text-purple-800 border-purple-300 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700' :
+    isPlatinum ? 'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-900/30 dark:text-cyan-300 dark:border-cyan-700' :
+    isGold ? 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-700' :
+    'bg-zinc-100 text-zinc-700 border-zinc-300 dark:bg-zinc-800 dark:text-zinc-300 dark:border-zinc-600'
+
+  return (
+    <span className={`inline-flex items-center rounded-full border px-3 font-semibold
+      ${size === 'lg' ? 'py-2 text-base' : 'py-1 text-sm'} ${cls}`}>
+      {rank}
+    </span>
+  )
+}
+
+// ── Result Panel ──────────────────────────────────────────────────────────────
+
+function ResultPanel({
+  result,
+  inputText,
+  onCollect,
+}: {
+  result: AnalysisResult
+  inputText: string
+  onCollect: () => void
+}) {
+  const t = useTranslations('humbleBragLab')
+  const [copied, setCopied] = useState(false)
+  const [collected, setCollected] = useState(false)
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(result.translation)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [result.translation])
+
+  const handleCollect = useCallback(async () => {
+    try {
+      await apiAddCollection({
+        text: inputText,
+        translation: result.translation,
+        score: result.score,
+        rank: result.rank,
+        recordId: result.id,
+      })
+      setCollected(true)
+      onCollect()
+      toast.success('已加入收藏')
+    } catch {
+      toast.error('收藏失败')
+    }
+  }, [inputText, result, onCollect])
+
+  return (
+    <div className="space-y-4">
+      {/* Score + Rank */}
+      <Card>
+        <CardContent className="flex flex-col items-center gap-4 py-6 sm:flex-row sm:justify-center sm:gap-8">
+          <div className="flex flex-col items-center gap-1">
+            <p className="text-xs font-medium text-muted-foreground">{t('result.scoreLabel')}</p>
+            <ScoreGauge score={result.score} />
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-xs font-medium text-muted-foreground">{t('result.rankLabel')}</p>
+            <RankBadge rank={result.rank} size="lg" />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Translation */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium text-muted-foreground">
+            {t('result.translationLabel')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-base leading-relaxed">{result.translation}</p>
+          <div className="mt-3 flex gap-2">
+            <Button variant="outline" size="sm" onClick={handleCopy}>
+              <Copy className="mr-1.5 h-3.5 w-3.5" />
+              {copied ? t('result.copied') : t('result.copyTranslation')}
+            </Button>
+            <Button
+              variant={collected ? 'secondary' : 'outline'}
+              size="sm"
+              onClick={handleCollect}
+              disabled={collected}
+            >
+              {collected
+                ? <><BookmarkCheck className="mr-1.5 h-3.5 w-3.5" />{t('result.collected')}</>
+                : <><BookmarkPlus className="mr-1.5 h-3.5 w-3.5" />{t('result.collectBtn')}</>
+              }
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Patterns */}
+      {result.patterns.length > 0 && (
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {t('result.patternsLabel')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {result.patterns.map((p) => (
+                <Badge key={p.pattern} variant="secondary" className="text-xs">
+                  {t(`patterns.${p.pattern}` as Parameters<typeof t>[0])}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Highlights */}
+      {result.highlights.length > 0 && (
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {t('result.highlightsLabel')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1">
+              {result.highlights.map((h, i) => (
+                <p key={i} className="rounded bg-amber-50 px-2 py-1 text-sm dark:bg-amber-950/20">
+                  「{h}」
+                </p>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}
+
+// ── Classics Tab ──────────────────────────────────────────────────────────────
+
+function ClassicsTab({ onTry }: { onTry: (text: string) => void }) {
+  const t = useTranslations('humbleBragLab')
+  const [quotes, setQuotes] = useState<ClassicQuote[]>([])
+  const [loaded, setLoaded] = useState(false)
+
+  const load = useCallback(async () => {
+    if (loaded) return
+    const data = await apiFetchClassics()
+    setQuotes(data)
+    setLoaded(true)
+  }, [loaded])
+
+  // Auto-load on mount
+  useState(() => { load() })
+
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">{t('classics.subtitle')}</p>
+      {quotes.map((q) => (
+        <Card key={q.id} className="cursor-default">
+          <CardContent className="p-4">
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex-1 space-y-1">
+                <p className="text-sm font-medium leading-relaxed">「{q.text}」</p>
+                <p className="text-xs text-muted-foreground">{q.translation}</p>
+                <div className="flex items-center gap-2 pt-1">
+                  <RankBadge rank={q.rank} />
+                  <span className="text-xs text-muted-foreground">{q.score}分</span>
+                  <Badge variant="outline" className="text-xs">{q.category}</Badge>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="shrink-0 text-xs"
+                onClick={() => onTry(q.text)}
+              >
+                {t('classics.tryIt')}
+                <ChevronRight className="ml-1 h-3 w-3" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+// ── History Tab ───────────────────────────────────────────────────────────────
+
+function HistoryTab({ onRetry }: { onRetry: (text: string) => void }) {
+  const t = useTranslations('humbleBragLab')
+  const [records, setRecords] = useState<AnalysisRecord[]>([])
+  const [loaded, setLoaded] = useState(false)
+
+  const load = useCallback(async () => {
+    const data = await apiFetchRecords()
+    setRecords(data)
+    setLoaded(true)
+  }, [])
+
+  useState(() => { load() })
+
+  if (loaded && records.length === 0) {
+    return <p className="py-8 text-center text-sm text-muted-foreground">{t('history.empty')}</p>
+  }
+
+  return (
+    <div className="space-y-2">
+      {records.map((r) => (
+        <Card key={r.id}>
+          <CardContent className="flex items-start gap-3 p-3">
+            <div className="flex-1 space-y-1">
+              <p className="line-clamp-2 text-sm">{r.inputText}</p>
+              <div className="flex items-center gap-2">
+                <RankBadge rank={r.rank} />
+                <span className="text-xs text-muted-foreground">{r.score}分</span>
+              </div>
+            </div>
+            <Button variant="ghost" size="icon" onClick={() => onRetry(r.inputText)}>
+              <RotateCcw className="h-4 w-4" />
+            </Button>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+// ── Collections Tab ───────────────────────────────────────────────────────────
+
+function CollectionsTab({ refreshKey }: { refreshKey: number }) {
+  const t = useTranslations('humbleBragLab')
+  const [items, setItems] = useState<CollectionItem[]>([])
+
+  const load = useCallback(async () => {
+    const data = await apiFetchCollections()
+    setItems(data)
+  }, [])
+
+  // Re-load when refreshKey changes
+  useState(() => { load() })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const loadRef = load
+  useState(() => { loadRef() })
+
+  const handleRemove = useCallback(async (id: string) => {
+    await apiRemoveCollection(id)
+    setItems((prev) => prev.filter((i) => i.id !== id))
+    toast.success('已取消收藏')
+  }, [])
+
+  if (items.length === 0) {
+    return <p className="py-8 text-center text-sm text-muted-foreground">{t('collections.empty')}</p>
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.map((item) => (
+        <Card key={item.id}>
+          <CardContent className="flex items-start gap-3 p-3">
+            <div className="flex-1 space-y-1">
+              <p className="line-clamp-2 text-sm font-medium">「{item.text}」</p>
+              <p className="text-xs text-muted-foreground">{item.translation}</p>
+              <div className="flex items-center gap-2">
+                <RankBadge rank={item.rank} />
+                <span className="text-xs text-muted-foreground">{item.score}分</span>
+              </div>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="shrink-0 text-xs text-muted-foreground hover:text-destructive"
+              onClick={() => handleRemove(item.id)}
+            >
+              {t('collections.remove')}
+            </Button>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+// ── Main Page ─────────────────────────────────────────────────────────────────
+
+export default function HumbleBragLabPage() {
+  const t = useTranslations('humbleBragLab')
+  const [inputText, setInputText] = useState('')
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+  const [result, setResult] = useState<AnalysisResult | null>(null)
+  const [collectRefresh, setCollectRefresh] = useState(0)
+  const [activeTab, setActiveTab] = useState('analyzer')
+
+  const handleAnalyze = useCallback(async () => {
+    const text = inputText.trim()
+    if (!text) return
+    setIsAnalyzing(true)
+    setResult(null)
+    try {
+      const data = await apiAnalyze(text)
+      setResult(data)
+    } catch {
+      toast.error('分析失败，请稍后重试')
+    } finally {
+      setIsAnalyzing(false)
+    }
+  }, [inputText])
+
+  const handleTryClassic = useCallback((text: string) => {
+    setInputText(text)
+    setResult(null)
+    setActiveTab('analyzer')
+  }, [])
+
+  const handleClear = useCallback(() => {
+    setInputText('')
+    setResult(null)
+  }, [])
+
+  const handleCollect = useCallback(() => {
+    setCollectRefresh((n) => n + 1)
+  }, [])
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6 py-6">
+      {/* Header */}
+      <div className="text-center">
+        <h1 className="flex items-center justify-center gap-2 text-2xl font-bold tracking-tight">
+          <Sparkles className="h-6 w-6 text-amber-500" />
+          {t('analyzer.title')}
+        </h1>
+        <p className="mt-1 text-sm text-muted-foreground">{t('analyzer.subtitle')}</p>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="analyzer">{t('tabs.analyzer')}</TabsTrigger>
+          <TabsTrigger value="classics">{t('tabs.classics')}</TabsTrigger>
+          <TabsTrigger value="history">{t('tabs.history')}</TabsTrigger>
+          <TabsTrigger value="collections">{t('tabs.collections')}</TabsTrigger>
+        </TabsList>
+
+        {/* Analyzer Tab */}
+        <TabsContent value="analyzer" className="space-y-4">
+          <Card>
+            <CardContent className="pt-4">
+              <Textarea
+                value={inputText}
+                onChange={(e) => { setInputText(e.target.value); setResult(null) }}
+                placeholder={t('analyzer.placeholder')}
+                className="min-h-[120px] resize-none text-base"
+                maxLength={2000}
+              />
+              <div className="mt-2 flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">
+                  {t('analyzer.charCount', { count: inputText.length })}
+                </span>
+                <div className="flex gap-2">
+                  {inputText && (
+                    <Button variant="ghost" size="sm" onClick={handleClear}>
+                      {t('analyzer.clear')}
+                    </Button>
+                  )}
+                  <Button
+                    onClick={handleAnalyze}
+                    disabled={!inputText.trim() || isAnalyzing}
+                    size="sm"
+                  >
+                    <Sparkles className="mr-1.5 h-4 w-4" />
+                    {isAnalyzing ? t('analyzer.analyzing') : t('analyzer.analyze')}
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {result && (
+            <ResultPanel
+              result={result}
+              inputText={inputText}
+              onCollect={handleCollect}
+            />
+          )}
+        </TabsContent>
+
+        {/* Classics Tab */}
+        <TabsContent value="classics">
+          <ClassicsTab onTry={handleTryClassic} />
+        </TabsContent>
+
+        {/* History Tab */}
+        <TabsContent value="history">
+          <HistoryTab onRetry={handleTryClassic} />
+        </TabsContent>
+
+        {/* Collections Tab */}
+        <TabsContent value="collections">
+          <CollectionsTab refreshKey={collectRefresh} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}