@fatdoge/wtree 0.1.0

package/src/pages/CreateWorktree.tsx

@@ -0,0 +1,181 @@
+import { ArrowLeft, CheckCircle2, Loader2 } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import { useToastStore } from '@/stores/toastStore'
+import { useWorktreeStore } from '@/stores/worktreeStore'
+import type { CreateWorktreeRequest } from '../../shared/wtui-types'
+
+type Mode = 'existing' | 'new'
+
+export default function CreateWorktree() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const create = useWorktreeStore((s) => s.create)
+  const branches = useWorktreeStore((s) => s.branches)
+  const fetchBranches = useWorktreeStore((s) => s.fetchBranches)
+  const toast = useToastStore((s) => s.push)
+
+  useEffect(() => {
+    fetchBranches()
+  }, [fetchBranches])
+
+  const [mode, setMode] = useState<Mode>('existing')
+  const [ref, setRef] = useState('')
+  const [newBranch, setNewBranch] = useState('')
+  const [p, setP] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [resultPath, setResultPath] = useState<string | null>(null)
+
+  const preview = useMemo(() => {
+    const target = p.trim() ? p.trim() : '<path>'
+    if (mode === 'new' && newBranch.trim()) {
+      return `git branch ${newBranch.trim()} ${ref.trim() || '<ref>'} && git worktree add ${target} ${newBranch.trim()}`
+    }
+    return `git worktree add ${target} ${ref.trim() || '<ref>'}`
+  }, [mode, newBranch, p, ref])
+
+  const canSubmit = ref.trim().length > 0 && p.trim().length > 0 && (!mode || mode === 'existing' || newBranch.trim().length > 0)
+
+  const onSubmit = async () => {
+    if (!canSubmit) return
+    setSubmitting(true)
+    setResultPath(null)
+    try {
+      const payload: CreateWorktreeRequest = {
+        ref: ref.trim(),
+        path: p.trim(),
+        ...(mode === 'new' ? { newBranch: newBranch.trim() } : {}),
+      }
+      const created = await create(payload)
+      if (!created) {
+        toast({ type: 'error', title: '创建失败' })
+        return
+      }
+      setResultPath(created.path)
+      toast({ type: 'success', title: '创建成功' })
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e)
+      toast({ type: 'error', title: '创建失败', detail: msg })
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 py-6">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <Link to="/">
+            <Button variant="ghost" size="sm">
+              <ArrowLeft className="h-4 w-4" />
+              {t('create.back')}
+            </Button>
+          </Link>
+          <div className="text-lg font-semibold text-slate-900 dark:text-slate-100">{t('create.title')}</div>
+        </div>
+        <Button variant="secondary" size="sm" onClick={() => navigate('/help')}>{t('create.help')}</Button>
+      </div>
+
+      <div className="mt-5 grid grid-cols-12 gap-4">
+        <div className="col-span-12 lg:col-span-7">
+          <div className="rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 p-4">
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                variant={mode === 'existing' ? 'primary' : 'secondary'}
+                onClick={() => setMode('existing')}
+              >
+                {t('create.tabs.existing')}
+              </Button>
+              <Button size="sm" variant={mode === 'new' ? 'primary' : 'secondary'} onClick={() => setMode('new')}>
+                {t('create.tabs.new')}
+              </Button>
+            </div>
+
+            <div className="mt-4 grid grid-cols-12 gap-3">
+              <div className="col-span-12">
+                <div className="text-xs font-medium text-slate-600 dark:text-slate-300">{t('create.fields.ref')}</div>
+                <div className="mt-1">
+                  <Input
+                    value={ref}
+                    onChange={(e) => setRef(e.target.value)}
+                    placeholder={t('create.fields.refPlaceholder')}
+                    list="branch-list"
+                  />
+                  <datalist id="branch-list">
+                    {branches.map((b) => (
+                      <option key={b} value={b} />
+                    ))}
+                  </datalist>
+                </div>
+              </div>
+
+              {mode === 'new' ? (
+                <div className="col-span-12">
+                  <div className="text-xs font-medium text-slate-600 dark:text-slate-300">{t('create.fields.newBranch')}</div>
+                  <div className="mt-1">
+                    <Input value={newBranch} onChange={(e) => setNewBranch(e.target.value)} placeholder={t('create.fields.newBranchPlaceholder')} />
+                  </div>
+                </div>
+              ) : null}
+
+              <div className="col-span-12">
+                <div className="text-xs font-medium text-slate-600 dark:text-slate-300">{t('create.fields.path')}</div>
+                <div className="mt-1">
+                  <Input value={p} onChange={(e) => setP(e.target.value)} placeholder={t('create.fields.pathPlaceholder')} />
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-4 flex flex-col sm:flex-row items-center justify-end gap-2">
+              <Button className="w-full sm:w-auto" variant="primary" size="sm" disabled={!canSubmit || submitting} onClick={onSubmit}>
+                {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+                {t('create.submit')}
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-span-12 lg:col-span-5">
+          <div className="rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 p-4">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('create.preview.title')}</div>
+            <div className="mt-2 rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2 font-mono text-xs text-slate-900 dark:text-slate-100">
+              {preview}
+            </div>
+            <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">{t('create.preview.desc')}</div>
+          </div>
+
+          <div className="mt-3 rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 p-4">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('create.result.title')}</div>
+            {submitting ? (
+              <div className="mt-2 flex items-center gap-2 text-xs text-slate-600 dark:text-slate-300">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                {t('create.result.creating')}
+              </div>
+            ) : resultPath ? (
+              <div className="mt-2">
+                <div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400">
+                  <CheckCircle2 className="h-4 w-4" />
+                  {t('create.result.success')}
+                </div>
+                <div className="mt-2 rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2 font-mono text-xs text-slate-900 dark:text-slate-100">
+                  {resultPath}
+                </div>
+                <div className="mt-3">
+                  <Link to="/">
+                    <Button variant="secondary" size="sm">{t('create.result.backToList')}</Button>
+                  </Link>
+                </div>
+              </div>
+            ) : (
+              <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">{t('create.result.empty')}</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/HelpPage.tsx

@@ -0,0 +1,67 @@
+import { ArrowLeft } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import Button from '@/components/Button'
+
+export default function HelpPage() {
+  const { t } = useTranslation()
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 py-6">
+      <div className="flex items-center gap-2">
+        <Link to="/">
+          <Button variant="ghost" size="sm">
+            <ArrowLeft className="h-4 w-4" />
+            {t('create.back')}
+          </Button>
+        </Link>
+        <div className="text-lg font-semibold text-slate-900 dark:text-slate-100">{t('helpPage.title')}</div>
+      </div>
+
+      <div className="mt-5 grid grid-cols-12 gap-4">
+        <div className="col-span-12 lg:col-span-7">
+          <div className="rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 p-4">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('helpPage.commands')}</div>
+            <div className="mt-3 space-y-2 font-mono text-xs text-slate-700 dark:text-slate-200">
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree list</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree create &lt;branch&gt;</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree delete</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree open &lt;path|branch&gt;</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree lock &lt;path|branch&gt;</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree unlock &lt;path|branch&gt;</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree prune</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree config</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree config get &lt;key&gt;</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree config set &lt;key&gt; &lt;value&gt;</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree --ui</div>
+              <div className="rounded-md border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900 px-3 py-2">wtree --ui --no-open --port 5173</div>
+            </div>
+              <div className="mt-3 text-xs text-slate-500 dark:text-slate-400">
+              {t('helpPage.commandsDesc')}
+            </div>
+          </div>
+        </div>
+
+        <div className="col-span-12 lg:col-span-5">
+          <div className="rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 p-4">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('helpPage.faq.title')}</div>
+            <div className="mt-2 space-y-2 text-xs text-slate-500 dark:text-slate-400">
+              <div>
+                <div className="text-slate-700 dark:text-slate-200">{t('helpPage.faq.q1')}</div>
+                <div className="mt-1">{t('helpPage.faq.a1')}</div>
+              </div>
+              <div>
+                <div className="text-slate-700 dark:text-slate-200">{t('helpPage.faq.q2')}</div>
+                <div className="mt-1">{t('helpPage.faq.a2')}</div>
+              </div>
+              <div>
+                <div className="text-slate-700 dark:text-slate-200">{t('helpPage.faq.q3')}</div>
+                <div className="mt-1">{t('helpPage.faq.a3')}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/Home.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div></div>;
+}

package/src/pages/SettingsPage.tsx

@@ -0,0 +1,218 @@
+import { ArrowLeft, Save, RotateCcw, Eraser, Moon, Sun, Laptop, Languages } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import { useToastStore } from '@/stores/toastStore'
+import { useWorktreeStore } from '@/stores/worktreeStore'
+import { useThemeStore } from '@/stores/themeStore'
+import { apiGet, apiPut } from '@/utils/api'
+import type { WtuiConfig } from '../../shared/wtui-types'
+
+export default function SettingsPage() {
+  const { t, i18n } = useTranslation()
+  const toast = useToastStore((s) => s.push)
+  const prune = useWorktreeStore((s) => s.prune)
+  const { theme, setTheme } = useThemeStore()
+  const [cfg, setCfg] = useState<WtuiConfig>({})
+  const [loading, setLoading] = useState(false)
+  const [pruning, setPruning] = useState(false)
+
+  useEffect(() => {
+    setLoading(true)
+    apiGet<WtuiConfig>('/api/config')
+      .then((r) => {
+        if (r.ok) setCfg(r.data)
+      })
+      .finally(() => setLoading(false))
+  }, [])
+
+  const onSave = async () => {
+    setLoading(true)
+    try {
+      const r = await apiPut<WtuiConfig, WtuiConfig>('/api/config', cfg)
+      if (!r.ok) {
+        const msg = (r as { ok: false; error: { message: string } }).error.message
+        toast({ type: 'error', title: t('settings.toast.saveFailed'), detail: msg })
+        return
+      }
+      setCfg(r.data)
+      toast({ type: 'success', title: t('settings.toast.saveSuccess') })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const onReset = async () => {
+    setCfg({})
+    setLoading(true)
+    try {
+      const r = await apiPut<WtuiConfig, WtuiConfig>('/api/config', {})
+      if (!r.ok) {
+        const msg = (r as { ok: false; error: { message: string } }).error.message
+        toast({ type: 'error', title: t('settings.toast.resetFailed', '重置失败'), detail: msg })
+        return
+      }
+      setCfg(r.data)
+      toast({ type: 'info', title: t('settings.toast.resetSuccess', '已重置') })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const onPrune = async () => {
+    setPruning(true)
+    try {
+      const ok = await prune()
+      toast({ type: ok ? 'success' : 'error', title: ok ? t('settings.toast.pruneSuccess') : t('settings.toast.pruneFailed') })
+    } finally {
+      setPruning(false)
+    }
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 py-6">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <Link to="/">
+            <Button variant="ghost" size="sm">
+              <ArrowLeft className="h-4 w-4" />
+              {t('create.back')}
+            </Button>
+          </Link>
+          <div className="text-lg font-semibold text-slate-900 dark:text-slate-100">{t('settings.title')}</div>
+        </div>
+        <div className="flex flex-col sm:flex-row items-center sm:justify-end gap-2">
+          <Button className="w-full sm:w-auto" variant="secondary" size="sm" onClick={onReset} disabled={loading}>
+            <RotateCcw className="h-4 w-4" />
+            {t('settings.cli.reset')}
+          </Button>
+          <Button className="w-full sm:w-auto" variant="primary" size="sm" onClick={onSave} disabled={loading}>
+            <Save className="h-4 w-4" />
+            {t('settings.cli.save')}
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-5 grid grid-cols-12 gap-4">
+        <div className="col-span-12 lg:col-span-7">
+          <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('settings.preferences.title')}</div>
+            <div className="mt-4 grid grid-cols-12 gap-4">
+              <div className="col-span-12 lg:col-span-6">
+                <div className="text-xs font-medium text-slate-600 dark:text-slate-300">{t('settings.preferences.theme')}</div>
+                <div className="mt-2 flex gap-2">
+                  <Button
+                    size="sm"
+                    variant={theme === 'light' ? 'primary' : 'secondary'}
+                    onClick={() => setTheme('light')}
+                  >
+                    <Sun className="h-4 w-4" />
+                    {t('settings.preferences.light')}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant={theme === 'dark' ? 'primary' : 'secondary'}
+                    onClick={() => setTheme('dark')}
+                  >
+                    <Moon className="h-4 w-4" />
+                    {t('settings.preferences.dark')}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant={theme === 'system' ? 'primary' : 'secondary'}
+                    onClick={() => setTheme('system')}
+                  >
+                    <Laptop className="h-4 w-4" />
+                    {t('settings.preferences.system')}
+                  </Button>
+                </div>
+              </div>
+
+              <div className="col-span-12 lg:col-span-6">
+                <div className="text-xs font-medium text-slate-600 dark:text-slate-300">{t('settings.preferences.language')}</div>
+                <div className="mt-2 flex gap-2">
+                  <Button
+                    size="sm"
+                    variant={i18n.language.startsWith('en') ? 'primary' : 'secondary'}
+                    onClick={() => i18n.changeLanguage('en')}
+                  >
+                    <Languages className="h-4 w-4" />
+                    {t('settings.preferences.en')}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant={i18n.language.startsWith('zh') ? 'primary' : 'secondary'}
+                    onClick={() => i18n.changeLanguage('zh')}
+                  >
+                    <Languages className="h-4 w-4" />
+                    {t('settings.preferences.zh')}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-4 rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('settings.cli.title')}</div>
+            <div className="mt-4 grid grid-cols-12 gap-3">
+              <div className="col-span-12">
+                <div className="text-xs font-medium text-slate-600 dark:text-slate-300">{t('settings.cli.baseDir')}</div>
+                <div className="mt-1">
+                  <Input
+                    value={cfg.baseDir || ''}
+                    onChange={(e) => setCfg((c) => ({ ...c, baseDir: e.target.value }))}
+                    placeholder={t('settings.cli.baseDirPlaceholder')}
+                  />
+                </div>
+              </div>
+              <div className="col-span-12">
+                <div className="text-xs font-medium text-slate-600 dark:text-slate-300">{t('settings.cli.openCommand')}</div>
+                <div className="mt-1">
+                  <Input
+                    value={cfg.openCommand || ''}
+                    onChange={(e) => setCfg((c) => ({ ...c, openCommand: e.target.value }))}
+                    placeholder={t('settings.cli.openCommandPlaceholder')}
+                  />
+                </div>
+              </div>
+              <div className="col-span-12">
+                <div className="text-xs font-medium text-slate-600 dark:text-slate-300">{t('settings.cli.editorCommand')}</div>
+                <div className="mt-1">
+                  <Input
+                    value={cfg.editorCommand || ''}
+                    onChange={(e) => setCfg((c) => ({ ...c, editorCommand: e.target.value }))}
+                    placeholder={t('settings.cli.editorCommandPlaceholder')}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-4 rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('settings.maintenance.title')}</div>
+            <div className="mt-3">
+              <Button className="w-full sm:w-auto" variant="secondary" size="sm" onClick={onPrune} disabled={pruning}>
+                <Eraser className="h-4 w-4" />
+                {t('settings.maintenance.prune')}
+              </Button>
+              <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+                {t('settings.maintenance.pruneDesc')}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-span-12 lg:col-span-5">
+          <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950">
+            <div className="text-sm font-semibold text-slate-900 dark:text-slate-100">{t('settings.note.title')}</div>
+            <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+              {t('settings.note.desc')}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}