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.

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;

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;

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;

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;

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;