feat(prompts+i18n): add prompt management and improve prompt editor i18n (#193)

* feat(prompts): add prompt management across Tauri service and React UI - backend: add commands/prompt.rs, services/prompt.rs, register in commands/mod.rs and lib.rs, refine app_config.rs - frontend: add PromptPanel, PromptFormModal, PromptListItem, MarkdownEditor, usePromptActions, integrate in App.tsx - api: add src/lib/api/prompts.ts - i18n: update src/i18n/locales/{en,zh}.json - build: update package.json and pnpm-lock.yaml * feat(i18n): improve i18n for prompts and Markdown editor - update src/i18n/locales/{en,zh}.json keys and strings - apply i18n in PromptFormModal, PromptPanel, and MarkdownEditor - align prompt text with src-tauri/src/services/prompt.rs * feat(prompts): add enable/disable toggle and simplify panel UI - Add PromptToggle component and integrate in prompt list items - Implement toggleEnabled with optimistic update; enable via API, disable via upsert with enabled=false; reload after success - Simplify PromptPanel: remove file import and current-file preview to keep CRUD flow focused - Tweak header controls style (use mcp variant) and minor copy: rename “Prompt Management” to “Prompts” - i18n: add disableSuccess/disableFailed messages - Backend (Tauri): prevent duplicate backups when importing original prompt content * style: unify code formatting with trailing commas * feat(prompts): add Gemini filename support to PromptFormModal Update filename mapping to use Record<AppId, string> pattern, supporting GEMINI.md alongside CLAUDE.md and AGENTS.md. * fix(prompts): sync enabled prompt to file when updating When updating a prompt that is currently enabled, automatically sync the updated content to the corresponding live file (CLAUDE.md/AGENTS.md/GEMINI.md). This ensures the active prompt file always reflects the latest content when editing enabled prompts.
2025-11-12 16:41:41 +08:00
parent 346f916048
commit 155532ea8c
20 changed files with 1302 additions and 1 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,6 +21,7 @@ import { SettingsDialog } from "@/components/settings/SettingsDialog";
 import { UpdateBadge } from "@/components/UpdateBadge";
 import UsageScriptModal from "@/components/UsageScriptModal";
 import McpPanel from "@/components/mcp/McpPanel";
+import PromptPanel from "@/components/prompts/PromptPanel";
 import { Button } from "@/components/ui/button";

 function App() {
@@ -31,6 +32,7 @@ function App() {
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [isAddOpen, setIsAddOpen] = useState(false);
  const [isMcpOpen, setIsMcpOpen] = useState(false);
+  const [isPromptOpen, setIsPromptOpen] = useState(false);
  const [editingProvider, setEditingProvider] = useState<Provider | null>(null);
  const [usageProvider, setUsageProvider] = useState<Provider | null>(null);
  const [confirmDelete, setConfirmDelete] = useState<Provider | null>(null);
@@ -202,6 +204,13 @@ function App() {

          <div className="flex flex-wrap items-center gap-2">
            <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
+            <Button
+              variant="mcp"
+              onClick={() => setIsPromptOpen(true)}
+              className="min-w-[80px]"
+            >
+              {t("prompts.manage")}
+            </Button>
            <Button
              variant="mcp"
              onClick={() => setIsMcpOpen(true)}
@@ -287,6 +296,12 @@ function App() {
        onImportSuccess={handleImportSuccess}
      />

+      <PromptPanel
+        open={isPromptOpen}
+        onOpenChange={setIsPromptOpen}
+        appId={activeApp}
+      />
+
      <McpPanel
        open={isMcpOpen}
        onOpenChange={setIsMcpOpen}
--- a/src/components/MarkdownEditor.tsx
+++ b/src/components/MarkdownEditor.tsx
@@ -0,0 +1,159 @@
+import React, { useRef, useEffect } from "react";
+import { EditorView, basicSetup } from "codemirror";
+import { markdown } from "@codemirror/lang-markdown";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorState } from "@codemirror/state";
+import { placeholder as placeholderExt } from "@codemirror/view";
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  darkMode?: boolean;
+  readOnly?: boolean;
+  className?: string;
+  minHeight?: string;
+  maxHeight?: string;
+}
+
+const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+  value,
+  onChange,
+  placeholder: placeholderText = "",
+  darkMode = false,
+  readOnly = false,
+  className = "",
+  minHeight = "300px",
+  maxHeight,
+}) => {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    // 定义基础主题
+    const baseTheme = EditorView.baseTheme({
+      "&": {
+        height: "100%",
+        minHeight,
+        maxHeight: maxHeight || "none",
+      },
+      ".cm-scroller": {
+        overflow: "auto",
+        fontFamily:
+          "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+        fontSize: "14px",
+      },
+      "&light .cm-content, &dark .cm-content": {
+        padding: "12px 0",
+      },
+      "&light .cm-editor, &dark .cm-editor": {
+        backgroundColor: "transparent",
+      },
+      "&.cm-focused": {
+        outline: "none",
+      },
+    });
+
+    const extensions = [
+      basicSetup,
+      markdown(),
+      baseTheme,
+      EditorView.lineWrapping,
+      EditorState.readOnly.of(readOnly),
+    ];
+
+    if (!readOnly) {
+      extensions.push(
+        placeholderExt(placeholderText),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged && onChange) {
+            onChange(update.state.doc.toString());
+          }
+        }),
+      );
+    } else {
+      // 只读模式下隐藏光标和高亮行
+      extensions.push(
+        EditorView.theme({
+          ".cm-cursor, .cm-dropCursor": { border: "none" },
+          ".cm-activeLine": { backgroundColor: "transparent !important" },
+          ".cm-activeLineGutter": { backgroundColor: "transparent !important" },
+        }),
+      );
+    }
+
+    // 如果启用深色模式，添加深色主题
+    if (darkMode) {
+      extensions.push(oneDark);
+    } else {
+      // 浅色模式下的简单样式调整，使其更融入 UI
+      extensions.push(
+        EditorView.theme(
+          {
+            "&": {
+              backgroundColor: "transparent",
+            },
+            ".cm-content": {
+              color: "#374151", // text-gray-700
+            },
+            ".cm-gutters": {
+              backgroundColor: "#f9fafb", // bg-gray-50
+              color: "#9ca3af", // text-gray-400
+              borderRight: "1px solid #e5e7eb", // border-gray-200
+            },
+            ".cm-activeLineGutter": {
+              backgroundColor: "#e5e7eb",
+            },
+          },
+          { dark: false },
+        ),
+      );
+    }
+
+    // 创建初始状态
+    const state = EditorState.create({
+      doc: value,
+      extensions,
+    });
+
+    // 创建编辑器视图
+    const view = new EditorView({
+      state,
+      parent: editorRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [darkMode, readOnly, minHeight, maxHeight, placeholderText]); // 添加 placeholderText 依赖以支持国际化切换
+
+  // 当 value 从外部改变时更新编辑器内容
+  useEffect(() => {
+    if (viewRef.current && viewRef.current.state.doc.toString() !== value) {
+      const transaction = viewRef.current.state.update({
+        changes: {
+          from: 0,
+          to: viewRef.current.state.doc.length,
+          insert: value,
+        },
+      });
+      viewRef.current.dispatch(transaction);
+    }
+  }, [value]);
+
+  return (
+    <div
+      ref={editorRef}
+      className={`border rounded-md overflow-hidden ${
+        darkMode ? "border-gray-800" : "border-gray-200"
+      } ${className}`}
+    />
+  );
+};
+
+export default MarkdownEditor;
--- a/src/components/prompts/PromptFormModal.tsx
+++ b/src/components/prompts/PromptFormModal.tsx
@@ -0,0 +1,160 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import MarkdownEditor from "@/components/MarkdownEditor";
+import type { Prompt, AppId } from "@/lib/api";
+
+interface PromptFormModalProps {
+  appId: AppId;
+  editingId?: string;
+  initialData?: Prompt;
+  onSave: (id: string, prompt: Prompt) => Promise<void>;
+  onClose: () => void;
+}
+
+const PromptFormModal: React.FC<PromptFormModalProps> = ({
+  appId,
+  editingId,
+  initialData,
+  onSave,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const appName = t(`apps.${appId}`);
+  const filenameMap: Record<AppId, string> = {
+    claude: "CLAUDE.md",
+    codex: "AGENTS.md",
+    gemini: "GEMINI.md",
+  };
+  const filename = filenameMap[appId];
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [content, setContent] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    // 检测初始暗色模式状态
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
+
+    // 监听 html 元素的 class 变化以实时响应主题切换
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (initialData) {
+      setName(initialData.name);
+      setDescription(initialData.description || "");
+      setContent(initialData.content);
+    }
+  }, [initialData]);
+
+  const handleSave = async () => {
+    if (!name.trim() || !content.trim()) {
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const id = editingId || `prompt-${Date.now()}`;
+      const timestamp = Math.floor(Date.now() / 1000);
+      const prompt: Prompt = {
+        id,
+        name: name.trim(),
+        description: description.trim() || undefined,
+        content: content.trim(),
+        enabled: initialData?.enabled || false,
+        createdAt: initialData?.createdAt || timestamp,
+        updatedAt: timestamp,
+      };
+      await onSave(id, prompt);
+      onClose();
+    } catch (error) {
+      // Error handled by hook
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>
+            {editingId
+              ? t("prompts.editTitle", { appName })
+              : t("prompts.addTitle", { appName })}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto space-y-4 px-6 py-4">
+          <div>
+            <Label htmlFor="name">{t("prompts.name")}</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t("prompts.namePlaceholder")}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="description">{t("prompts.description")}</Label>
+            <Input
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder={t("prompts.descriptionPlaceholder")}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="content" className="mb-2 block">
+              {t("prompts.content")}
+            </Label>
+            <MarkdownEditor
+              value={content}
+              onChange={setContent}
+              placeholder={t("prompts.contentPlaceholder", { filename })}
+              darkMode={isDarkMode}
+              minHeight="300px"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button
+            type="button"
+            onClick={handleSave}
+            disabled={!name.trim() || !content.trim() || saving}
+          >
+            {saving ? t("common.saving") : t("common.save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PromptFormModal;
--- a/src/components/prompts/PromptListItem.tsx
+++ b/src/components/prompts/PromptListItem.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Edit3, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { Prompt } from "@/lib/api";
+import PromptToggle from "./PromptToggle";
+
+interface PromptListItemProps {
+  id: string;
+  prompt: Prompt;
+  onToggle: (id: string, enabled: boolean) => void;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+const PromptListItem: React.FC<PromptListItemProps> = ({
+  id,
+  prompt,
+  onToggle,
+  onEdit,
+  onDelete,
+}) => {
+  const { t } = useTranslation();
+
+  const enabled = prompt.enabled === true;
+
+  return (
+    <div className="h-16 rounded-lg border border-border-default bg-card p-4 transition-[border-color,box-shadow] duration-200 hover:border-border-hover hover:shadow-sm">
+      <div className="flex items-center gap-4 h-full">
+        {/* Toggle 开关 */}
+        <div className="flex-shrink-0">
+          <PromptToggle
+            enabled={enabled}
+            onChange={(newEnabled) => onToggle(id, newEnabled)}
+          />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
+            {prompt.name}
+          </h3>
+          {prompt.description && (
+            <p className="text-sm text-gray-500 dark:text-gray-400 truncate">
+              {prompt.description}
+            </p>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => onEdit(id)}
+            title={t("common.edit")}
+          >
+            <Edit3 size={16} />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(id)}
+            className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
+            title={t("common.delete")}
+          >
+            <Trash2 size={16} />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PromptListItem;
--- a/src/components/prompts/PromptPanel.tsx
+++ b/src/components/prompts/PromptPanel.tsx
@@ -0,0 +1,177 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Plus, FileText, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { type AppId } from "@/lib/api";
+import { usePromptActions } from "@/hooks/usePromptActions";
+import PromptListItem from "./PromptListItem";
+import PromptFormModal from "./PromptFormModal";
+import { ConfirmDialog } from "../ConfirmDialog";
+
+interface PromptPanelProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  appId: AppId;
+}
+
+const PromptPanel: React.FC<PromptPanelProps> = ({
+  open,
+  onOpenChange,
+  appId,
+}) => {
+  const { t } = useTranslation();
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [confirmDialog, setConfirmDialog] = useState<{
+    isOpen: boolean;
+    titleKey: string;
+    messageKey: string;
+    messageParams?: Record<string, unknown>;
+    onConfirm: () => void;
+  } | null>(null);
+
+  const { prompts, loading, reload, savePrompt, deletePrompt, toggleEnabled } =
+    usePromptActions(appId);
+
+  useEffect(() => {
+    if (open) reload();
+  }, [open, reload]);
+
+  const handleAdd = () => {
+    setEditingId(null);
+    setIsFormOpen(true);
+  };
+
+  const handleEdit = (id: string) => {
+    setEditingId(id);
+    setIsFormOpen(true);
+  };
+
+  const handleDelete = (id: string) => {
+    const prompt = prompts[id];
+    setConfirmDialog({
+      isOpen: true,
+      titleKey: "prompts.confirm.deleteTitle",
+      messageKey: "prompts.confirm.deleteMessage",
+      messageParams: { name: prompt?.name },
+      onConfirm: async () => {
+        try {
+          await deletePrompt(id);
+          setConfirmDialog(null);
+        } catch (e) {
+          // Error handled by hook
+        }
+      },
+    });
+  };
+
+  const promptEntries = useMemo(() => Object.entries(prompts), [prompts]);
+
+  const enabledPrompt = promptEntries.find(([_, p]) => p.enabled);
+
+  const appName = t(`apps.${appId}`);
+  const panelTitle = t("prompts.title", { appName });
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-3xl max-h-[85vh] min-h-[600px] flex flex-col">
+          <DialogHeader>
+            <div className="flex items-center justify-between pr-8">
+              <DialogTitle>{panelTitle}</DialogTitle>
+              <Button type="button" variant="mcp" onClick={handleAdd}>
+                <Plus size={16} />
+                {t("prompts.add")}
+              </Button>
+            </div>
+          </DialogHeader>
+
+          <div className="flex-shrink-0 px-6 py-4">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              {t("prompts.count", { count: promptEntries.length })} ·{" "}
+              {enabledPrompt
+                ? t("prompts.enabledName", { name: enabledPrompt[1].name })
+                : t("prompts.noneEnabled")}
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-y-auto px-6 pb-4">
+            {loading ? (
+              <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+                {t("prompts.loading")}
+              </div>
+            ) : promptEntries.length === 0 ? (
+              <div className="text-center py-12">
+                <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
+                  <FileText
+                    size={24}
+                    className="text-gray-400 dark:text-gray-500"
+                  />
+                </div>
+                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
+                  {t("prompts.empty")}
+                </h3>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">
+                  {t("prompts.emptyDescription")}
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {promptEntries.map(([id, prompt]) => (
+                  <PromptListItem
+                    key={id}
+                    id={id}
+                    prompt={prompt}
+                    onToggle={toggleEnabled}
+                    onEdit={handleEdit}
+                    onDelete={handleDelete}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="mcp"
+              onClick={() => onOpenChange(false)}
+            >
+              <Check size={16} />
+              {t("common.done")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {isFormOpen && (
+        <PromptFormModal
+          appId={appId}
+          editingId={editingId || undefined}
+          initialData={editingId ? prompts[editingId] : undefined}
+          onSave={savePrompt}
+          onClose={() => setIsFormOpen(false)}
+        />
+      )}
+
+      {confirmDialog && (
+        <ConfirmDialog
+          isOpen={confirmDialog.isOpen}
+          title={t(confirmDialog.titleKey)}
+          message={t(confirmDialog.messageKey, confirmDialog.messageParams)}
+          onConfirm={confirmDialog.onConfirm}
+          onCancel={() => setConfirmDialog(null)}
+        />
+      )}
+    </>
+  );
+};
+
+export default PromptPanel;
--- a/src/components/prompts/PromptToggle.tsx
+++ b/src/components/prompts/PromptToggle.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+interface PromptToggleProps {
+  enabled: boolean;
+  onChange: (enabled: boolean) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Toggle 开关组件（提示词专用）
+ * 启用时为蓝色，禁用时为灰色
+ */
+const PromptToggle: React.FC<PromptToggleProps> = ({
+  enabled,
+  onChange,
+  disabled = false,
+}) => {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={enabled}
+      disabled={disabled}
+      onClick={() => onChange(!enabled)}
+      className={`
+        relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/20
+        ${enabled ? "bg-blue-500 dark:bg-blue-600" : "bg-gray-300 dark:bg-gray-600"}
+        ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+      `}
+    >
+      <span
+        className={`
+          inline-block h-4 w-4 transform rounded-full bg-white transition-transform
+          ${enabled ? "translate-x-6" : "translate-x-1"}
+        `}
+      />
+    </button>
+  );
+};
+
+export default PromptToggle;
--- a/src/hooks/usePromptActions.ts
+++ b/src/hooks/usePromptActions.ts
@@ -0,0 +1,152 @@
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { promptsApi, type Prompt, type AppId } from "@/lib/api";
+
+export function usePromptActions(appId: AppId) {
+  const { t } = useTranslation();
+  const [prompts, setPrompts] = useState<Record<string, Prompt>>({});
+  const [loading, setLoading] = useState(false);
+  const [currentFileContent, setCurrentFileContent] = useState<string | null>(
+    null,
+  );
+
+  const reload = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await promptsApi.getPrompts(appId);
+      setPrompts(data);
+
+      // 同时加载当前文件内容
+      try {
+        const content = await promptsApi.getCurrentFileContent(appId);
+        setCurrentFileContent(content);
+      } catch (error) {
+        setCurrentFileContent(null);
+      }
+    } catch (error) {
+      toast.error(t("prompts.loadFailed"));
+    } finally {
+      setLoading(false);
+    }
+  }, [appId, t]);
+
+  const savePrompt = useCallback(
+    async (id: string, prompt: Prompt) => {
+      try {
+        await promptsApi.upsertPrompt(appId, id, prompt);
+        await reload();
+        toast.success(t("prompts.saveSuccess"));
+      } catch (error) {
+        toast.error(t("prompts.saveFailed"));
+        throw error;
+      }
+    },
+    [appId, reload, t],
+  );
+
+  const deletePrompt = useCallback(
+    async (id: string) => {
+      try {
+        await promptsApi.deletePrompt(appId, id);
+        await reload();
+        toast.success(t("prompts.deleteSuccess"));
+      } catch (error) {
+        toast.error(t("prompts.deleteFailed"));
+        throw error;
+      }
+    },
+    [appId, reload, t],
+  );
+
+  const enablePrompt = useCallback(
+    async (id: string) => {
+      try {
+        await promptsApi.enablePrompt(appId, id);
+        await reload();
+        toast.success(t("prompts.enableSuccess"));
+      } catch (error) {
+        toast.error(t("prompts.enableFailed"));
+        throw error;
+      }
+    },
+    [appId, reload, t],
+  );
+
+  const toggleEnabled = useCallback(
+    async (id: string, enabled: boolean) => {
+      // Optimistic update
+      const previousPrompts = prompts;
+
+      // 如果要启用当前提示词，先禁用其他所有提示词
+      if (enabled) {
+        const updatedPrompts = Object.keys(prompts).reduce(
+          (acc, key) => {
+            acc[key] = {
+              ...prompts[key],
+              enabled: key === id,
+            };
+            return acc;
+          },
+          {} as Record<string, Prompt>,
+        );
+        setPrompts(updatedPrompts);
+      } else {
+        setPrompts((prev) => ({
+          ...prev,
+          [id]: {
+            ...prev[id],
+            enabled: false,
+          },
+        }));
+      }
+
+      try {
+        if (enabled) {
+          await promptsApi.enablePrompt(appId, id);
+          toast.success(t("prompts.enableSuccess"));
+        } else {
+          // 禁用提示词 - 需要后端支持
+          await promptsApi.upsertPrompt(appId, id, {
+            ...prompts[id],
+            enabled: false,
+          });
+          toast.success(t("prompts.disableSuccess"));
+        }
+        await reload();
+      } catch (error) {
+        // Rollback on failure
+        setPrompts(previousPrompts);
+        toast.error(
+          enabled ? t("prompts.enableFailed") : t("prompts.disableFailed"),
+        );
+        throw error;
+      }
+    },
+    [appId, prompts, reload, t],
+  );
+
+  const importFromFile = useCallback(async () => {
+    try {
+      const id = await promptsApi.importFromFile(appId);
+      await reload();
+      toast.success(t("prompts.importSuccess"));
+      return id;
+    } catch (error) {
+      toast.error(t("prompts.importFailed"));
+      throw error;
+    }
+  }, [appId, reload, t]);
+
+  return {
+    prompts,
+    loading,
+    currentFileContent,
+    reload,
+    savePrompt,
+    deletePrompt,
+    enablePrompt,
+    toggleEnabled,
+    importFromFile,
+  };
+}
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -550,5 +550,46 @@
        "description": "Context7 documentation search tool providing latest library docs and code examples, with higher limits when configured with a key"
      }
    }
+  },
+  "prompts": {
+    "manage": "Prompts",
+    "title": "{{appName}} Prompt Management",
+    "claudeTitle": "Claude Prompt Management",
+    "codexTitle": "Codex Prompt Management",
+    "add": "Add Prompt",
+    "edit": "Edit Prompt",
+    "addTitle": "Add {{appName}} Prompt",
+    "editTitle": "Edit {{appName}} Prompt",
+    "import": "Import Existing",
+    "count": "{{count}} prompts",
+    "enabled": "Enabled",
+    "enable": "Enable",
+    "enabledName": "Enabled: {{name}}",
+    "noneEnabled": "No prompt enabled",
+    "currentFile": "Current {{filename}} Content",
+    "empty": "No prompts yet",
+    "emptyDescription": "Click the button above to add or import prompts",
+    "loading": "Loading...",
+    "name": "Name",
+    "namePlaceholder": "e.g., Default Project Prompt",
+    "description": "Description",
+    "descriptionPlaceholder": "Optional description",
+    "content": "Content",
+    "contentPlaceholder": "# {{filename}}\n\nEnter prompt content here...",
+    "loadFailed": "Failed to load prompts",
+    "saveSuccess": "Saved successfully",
+    "saveFailed": "Failed to save",
+    "deleteSuccess": "Deleted successfully",
+    "deleteFailed": "Failed to delete",
+    "enableSuccess": "Enabled successfully",
+    "enableFailed": "Failed to enable",
+    "disableSuccess": "Disabled successfully",
+    "disableFailed": "Failed to disable",
+    "importSuccess": "Imported successfully",
+    "importFailed": "Failed to import",
+    "confirm": {
+      "deleteTitle": "Confirm Delete",
+      "deleteMessage": "Are you sure you want to delete prompt \"{{name}}\"?"
+    }
  }
 }
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -550,5 +550,46 @@
        "description": "Context7 文档搜索工具，提供最新的库文档和代码示例，配置 key 会有更高限额"
      }
    }
+  },
+  "prompts": {
+    "manage": "提示词",
+    "title": "{{appName}} 提示词管理",
+    "claudeTitle": "Claude 提示词管理",
+    "codexTitle": "Codex 提示词管理",
+    "add": "添加提示词",
+    "edit": "编辑提示词",
+    "addTitle": "添加 {{appName}} 提示词",
+    "editTitle": "编辑 {{appName}} 提示词",
+    "import": "导入现有",
+    "count": "共 {{count}} 个提示词",
+    "enabled": "已启用",
+    "enable": "启用",
+    "enabledName": "已启用: {{name}}",
+    "noneEnabled": "未启用任何提示词",
+    "currentFile": "当前 {{filename}} 内容",
+    "empty": "暂无提示词",
+    "emptyDescription": "点击右上角按钮添加或导入提示词",
+    "loading": "加载中...",
+    "name": "名称",
+    "namePlaceholder": "例如：项目默认提示词",
+    "description": "描述",
+    "descriptionPlaceholder": "可选的描述信息",
+    "content": "内容",
+    "contentPlaceholder": "# {{filename}}\n\n在此输入提示词内容...",
+    "loadFailed": "加载提示词失败",
+    "saveSuccess": "保存成功",
+    "saveFailed": "保存失败",
+    "deleteSuccess": "删除成功",
+    "deleteFailed": "删除失败",
+    "enableSuccess": "启用成功",
+    "enableFailed": "启用失败",
+    "disableSuccess": "禁用成功",
+    "disableFailed": "禁用失败",
+    "importSuccess": "导入成功",
+    "importFailed": "导入失败",
+    "confirm": {
+      "deleteTitle": "确认删除",
+      "deleteMessage": "确定要删除提示词 \"{{name}}\" 吗？"
+    }
  }
 }
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -2,6 +2,8 @@ export type { AppId } from "./types";
 export { providersApi } from "./providers";
 export { settingsApi } from "./settings";
 export { mcpApi } from "./mcp";
+export { promptsApi } from "./prompts";
 export { usageApi } from "./usage";
 export { vscodeApi } from "./vscode";
 export type { ProviderSwitchEvent } from "./providers";
+export type { Prompt } from "./prompts";
--- a/src/lib/api/prompts.ts
+++ b/src/lib/api/prompts.ts
@@ -0,0 +1,38 @@
+import { invoke } from "@tauri-apps/api/core";
+import type { AppId } from "./types";
+
+export interface Prompt {
+  id: string;
+  name: string;
+  content: string;
+  description?: string;
+  enabled: boolean;
+  createdAt?: number;
+  updatedAt?: number;
+}
+
+export const promptsApi = {
+  async getPrompts(app: AppId): Promise<Record<string, Prompt>> {
+    return await invoke("get_prompts", { app });
+  },
+
+  async upsertPrompt(app: AppId, id: string, prompt: Prompt): Promise<void> {
+    return await invoke("upsert_prompt", { app, id, prompt });
+  },
+
+  async deletePrompt(app: AppId, id: string): Promise<void> {
+    return await invoke("delete_prompt", { app, id });
+  },
+
+  async enablePrompt(app: AppId, id: string): Promise<void> {
+    return await invoke("enable_prompt", { app, id });
+  },
+
+  async importFromFile(app: AppId): Promise<string> {
+    return await invoke("import_prompt_from_file", { app });
+  },
+
+  async getCurrentFileContent(app: AppId): Promise<string | null> {
+    return await invoke("get_current_prompt_file_content", { app });
+  },
+};