feat(prompts): unify sources and add personal library

web/src/components/layout/config-prompt-sources.tsx

@@ -1,16 +1,18 @@
-import { App, Button, Select, Switch } from "antd";
-import { useQueryClient } from "@tanstack/react-query";
+import { App, Button, Select, Switch, Tag } from "antd";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Eye, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
 import { useState } from "react";
 
 import { PromptSourceEditorDrawer } from "./prompt-source-editor-drawer";
 import { PromptSourceContentModal } from "./prompt-source-content-modal";
-import { refreshAllSources, refreshSource } from "@/services/api/prompts";
+import { fetchPromptSourceStatuses, refreshAllSources, refreshSource } from "@/services/api/prompts";
 import { PROMPT_SOURCE_INTERVAL_OPTIONS, usePromptSourceStore } from "@/stores/use-prompt-source-store";
 import type { PromptSource } from "@/services/api/prompt-source-presets";
 
+const STATUS_QUERY_KEY = ["prompt-source-statuses"];
+
 export function ConfigPromptSources() {
-    const { message } = App.useApp();
+    const { message, modal } = App.useApp();
     const queryClient = useQueryClient();
     const sources = usePromptSourceStore((state) => state.sources);
     const schedule = usePromptSourceStore((state) => state.schedule);
@@ -19,20 +21,20 @@ export function ConfigPromptSources() {
     const removeSource = usePromptSourceStore((state) => state.removeSource);
     const toggleSource = usePromptSourceStore((state) => state.toggleSource);
     const updateSchedule = usePromptSourceStore((state) => state.updateSchedule);
+    const statusQuery = useQuery({ queryKey: STATUS_QUERY_KEY, queryFn: fetchPromptSourceStatuses });
 
-    const [editingId, setEditingId] = useState("");
+    const [editingSource, setEditingSource] = useState<PromptSource | null>(null);
     const [viewingId, setViewingId] = useState("");
     const [refreshingId, setRefreshingId] = useState("");
     const [refreshingAll, setRefreshingAll] = useState(false);
-
-    const editingSource = sources.find((item) => item.id === editingId) || null;
     const viewingSource = sources.find((item) => item.id === viewingId) || null;
 
-    const invalidatePrompts = () => queryClient.invalidateQueries({ queryKey: ["prompts"] });
-
-    const handleAdd = () => {
-        const source = addSource();
-        setEditingId(source.id);
+    const invalidatePrompts = async () => {
+        await Promise.all([
+            queryClient.invalidateQueries({ queryKey: ["prompts"] }),
+            queryClient.invalidateQueries({ queryKey: ["side-panel-prompts"] }),
+            queryClient.invalidateQueries({ queryKey: STATUS_QUERY_KEY }),
+        ]);
     };
 
     const handleSave = (source: PromptSource) => {
@@ -41,22 +43,28 @@ export function ConfigPromptSources() {
     };
 
     const handleDelete = (source: PromptSource) => {
-        if (sources.length <= 1) {
-            message.warning("至少保留一个来源");
-            return;
-        }
-        removeSource(source.id);
-        void invalidatePrompts();
+        modal.confirm({
+            title: `删除「${source.name}」？`,
+            content: "来源配置会被移除，已经保存到我的提示词的内容不受影响。",
+            okText: "删除",
+            okButtonProps: { danger: true },
+            cancelText: "取消",
+            onOk: async () => {
+                removeSource(source.id);
+                await invalidatePrompts();
+            },
+        });
     };
 
     const handleRefreshOne = async (source: PromptSource) => {
         setRefreshingId(source.id);
         try {
-            const count = await refreshSource(source.id);
+            const result = await refreshSource(source.id);
             await invalidatePrompts();
-            message.success(`「${source.name}」已拉取 ${count} 条`);
+            message.success(`「${source.name}」已更新 ${result.count} 条`);
         } catch (error) {
-            message.error(error instanceof Error ? error.message : "拉取失败");
+            await queryClient.invalidateQueries({ queryKey: STATUS_QUERY_KEY });
+            message.error(error instanceof Error ? error.message : "更新失败，已保留旧缓存");
         } finally {
             setRefreshingId("");
         }
@@ -65,12 +73,13 @@ export function ConfigPromptSources() {
     const handleRefreshAll = async () => {
         setRefreshingAll(true);
         try {
-            const count = await refreshAllSources();
+            const result = await refreshAllSources();
             updateSchedule("lastFetchedAt", new Date().toISOString());
             await invalidatePrompts();
-            message.success(`全部来源已拉取，共 ${count} 条`);
+            if (result.failureCount) message.warning(`更新完成：${result.successCount} 个成功，${result.failureCount} 个失败，失败来源已保留旧缓存`);
+            else message.success(`已更新 ${result.successCount} 个来源，共 ${result.total} 条`);
         } catch (error) {
-            message.error(error instanceof Error ? error.message : "拉取失败");
+            message.error(error instanceof Error ? error.message : "更新失败");
         } finally {
             setRefreshingAll(false);
         }
@@ -78,40 +87,48 @@ export function ConfigPromptSources() {
 
     return (
         <div>
-            <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
-                <div className="text-xs text-stone-500">每个来源是一段拉取脚本，可自定义、可查看内容；系统内置几个默认来源，你也可以本地新增。</div>
-                <Button type="primary" icon={<Plus className="size-4" />} onClick={handleAdd}>
+            <div className="mb-4 flex flex-wrap items-center justify-end gap-3">
+                <Button type="primary" icon={<Plus className="size-4" />} onClick={() => setEditingSource(addSource())}>
                     新增来源
                 </Button>
             </div>
 
             <div className="space-y-2">
-                {sources.map((source) => (
-                    <div key={source.id} className="flex items-center justify-between gap-3 rounded-lg border border-stone-200 px-4 py-3 dark:border-stone-800">
-                        <div className="flex min-w-0 items-center gap-3">
-                            <Switch size="small" checked={source.enabled} onChange={(checked) => toggleSource(source.id, checked)} />
-                            <div className="min-w-0">
-                                <div className="truncate text-sm font-semibold">{source.name || "未命名来源"}</div>
-                                <div className="mt-1 truncate text-xs text-stone-500">{source.githubUrl || "无 GitHub 地址"}</div>
+                {sources.map((source) => {
+                    const status = statusQuery.data?.[source.id];
+                    return (
+                        <div key={source.id} className="flex flex-wrap items-center gap-3 rounded-lg border border-stone-200 px-4 py-3 dark:border-stone-800">
+                            <Switch size="small" checked={source.enabled} onChange={(checked) => { toggleSource(source.id, checked); void invalidatePrompts(); }} />
+                            <div className="min-w-[220px] flex-1">
+                                <div className="flex min-w-0 items-center gap-2">
+                                    <span className="truncate text-sm font-semibold">{source.name}</span>
+                                    {source.builtIn ? <Tag className="m-0 shrink-0 text-[10px]">内置</Tag> : null}
+                                </div>
+                                <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs text-stone-500">
+                                    <a className="max-w-full truncate hover:text-stone-800 hover:underline dark:hover:text-stone-200" href={source.homepage || source.url} target="_blank" rel="noreferrer">
+                                        {source.homepage || source.url}
+                                    </a>
+                                    <span className="tabular-nums">{status?.count ?? 0} 条</span>
+                                    {status?.lastError ? <Tag color="error" className="m-0 text-[10px]" title={status.lastError}>失败</Tag> : status?.lastSuccessAt ? <Tag color="success" className="m-0 text-[10px]">正常</Tag> : <Tag className="m-0 text-[10px]">未同步</Tag>}
+                                    <span>{status?.lastSuccessAt ? `上次成功 ${formatTime(status.lastSuccessAt)}` : "尚未拉取"}</span>
+                                </div>
+                            </div>
+                            <div className="ml-auto flex flex-wrap justify-end gap-2">
+                                <Button size="small" icon={<Eye className="size-3.5" />} onClick={() => setViewingId(source.id)}>
+                                    查看内容
+                                </Button>
+                                <Button size="small" icon={<RefreshCw className="size-3.5" />} loading={refreshingId === source.id} onClick={() => void handleRefreshOne(source)}>
+                                    立即拉取
+                                </Button>
+                                {!source.builtIn ? <Button size="small" icon={<Pencil className="size-3.5" />} onClick={() => setEditingSource(source)}>编辑来源</Button> : null}
+                                {!source.builtIn ? <Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => handleDelete(source)}>删除</Button> : null}
                             </div>
                         </div>
-                        <div className="flex shrink-0 gap-2">
-                            <Button size="small" icon={<Eye className="size-3.5" />} onClick={() => setViewingId(source.id)}>
-                                查看内容
-                            </Button>
-                            <Button size="small" icon={<RefreshCw className="size-3.5" />} loading={refreshingId === source.id} onClick={() => void handleRefreshOne(source)}>
-                                立即拉取
-                            </Button>
-                            <Button size="small" icon={<Pencil className="size-3.5" />} onClick={() => setEditingId(source.id)}>
-                                编辑脚本
-                            </Button>
-                            <Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => handleDelete(source)} />
-                        </div>
-                    </div>
-                ))}
+                    );
+                })}
             </div>
 
-            <section className="mt-5 rounded-lg border border-stone-200 p-3 dark:border-stone-800">
+            <section className="mt-5 rounded-lg border border-stone-200 p-4 dark:border-stone-800">
                 <div className="mb-3 text-sm font-semibold">定时拉取</div>
                 <div className="flex flex-wrap items-center gap-3">
                     <div className="flex items-center gap-2">
@@ -126,12 +143,13 @@ export function ConfigPromptSources() {
                 <div className="mt-2 text-xs text-stone-400">开启周期后，页面打开期间会按周期自动拉取所有启用的来源。</div>
             </section>
 
-            <PromptSourceEditorDrawer open={Boolean(editingSource)} source={editingSource} onSave={handleSave} onClose={() => setEditingId("")} />
+            <PromptSourceEditorDrawer open={Boolean(editingSource)} source={editingSource} onSave={handleSave} onClose={() => setEditingSource(null)} />
             <PromptSourceContentModal source={viewingSource} onClose={() => setViewingId("")} />
         </div>
     );
 }
 
 function formatTime(value: string) {
-    return new Date(value).toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? "-" : date.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
 }