@zwbigi/ink-xy 0.1.2 → 0.1.4

package/inkos/packages/studio/src/pages/LanguageSelector.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+
+export function LanguageSelector({ onSelect }: { onSelect: (lang: "zh" | "en") => void }) {
+  const [hovering, setHovering] = useState<"zh" | "en" | null>(null);
+  const [selected, setSelected] = useState<"zh" | "en" | null>(null);
+
+  const handleSelect = (lang: "zh" | "en") => {
+    setSelected(lang);
+    // Brief pause for the selection animation before transitioning
+    setTimeout(() => onSelect(lang), 400);
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col items-center justify-center px-8">
+      {/* Logo — cinematic scale */}
+      <div className="mb-16 text-center">
+        <div className="flex items-baseline justify-center gap-1.5 mb-4">
+          <span className="font-serif text-6xl italic text-primary">Ink</span>
+          <span className="text-5xl font-semibold tracking-tight text-foreground">OS</span>
+        </div>
+        <div className="text-base text-muted-foreground tracking-widest uppercase">Studio</div>
+      </div>
+
+      {/* Language cards — generous, distinct, immersive */}
+      <div className="flex gap-8 mb-16">
+        <button
+          onClick={() => handleSelect("zh")}
+          onMouseEnter={() => setHovering("zh")}
+          onMouseLeave={() => setHovering(null)}
+          className={`group w-80 border rounded-lg p-10 text-left transition-all duration-300 ${
+            selected === "zh"
+              ? "border-primary bg-primary/10 scale-[1.02]"
+              : hovering === "zh"
+                ? "border-primary/50 bg-card"
+                : "border-border bg-card/50"
+          }`}
+        >
+          <div className="font-serif text-3xl mb-4 text-foreground">中文创作</div>
+          <div className="text-base text-foreground/70 leading-relaxed mb-6">
+            玄幻 · 仙侠 · 都市 · 恐怖 · 通用
+          </div>
+          <div className="text-sm text-muted-foreground">
+            番茄小说 · 起点中文网 · 飞卢
+          </div>
+        </button>
+
+        <button
+          onClick={() => handleSelect("en")}
+          onMouseEnter={() => setHovering("en")}
+          onMouseLeave={() => setHovering(null)}
+          className={`group w-80 border rounded-lg p-10 text-left transition-all duration-300 ${
+            selected === "en"
+              ? "border-primary bg-primary/10 scale-[1.02]"
+              : hovering === "en"
+                ? "border-primary/50 bg-card"
+                : "border-border bg-card/50"
+          }`}
+        >
+          <div className="font-serif text-3xl italic mb-4 text-foreground">English Writing</div>
+          <div className="text-base text-foreground/70 leading-relaxed mb-6">
+            LitRPG · Progression · Romantasy · Sci-Fi · Isekai
+          </div>
+          <div className="text-sm text-muted-foreground">
+            Royal Road · Kindle Unlimited · Scribble Hub
+          </div>
+        </button>
+      </div>
+
+      <div className="text-sm text-muted-foreground">
+        可在设置中更改 · Can be changed in Settings
+      </div>
+    </div>
+  );
+}

package/inkos/packages/studio/src/pages/LogViewer.tsx

@@ -0,0 +1,82 @@
+import { useApi } from "../hooks/use-api";
+import type { Theme } from "../hooks/use-theme";
+import type { TFunction } from "../hooks/use-i18n";
+import { useColors } from "../hooks/use-colors";
+
+interface LogEntry {
+  readonly level?: string;
+  readonly tag?: string;
+  readonly message: string;
+  readonly timestamp?: string;
+}
+
+interface Nav {
+  toDashboard: () => void;
+}
+
+const LEVEL_COLORS: Record<string, string> = {
+  error: "text-destructive",
+  warn: "text-amber-500",
+  info: "text-primary/70",
+  debug: "text-muted-foreground/50",
+};
+
+export function LogViewer({ nav, theme, t }: { nav: Nav; theme: Theme; t: TFunction }) {
+  const c = useColors(theme);
+  const { data, refetch } = useApi<{ entries: ReadonlyArray<LogEntry> }>("/logs");
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <button onClick={nav.toDashboard} className={c.link}>{t("bread.home")}</button>
+        <span className="text-border">/</span>
+        <span className="text-foreground">{t("logs.title")}</span>
+      </div>
+
+      <div className="flex items-baseline justify-between">
+        <h1 className="font-serif text-3xl">{t("logs.title")}</h1>
+        <button
+          onClick={() => refetch()}
+          className={`px-4 py-2.5 text-sm rounded-md ${c.btnSecondary}`}
+        >
+          {t("common.refresh")}
+        </button>
+      </div>
+
+      <div className={`border ${c.cardStatic} rounded-lg overflow-hidden`}>
+        <div className="p-4 max-h-[600px] overflow-y-auto">
+          {data?.entries && data.entries.length > 0 ? (
+            <div className="space-y-1 font-mono text-sm leading-relaxed">
+              {data.entries.map((entry, i) => (
+                <div key={i} className="flex gap-2">
+                  {entry.timestamp && (
+                    <span className="text-muted-foreground shrink-0 w-20 tabular-nums">
+                      {new Date(entry.timestamp).toLocaleTimeString()}
+                    </span>
+                  )}
+                  {entry.level && (
+                    <span className={`shrink-0 w-12 uppercase ${LEVEL_COLORS[entry.level] ?? "text-muted-foreground"}`}>
+                      {entry.level}
+                    </span>
+                  )}
+                  {entry.tag && (
+                    <span className="text-primary/70 shrink-0">[{entry.tag}]</span>
+                  )}
+                  <span className="text-foreground/80">{entry.message}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-muted-foreground text-sm italic py-12 text-center">
+              {t("logs.empty")}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        {t("logs.showingRecent")}
+      </p>
+    </div>
+  );
+}

package/inkos/packages/studio/src/pages/RadarView.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useState } from "react";
+import type { Theme } from "../hooks/use-theme";
+import type { TFunction } from "../hooks/use-i18n";
+import { useColors } from "../hooks/use-colors";
+import { fetchJson } from "../hooks/use-api";
+import { TrendingUp, Loader2, Target, Clock } from "lucide-react";
+
+interface Recommendation {
+  readonly confidence: number;
+  readonly platform: string;
+  readonly genre: string;
+  readonly concept: string;
+  readonly reasoning: string;
+  readonly benchmarkTitles: ReadonlyArray<string>;
+}
+
+interface RadarResult {
+  readonly marketSummary: string;
+  readonly recommendations: ReadonlyArray<Recommendation>;
+}
+
+interface RadarHistoryItem {
+  readonly file: string;
+  readonly timestamp: string;
+  readonly summaryPreview: string;
+  readonly result: RadarResult;
+}
+
+interface Nav { toDashboard: () => void }
+
+export function RadarView({ nav, theme, t }: { nav: Nav; theme: Theme; t: TFunction }) {
+  const c = useColors(theme);
+  const [result, setResult] = useState<RadarResult | null>(null);
+  const [history, setHistory] = useState<ReadonlyArray<RadarHistoryItem>>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const loadHistory = async () => {
+    try {
+      const data = await fetchJson<{ items: ReadonlyArray<RadarHistoryItem> }>("/radar/history");
+      setHistory(data.items ?? []);
+    } catch {
+      setHistory([]);
+    }
+  };
+
+  useEffect(() => {
+    void loadHistory();
+  }, []);
+
+  const handleScan = async () => {
+    setLoading(true);
+    setError("");
+    setResult(null);
+    try {
+      const data = await fetchJson<RadarResult>("/radar/scan", { method: "POST" });
+      setResult(data);
+      await loadHistory();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <button onClick={nav.toDashboard} className={c.link}>{t("bread.home")}</button>
+        <span className="text-border">/</span>
+        <span>{t("nav.radar")}</span>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <h1 className="font-serif text-3xl flex items-center gap-3">
+          <TrendingUp size={28} className="text-primary" />
+          {t("radar.title")}
+        </h1>
+        <button
+          onClick={handleScan}
+          disabled={loading}
+          className={`px-5 py-2.5 text-sm rounded-lg ${c.btnPrimary} disabled:opacity-30 flex items-center gap-2`}
+        >
+          {loading ? <Loader2 size={14} className="animate-spin" /> : <Target size={14} />}
+          {loading ? t("radar.scanning") : t("radar.scan")}
+        </button>
+      </div>
+
+      {error && (
+        <div className="bg-destructive/10 text-destructive px-4 py-3 rounded-lg text-sm">{error}</div>
+      )}
+
+      {result && (
+        <div className="space-y-6">
+          <div className={`border ${c.cardStatic} rounded-lg p-5`}>
+            <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">{t("radar.summary")}</h3>
+            <p className="text-sm leading-relaxed whitespace-pre-wrap">{result.marketSummary}</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {result.recommendations.map((rec, i) => (
+              <div key={i} className={`border ${c.cardStatic} rounded-lg p-5 space-y-3`}>
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                    {rec.platform} · {rec.genre}
+                  </span>
+                  <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${
+                    rec.confidence >= 0.7 ? "bg-emerald-500/10 text-emerald-600" :
+                    rec.confidence >= 0.4 ? "bg-amber-500/10 text-amber-600" :
+                    "bg-muted text-muted-foreground"
+                  }`}>
+                    {(rec.confidence * 100).toFixed(0)}%
+                  </span>
+                </div>
+                <p className="text-sm font-semibold">{rec.concept}</p>
+                <p className="text-xs text-muted-foreground leading-relaxed">{rec.reasoning}</p>
+                {rec.benchmarkTitles.length > 0 && (
+                  <div className="flex gap-2 flex-wrap">
+                    {rec.benchmarkTitles.map((bt) => (
+                      <span key={bt} className="px-2 py-0.5 text-[10px] bg-secondary rounded">{bt}</span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {history.length > 0 && (
+        <div className={`border ${c.cardStatic} rounded-lg p-5 space-y-3`}>
+          <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-2">
+            <Clock size={14} />
+            {t("radar.history")}
+          </h3>
+          <div className="space-y-2">
+            {history.slice(0, 10).map((item) => (
+              <button
+                key={item.file}
+                onClick={() => setResult(item.result)}
+                className="w-full rounded-md border border-border/40 px-3 py-2 text-left text-xs hover:bg-muted/30"
+              >
+                <div className="font-medium text-foreground">{new Date(item.timestamp).toLocaleString()}</div>
+                <div className="mt-1 line-clamp-2 text-muted-foreground">{item.summaryPreview || item.file}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {!result && !loading && !error && (
+        <div className={`border border-dashed ${c.cardStatic} rounded-lg p-12 text-center text-muted-foreground text-sm italic`}>
+          {t("radar.emptyHint")}
+        </div>
+      )}
+    </div>
+  );
+}