@octo-cyber/kinship-calc 0.5.2

package/web/messages/zh-CN.json

@@ -0,0 +1,108 @@
+{
+  "nav": {
+    "kinshipCalc": {
+      "title": "辈分计算",
+      "description": "亲属关系与称呼计算",
+      "pages": {
+        "calc": "称呼计算器",
+        "familyTree": "家谱管理"
+      }
+    }
+  },
+  "kinshipCalc": {
+    "title": "辈分计算器",
+    "description": "亲属关系与称呼计算",
+    "pages": {
+      "calc": "称呼计算器",
+      "familyTree": "家谱管理"
+    }
+  },
+  "kinship": {
+    "calc": {
+      "title": "亲属称呼计算器",
+      "subtitle": "输入关系链，自动计算正确称呼"
+    },
+    "settings": {
+      "title": "计算设置",
+      "egoGender": "我的性别",
+      "region": "方言地区"
+    },
+    "chain": {
+      "title": "关系链",
+      "hint": "依次点击关系按钮，构建从「我」到「对方」的关系链",
+      "empty": "暂未选择关系，请点击下方按钮",
+      "undo": "撤销",
+      "clear": "清空"
+    },
+    "calculate": "计算称呼",
+    "calculating": "计算中…",
+    "selectRegion": "选择方言",
+    "regions": {
+      "standard": "普通话（标准）",
+      "northern": "北方方言",
+      "southern": "南方官话",
+      "cantonese": "粤语",
+      "minnan": "闽南语",
+      "wu": "吴语"
+    },
+    "gender": {
+      "male": "男",
+      "female": "女",
+      "unknown": "未知"
+    },
+    "generation": {
+      "elder": "长 {n} 辈",
+      "younger": "小 {n} 辈",
+      "same": "同辈"
+    },
+    "result": {
+      "title": "称呼结果",
+      "standard": "标准称呼",
+      "reverseTitle": "对方叫我",
+      "variants": "各地叫法",
+      "exact": "精确匹配",
+      "estimated": "估算结果"
+    },
+    "examples": {
+      "title": "常用示例"
+    },
+    "tree": {
+      "title": "家谱管理",
+      "subtitle": "可视化家谱，点击两人计算称呼关系",
+      "new": "新建家谱",
+      "select": "选择家谱",
+      "newTitle": "新建家谱",
+      "nameLabel": "家谱名称",
+      "namePlaceholder": "例如：张家族谱",
+      "addPerson": "添加成员",
+      "addRelation": "添加关系",
+      "addPersonTitle": "添加家族成员",
+      "addRelationTitle": "添加亲属关系",
+      "relations": "已建立的关系",
+      "emptyHint": "暂无成员，请点击「添加成员」",
+      "selectSecondPerson": "已选中一人，请点击另一人以计算称呼关系",
+      "deleteConfirm": "确定删除此家谱？此操作不可撤销。",
+      "deleted": "家谱已删除"
+    },
+    "person": {
+      "name": "姓名",
+      "gender": "性别",
+      "birthYear": "出生年份",
+      "isRoot": "设为「我」（参照人）"
+    },
+    "relation": {
+      "from": "从（谁）",
+      "to": "到（谁）",
+      "type": "关系类型",
+      "selectPerson": "选择成员"
+    },
+    "common": {
+      "save": "保存",
+      "cancel": "取消"
+    },
+    "error": {
+      "calculateFailed": "计算失败，请检查关系链",
+      "loadFailed": "加载失败，请刷新重试"
+    }
+  }
+}

package/web/pages/FamilyTreePage.tsx

@@ -0,0 +1,240 @@
+'use client'
+
+import { useState, useEffect, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@octo-cyber/ui/components/ui/select'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { TreePine, Plus, Trash2 } from 'lucide-react'
+import { kinshipService } from '../services/kinship-service'
+import { FamilyTreeCanvas } from '../components/FamilyTreeCanvas'
+import { KinshipResultCard } from '../components/KinshipResultCard'
+import { RegionSelector } from '../components/RegionSelector'
+import { NewTreeDialog, AddPersonDialog, EditPersonDialog, AddRelationDialog } from '../components/FamilyTreeDialogs'
+import type { FamilyTree, FamilyTreeGraph, FamilyTreeRelation, KinshipResult, Region } from '../types/kinship'
+import { ATOM_LABELS } from '../types/kinship'
+
+export default function FamilyTreePage() {
+  const t = useTranslations('kinship')
+  const [trees, setTrees] = useState<FamilyTree[]>([])
+  const [selectedTreeId, setSelectedTreeId] = useState<number | null>(null)
+  const [graph, setGraph] = useState<FamilyTreeGraph | null>(null)
+  const [selectedPersonId, setSelectedPersonId] = useState<number | null>(null)
+  const [resolveResult, setResolveResult] = useState<KinshipResult | null>(null)
+  const [region, setRegion] = useState<Region>('standard')
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [showNewTree, setShowNewTree] = useState(false)
+  const [showAddPerson, setShowAddPerson] = useState(false)
+  const [showAddRelation, setShowAddRelation] = useState(false)
+  const [editPersonId, setEditPersonId] = useState<number | null>(null)
+
+  const loadGraph = useCallback(async (id: number) => {
+    setIsLoading(true)
+    try {
+      const g = await kinshipService.getTree(id)
+      setGraph(g)
+    } catch {
+      toast.error(t('error.loadFailed'))
+    } finally {
+      setIsLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    kinshipService.listTrees()
+      .then((list) => { setTrees(list); if (list.length > 0) setSelectedTreeId(list[0].id) })
+      .catch(() => toast.error(t('error.loadFailed')))
+  }, [t])
+
+  useEffect(() => {
+    if (selectedTreeId) loadGraph(selectedTreeId)
+    else setGraph(null)
+  }, [selectedTreeId, loadGraph])
+
+  async function handleResolveKinship(fromId: number, toId: number) {
+    if (!selectedTreeId) return
+    try {
+      const res = await kinshipService.resolveKinship({ treeId: selectedTreeId, fromPersonId: fromId, toPersonId: toId, region })
+      setResolveResult(res.result)
+      toast.success(`已找到关系：${res.path}`)
+    } catch (err) {
+      toast.error((err as Error).message)
+    }
+  }
+
+  async function handleDeleteTree() {
+    if (!selectedTreeId || !confirm(t('tree.deleteConfirm'))) return
+    try {
+      await kinshipService.deleteTree(selectedTreeId)
+      toast.success(t('tree.deleted'))
+      const list = await kinshipService.listTrees()
+      setTrees(list)
+      setSelectedTreeId(list[0]?.id ?? null)
+      setGraph(null)
+      setResolveResult(null)
+    } catch (err) {
+      toast.error((err as Error).message)
+    }
+  }
+
+  async function handleDeleteRelation(rel: FamilyTreeRelation) {
+    if (!selectedTreeId) return
+    try {
+      await kinshipService.deleteRelation(rel.id, selectedTreeId)
+      toast.success('已删除关系')
+      loadGraph(selectedTreeId)
+    } catch (err) {
+      toast.error((err as Error).message)
+    }
+  }
+
+  const editPerson = graph?.persons.find((p) => p.id === editPersonId) ?? null
+
+  return (
+    <div className="mx-auto max-w-5xl space-y-6 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 dark:bg-primary/20">
+            <TreePine className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold">{t('tree.title')}</h1>
+            <p className="text-sm text-muted-foreground">{t('tree.subtitle')}</p>
+          </div>
+        </div>
+        <Button size="sm" onClick={() => setShowNewTree(true)} className="gap-1">
+          <Plus className="h-4 w-4" />{t('tree.new')}
+        </Button>
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex flex-wrap items-center gap-3">
+        <Select
+          value={selectedTreeId?.toString() ?? ''}
+          onValueChange={(v) => { setSelectedTreeId(Number(v)); setResolveResult(null) }}
+        >
+          <SelectTrigger className="w-48">
+            <SelectValue placeholder={t('tree.select')} />
+          </SelectTrigger>
+          <SelectContent>
+            {trees.map((tree) => (
+              <SelectItem key={tree.id} value={tree.id.toString()}>{tree.name}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <RegionSelector value={region} onChange={setRegion} className="w-40" />
+
+        {selectedTreeId && (
+          <>
+            <Button size="sm" variant="outline" onClick={() => setShowAddPerson(true)} className="gap-1">
+              <Plus className="h-3.5 w-3.5" />{t('tree.addPerson')}
+            </Button>
+            <Button size="sm" variant="outline" onClick={() => setShowAddRelation(true)} className="gap-1">
+              <Plus className="h-3.5 w-3.5" />{t('tree.addRelation')}
+            </Button>
+            <Button size="sm" variant="ghost" className="ml-auto text-destructive hover:text-destructive" onClick={handleDeleteTree}>
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </>
+        )}
+      </div>
+
+      {/* Loading */}
+      {isLoading && (
+        <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">加载中…</div>
+      )}
+
+      {/* Tree card */}
+      {!isLoading && graph && (
+        <Card className="dark:bg-zinc-900">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">{graph.tree.name}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <FamilyTreeCanvas
+              graph={graph}
+              selectedPersonId={selectedPersonId}
+              onSelectPerson={setSelectedPersonId}
+              onResolveKinship={handleResolveKinship}
+              onEditPerson={(id) => setEditPersonId(id)}
+              onDeletePerson={async (id) => {
+                if (!selectedTreeId || !confirm('确定删除该成员？')) return
+                try {
+                  await kinshipService.deletePerson(id, selectedTreeId)
+                  toast.success('已删除成员')
+                  loadGraph(selectedTreeId)
+                } catch (err) { toast.error((err as Error).message) }
+              }}
+            />
+
+            {/* Relations with inline delete */}
+            {graph.relations.length > 0 && (
+              <div className="space-y-1.5">
+                <p className="text-xs font-medium text-muted-foreground">{t('tree.relations')}</p>
+                <div className="flex flex-wrap gap-1.5">
+                  {graph.relations.map((rel) => {
+                    const from = graph.persons.find((p) => p.id === rel.fromPersonId)
+                    const to = graph.persons.find((p) => p.id === rel.toPersonId)
+                    const label = ATOM_LABELS[rel.relationType as keyof typeof ATOM_LABELS] ?? rel.relationType
+                    return (
+                      <Badge key={rel.id} variant="secondary" className="group cursor-default gap-1 pr-1 text-xs">
+                        {from?.name} ↔ {label} → {to?.name}
+                        <button
+                          onClick={() => handleDeleteRelation(rel)}
+                          className="ml-0.5 rounded opacity-0 group-hover:opacity-100 hover:text-destructive"
+                          title="删除关系"
+                        >×</button>
+                      </Badge>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {resolveResult && <KinshipResultCard result={resolveResult} currentRegion={region} />}
+
+      {/* Dialogs */}
+      <NewTreeDialog
+        open={showNewTree}
+        onClose={() => setShowNewTree(false)}
+        onCreated={(tree) => { setTrees((prev) => [...prev, tree]); setSelectedTreeId(tree.id); setShowNewTree(false) }}
+      />
+
+      {graph && (
+        <AddPersonDialog
+          open={showAddPerson}
+          treeId={graph.tree.id}
+          onClose={() => setShowAddPerson(false)}
+          onAdded={() => { loadGraph(graph.tree.id); setShowAddPerson(false) }}
+        />
+      )}
+
+      {graph && (
+        <AddRelationDialog
+          open={showAddRelation}
+          graph={graph}
+          onClose={() => setShowAddRelation(false)}
+          onAdded={() => { loadGraph(graph.tree.id); setShowAddRelation(false) }}
+        />
+      )}
+
+      {editPerson && graph && (
+        <EditPersonDialog
+          open={editPersonId !== null}
+          person={editPerson}
+          treeId={graph.tree.id}
+          onClose={() => setEditPersonId(null)}
+          onSaved={() => { loadGraph(graph.tree.id); setEditPersonId(null) }}
+        />
+      )}
+    </div>
+  )
+}

package/web/pages/KinshipCalcPage.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@octo-cyber/ui/components/ui/card'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@octo-cyber/ui/components/ui/select'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import { Users } from 'lucide-react'
+import { useKinshipStore } from '../stores/kinship-store'
+import { RelationChainBuilder } from '../components/RelationChainBuilder'
+import { KinshipResultCard } from '../components/KinshipResultCard'
+import { RegionSelector } from '../components/RegionSelector'
+import type { Region } from '../types/kinship'
+
+export default function KinshipCalcPage() {
+  const t = useTranslations('kinship')
+  const {
+    result, error, region, egoGender,
+    setRegion, setEgoGender, calculate,
+  } = useKinshipStore()
+
+  const handleCalculate = async () => {
+    try {
+      await calculate()
+    } catch {
+      toast.error(t('error.calculateFailed'))
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-6 p-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 dark:bg-primary/20">
+          <Users className="h-5 w-5 text-primary" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold">{t('calc.title')}</h1>
+          <p className="text-sm text-muted-foreground">{t('calc.subtitle')}</p>
+        </div>
+      </div>
+
+      {/* Settings */}
+      <Card className="dark:bg-zinc-900">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base">{t('settings.title')}</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-4">
+          <div className="flex items-center gap-2">
+            <Label className="shrink-0 text-sm">{t('settings.egoGender')}</Label>
+            <Select value={egoGender} onValueChange={(v) => setEgoGender(v as 'male' | 'female')}>
+              <SelectTrigger className="w-24">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="male">{t('gender.male')}</SelectItem>
+                <SelectItem value="female">{t('gender.female')}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2">
+            <Label className="shrink-0 text-sm">{t('settings.region')}</Label>
+            <RegionSelector
+              value={region}
+              onChange={setRegion}
+              className="w-48"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Chain builder */}
+      <Card className="dark:bg-zinc-900">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base">{t('chain.title')}</CardTitle>
+          <CardDescription>{t('chain.hint')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RelationChainBuilder onCalculate={handleCalculate} />
+        </CardContent>
+      </Card>
+
+      {/* Error */}
+      {error && (
+        <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive dark:bg-destructive/20">
+          {error}
+        </div>
+      )}
+
+      {/* Result */}
+      {result && (
+        <KinshipResultCard result={result} currentRegion={region} />
+      )}
+
+      {/* Quick examples */}
+      {!result && (
+        <QuickExamples onSelect={(chain) => {
+          useKinshipStore.setState({ chain })
+        }} />
+      )}
+    </div>
+  )
+}
+
+const QUICK_EXAMPLES = [
+  { label: '爷爷（父父）', chain: ['F', 'F'] },
+  { label: '外公（母父）', chain: ['M', 'F'] },
+  { label: '伯父（父哥哥）', chain: ['F', 'B+'] },
+  { label: '叔叔（父弟弟）', chain: ['F', 'B-'] },
+  { label: '舅舅（母兄弟）', chain: ['M', 'B-'] },
+  { label: '姑姑（父妹妹）', chain: ['F', 'Z-'] },
+  { label: '阿姨（母妹妹）', chain: ['M', 'Z-'] },
+  { label: '堂哥（伯父之子）', chain: ['F', 'B+', 'S'] },
+  { label: '表姐（舅父之女）', chain: ['M', 'B+', 'D'] },
+  { label: '岳父（妻父）',  chain: ['W', 'F'] },
+]
+
+function QuickExamples({ onSelect }: { onSelect: (chain: string[]) => void }) {
+  const t = useTranslations('kinship')
+  return (
+    <Card className="dark:bg-zinc-900">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base">{t('examples.title')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-wrap gap-2">
+          {QUICK_EXAMPLES.map((ex) => (
+            <button
+              key={ex.label}
+              onClick={() => onSelect(ex.chain)}
+              className="rounded-full border px-3 py-1 text-sm transition-colors hover:bg-accent dark:border-zinc-700 dark:hover:bg-zinc-700"
+            >
+              {ex.label}
+            </button>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/web/services/kinship-service.ts

@@ -0,0 +1,140 @@
+import type {
+  KinshipResult,
+  RelationAtom,
+  FamilyTree,
+  FamilyTreeGraph,
+  FamilyTreePerson,
+  FamilyTreeRelation,
+  ResolveResult,
+  Region,
+  EgoGender,
+} from '../types/kinship'
+
+const BASE = '/api/v1/kinship'
+
+async function request<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(url, {
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    ...init,
+  })
+  const body = await res.json()
+  if (!res.ok) throw new Error(body?.message ?? body?.error ?? '请求失败')
+  return body.data as T
+}
+
+export const kinshipService = {
+  calculate(path: string, region: Region = 'standard', egoGender: EgoGender = 'male'): Promise<KinshipResult> {
+    return request<KinshipResult>(`${BASE}/calculate`, {
+      method: 'POST',
+      body: JSON.stringify({ path, region, egoGender }),
+    })
+  },
+
+  calculateFromChain(chain: string[], region: Region = 'standard', egoGender: EgoGender = 'male'): Promise<KinshipResult> {
+    return request<KinshipResult>(`${BASE}/chain`, {
+      method: 'POST',
+      body: JSON.stringify({ chain, region, egoGender }),
+    })
+  },
+
+  checkConflict(paths: string[]): Promise<{ conflict: boolean; message: string | null }> {
+    return request(`${BASE}/conflict-check`, {
+      method: 'POST',
+      body: JSON.stringify({ paths }),
+    })
+  },
+
+  getAtoms(): Promise<RelationAtom[]> {
+    return request<RelationAtom[]>(`${BASE}/atoms`)
+  },
+
+  listTitles(region: Region = 'standard'): Promise<Array<{ path: string; title: string; generationDelta: number }>> {
+    return request(`${BASE}/titles?region=${region}`)
+  },
+
+  // ── Family tree ──────────────────────────────────────────────
+
+  listTrees(): Promise<FamilyTree[]> {
+    return request<FamilyTree[]>(`${BASE}/trees`)
+  },
+
+  getTree(id: number): Promise<FamilyTreeGraph> {
+    return request<FamilyTreeGraph>(`${BASE}/trees/${id}`)
+  },
+
+  createTree(data: { name: string; description?: string }): Promise<FamilyTree> {
+    return request<FamilyTree>(`${BASE}/trees`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    })
+  },
+
+  updateTree(id: number, data: { name?: string; description?: string }): Promise<FamilyTree> {
+    return request<FamilyTree>(`${BASE}/trees/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    })
+  },
+
+  deleteTree(id: number): Promise<void> {
+    return request(`${BASE}/trees/${id}`, { method: 'DELETE' })
+  },
+
+  addPerson(data: {
+    treeId: number
+    name: string
+    gender: 'male' | 'female'
+    birthYear?: number
+    notes?: string
+    isRoot?: boolean
+  }): Promise<FamilyTreePerson> {
+    return request<FamilyTreePerson>(`${BASE}/persons`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    })
+  },
+
+  updatePerson(
+    id: number,
+    treeId: number,
+    data: { name?: string; gender?: 'male' | 'female'; birthYear?: number | null; notes?: string | null; isRoot?: boolean },
+  ): Promise<FamilyTreePerson> {
+    return request<FamilyTreePerson>(`${BASE}/persons/${id}?treeId=${treeId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    })
+  },
+
+  deletePerson(id: number, treeId: number): Promise<void> {
+    return request(`${BASE}/persons/${id}?treeId=${treeId}`, { method: 'DELETE' })
+  },
+
+  addRelation(data: {
+    treeId: number
+    fromPersonId: number
+    toPersonId: number
+    relationType: string
+  }): Promise<FamilyTreeRelation> {
+    return request<FamilyTreeRelation>(`${BASE}/relations`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    })
+  },
+
+  deleteRelation(id: number, treeId: number): Promise<void> {
+    return request(`${BASE}/relations/${id}?treeId=${treeId}`, { method: 'DELETE' })
+  },
+
+  resolveKinship(data: {
+    treeId: number
+    fromPersonId: number
+    toPersonId: number
+    region?: Region
+  }): Promise<ResolveResult> {
+    return request<ResolveResult>(`${BASE}/resolve`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    })
+  },
+}