feat(repo): add project-level review prompt with UI redesign

- Add database migration and repository for project review prompts
- Add API endpoint for setting project-level prompts
- Integrate project prompts into Agent and Codex review flows
- Redesign repository management UI with dialog-based prompt editor
- Replace flat buttons with Switch for webhook toggle and dedicated prompt button
- Add Dialog and DropdownMenu UI components from Radix UI
- Add comprehensive tests for wiring and interactions

frontend/bun.lock

@@ -5,6 +5,8 @@
     "": {
       "name": "frontend",
       "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.8",
@@ -216,10 +218,14 @@
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, ""],
 
+    "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
+
     "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, ""],
 
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, ""],
 
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
+
     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, ""],
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, ""],
@@ -228,6 +234,8 @@
 
     "@radix-ui/react-label": ["@radix-ui/react-label@2.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, ""],
 
+    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
+
     "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, ""],
 
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, ""],

frontend/package.json

@@ -14,6 +14,8 @@
     "ui:visual:update": "playwright test -c playwright.config.ts --update-snapshots"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",

frontend/src/components/RepositoryConfigCell.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Loader2, Settings, FileText } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import api from '@/lib/api';
+import type { Repository } from '@/services/repositoryService';
+
+interface RepositoryConfigCellProps {
+  repo: Repository;
+}
+
+export function RepositoryConfigCell({ repo }: RepositoryConfigCellProps) {
+  const queryClient = useQueryClient();
+  const [isPromptDialogOpen, setIsPromptDialogOpen] = useState(false);
+  const [draftPrompt, setDraftPrompt] = useState(repo.project_review_prompt ?? '');
+
+  const promptMutation = useMutation({
+    mutationFn: async (prompt: string) => {
+      const { data } = await api.put(`/repositories/${repo.name}/project-prompt`, {
+        project_review_prompt: prompt,
+      });
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['repositories'] });
+      setIsPromptDialogOpen(false);
+      toast.success(`已更新 ${repo.name} 的项目级提示词`);
+    },
+    onError: (error: Error) => {
+      toast.error(`更新失败: ${error.message}`);
+    },
+  });
+
+  const handleSavePrompt = () => {
+    promptMutation.mutate(draftPrompt.trim());
+  };
+
+  const handleOpenDialog = () => {
+    setDraftPrompt(repo.project_review_prompt ?? '');
+    setIsPromptDialogOpen(true);
+  };
+
+  const hasPrompt = !!repo.project_review_prompt?.trim();
+
+  return (
+    <>
+      <Button
+        variant={hasPrompt ? "outline" : "ghost"}
+        size="sm"
+        className={`h-8 gap-1.5 text-xs ${
+          hasPrompt 
+            ? "border-primary/50 text-primary hover:bg-primary/10" 
+            : "text-muted-foreground hover:text-foreground"
+        }`}
+        onClick={handleOpenDialog}
+      >
+        <Settings className="h-3.5 w-3.5" />
+        <span className="hidden sm:inline">{hasPrompt ? '已配置' : '配置'}</span>
+        {hasPrompt && <span className="ml-1 h-1.5 w-1.5 rounded-full bg-primary" />}
+      </Button>
+
+      <Dialog open={isPromptDialogOpen} onOpenChange={setIsPromptDialogOpen}>
+        <DialogContent className="sm:max-w-[525px]">
+          <DialogHeader>
+            <DialogTitle>配置项目级提示词</DialogTitle>
+            <DialogDescription>
+              为仓库 <code className="rounded bg-muted px-1 py-0.5 text-xs">{repo.name}</code> 设置审查提示词
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-2">
+            {hasPrompt && (
+              <div className="rounded-lg bg-muted/50 border border-border/50 p-3">
+                <div className="flex items-center gap-2 mb-2">
+                  <FileText className="h-3.5 w-3.5 text-muted-foreground" />
+                  <span className="text-xs font-medium text-muted-foreground">当前配置</span>
+                </div>
+                <p className="text-sm text-foreground leading-relaxed whitespace-pre-wrap break-all max-h-[80px] overflow-y-auto">
+                  {repo.project_review_prompt}
+                </p>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">提示词内容</label>
+              <Textarea
+                value={draftPrompt}
+                onChange={(e) => setDraftPrompt(e.target.value)}
+                placeholder="输入项目级审查提示词，例如：重点关注 API 安全性、空值处理和错误边界..."
+                className="min-h-[120px] resize-none text-sm leading-relaxed focus-visible:ring-1 focus-visible:ring-primary/50"
+                disabled={promptMutation.isPending}
+              />
+              <p className="text-xs text-muted-foreground">
+                此提示词将在代码审查时与全局提示词合并，传递给 AI 模型。
+                {hasPrompt && ' 留空保存将清除当前配置。'}
+              </p>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsPromptDialogOpen(false)}
+              disabled={promptMutation.isPending}
+            >
+              取消
+            </Button>
+            <Button
+              onClick={handleSavePrompt}
+              disabled={
+                promptMutation.isPending ||
+                draftPrompt.trim() === (repo.project_review_prompt ?? '').trim()
+              }
+            >
+              {promptMutation.isPending ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  保存中
+                </>
+              ) : (
+                '保存'
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

frontend/src/components/RepositoryManager.tsx

@@ -17,17 +17,17 @@ function DataTableSkeleton() {
       <Table>
         <TableHeader className="bg-muted/60 border-b border-border/50">
           <TableRow className="border-border/50">
-            <TableHead className="w-[40%]"><Skeleton className="h-5 w-24 bg-muted" /></TableHead>
-            <TableHead className="w-[30%]"><Skeleton className="h-5 w-24 bg-muted" /></TableHead>
-            <TableHead className="w-[30%] text-right"><Skeleton className="h-5 w-16 ml-auto bg-muted" /></TableHead>
+            <TableHead className="w-[50%]"><Skeleton className="h-5 w-24 bg-muted" /></TableHead>
+            <TableHead className="w-[25%]"><Skeleton className="h-5 w-16 bg-muted" /></TableHead>
+            <TableHead className="w-[25%] text-right"><Skeleton className="h-5 w-16 ml-auto bg-muted" /></TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {Array.from({ length: 10 }).map((_, i) => (
             <TableRow key={i} className="border-border/50">
               <TableCell><Skeleton className="h-5 w-3/4 bg-muted/70" /></TableCell>
-              <TableCell><Skeleton className="h-6 w-20 bg-muted/70 rounded-full" /></TableCell>
-              <TableCell className="text-right"><Skeleton className="h-8 w-16 ml-auto bg-muted/70" /></TableCell>
+              <TableCell><Skeleton className="h-5 w-20 bg-muted/70" /></TableCell>
+              <TableCell className="text-right"><Skeleton className="h-8 w-24 ml-auto bg-muted/70" /></TableCell>
             </TableRow>
           ))}
         </TableBody>

frontend/src/components/RepositoryTableColumns.tsx

@@ -2,42 +2,34 @@
 
 import type { ColumnDef } from "@tanstack/react-table"
 import type { Repository } from "@/services/repositoryService"
-import { WebhookToggleButton } from "@/components/WebhookToggleButton"
+import { RepositoryConfigCell } from "@/components/RepositoryConfigCell"
+import { WebhookToggleCell } from "@/components/WebhookToggleCell"
 
 export const columns: ColumnDef<Repository>[] = [
   {
     accessorKey: "name",
     header: "仓库名称",
-    cell: ({ row }) => <div className="font-medium text-foreground text-sm">{row.getValue("name")}</div>,
+    cell: ({ row }) => (
+      <div className="font-medium text-foreground text-sm">
+        {row.getValue("name")}
+      </div>
+    ),
   },
   {
     accessorKey: "webhook_status",
-    header: "Webhook 状态",
+    header: "Webhook",
     cell: ({ row }) => {
-      const status = row.getValue("webhook_status") as Repository["webhook_status"]
-      const isActive = status === 'active'
-      return (
-        <div className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold border ${isActive ? 'bg-success/10 text-success border-success/30' : 'bg-transparent text-muted-foreground border-border theme-border-soft'}`}>
-          {isActive && <span className="w-1.5 h-1.5 rounded-full bg-success animate-pulse theme-glow-success"></span>}
-          {isActive ? '已启用' : '未启用'}
-        </div>
-      )
+      const repo = row.original
+      return <WebhookToggleCell repo={repo} />
     },
   },
   {
     id: "actions",
-    header: () => <div className="text-right text-muted-foreground">操作</div>,
-    cell: ({ row }) => {
-      const repo = row.original
-      return (
-        <div className="text-right">
-          <WebhookToggleButton
-            repoName={repo.name}
-            status={repo.webhook_status}
-            hookId={repo.hook_id}
-          />
-        </div>
-      )
-    },
+    header: () => <div className="text-right text-muted-foreground text-xs">提示词</div>,
+    cell: ({ row }) => (
+      <div className="text-right">
+        <RepositoryConfigCell repo={row.original} />
+      </div>
+    ),
   },
 ]

frontend/src/components/WebhookToggleButton.tsx

@@ -1,58 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import api from '@/lib/api';
-import { Loader2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { toast } from "sonner";
-
-interface WebhookToggleButtonProps {
-  repoName: string;
-  status: 'active' | 'inactive';
-  hookId: number | null;
-}
-
-const createWebhook = (repoName: string) => api.post(`/repositories/${repoName}/webhook`);
-const deleteWebhook = ({ repoName, hookId }: { repoName: string; hookId: number }) => api.delete(`/repositories/${repoName}/webhook/${hookId}`);
-
-export function WebhookToggleButton({ repoName, status, hookId }: WebhookToggleButtonProps) {
-  const queryClient = useQueryClient();
-
-  const mutation = useMutation({
-    mutationFn: status === 'active'
-      ? () => deleteWebhook({ repoName, hookId: hookId! })
-      : () => createWebhook(repoName),
-    onSuccess: () => {
-      // 操作成功后，使仓库列表的查询失效，React Query会自动重新获取最新数据
-      queryClient.invalidateQueries({ queryKey: ['repositories'] });
-      toast.success(`Webhook for ${repoName} has been ${status === 'active' ? 'disabled' : 'enabled'}.`);
-    },
-    onError: (error) => {
-      console.error("操作失败:", error);
-      toast.error(`Operation failed: ${error.message}`);
-    },
-  });
-
-  return (
-    <Button
-      variant={status === 'active' ? 'outline' : 'default'}
-      size="sm"
-      className={
-        status === 'active'
-          ? "border-danger/50 bg-transparent text-danger hover:bg-danger/10 hover:text-danger transition-colors"
-          : "bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-300 tech-glow"
-      }
-      onClick={() => mutation.mutate()}
-      disabled={mutation.isPending}
-    >
-      {mutation.isPending ? (
-        <>
-          <Loader2 className="mr-2 h-3 w-3 animate-spin" />
-          <span className="font-mono text-xs">处理中...</span>
-        </>
-      ) : status === 'active' ? (
-        <span className="font-mono text-xs">停用</span>
-      ) : (
-        <span className="font-mono text-xs">启用</span>
-      )}
-    </Button>
-  );
-}

frontend/src/components/WebhookToggleCell.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { Switch } from '@/components/ui/switch';
+import api from '@/lib/api';
+import type { Repository } from '@/services/repositoryService';
+
+interface WebhookToggleCellProps {
+  repo: Repository;
+}
+
+const createWebhook = (repoName: string) =>
+  api.post(`/repositories/${repoName}/webhook`);
+const deleteWebhook = ({ repoName, hookId }: { repoName: string; hookId: number }) =>
+  api.delete(`/repositories/${repoName}/webhook/${hookId}`);
+
+export function WebhookToggleCell({ repo }: WebhookToggleCellProps) {
+  const queryClient = useQueryClient();
+  const isActive = repo.webhook_status === 'active';
+
+  const webhookMutation = useMutation({
+    mutationFn: async () => {
+      if (isActive && repo.hook_id) {
+        return deleteWebhook({ repoName: repo.name, hookId: repo.hook_id });
+      }
+      return createWebhook(repo.name);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['repositories'] });
+      const action = isActive ? '已禁用' : '已启用';
+      toast.success(`${repo.name} 的 Webhook ${action}`);
+    },
+    onError: (error: Error) => {
+      toast.error(`操作失败: ${error.message}`);
+    },
+  });
+
+  return (
+    <div className="flex items-center gap-2">
+      {webhookMutation.isPending ? (
+        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+      ) : (
+        <Switch
+          checked={isActive}
+          onCheckedChange={() => webhookMutation.mutate()}
+          disabled={webhookMutation.isPending}
+          aria-label={isActive ? '禁用 Webhook' : '启用 Webhook'}
+        />
+      )}
+      <span className={`text-xs ${isActive ? 'text-success' : 'text-muted-foreground'}`}>
+        {isActive ? '已启用' : '未启用'}
+      </span>
+    </div>
+  );
+}

frontend/src/components/__tests__/RepositoryConfigCell.test.tsx

@@ -0,0 +1,77 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { RepositoryConfigCell } from '../RepositoryConfigCell';
+import type { Repository } from '@/services/repositoryService';
+
+const apiMocks = vi.hoisted(() => ({
+  put: vi.fn(),
+}));
+
+vi.mock('@/lib/api', () => ({
+  default: apiMocks,
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+function renderWithQuery(ui: ReactNode) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+}
+
+function makeRepo(overrides: Partial<Repository> = {}): Repository {
+  return {
+    name: 'demo-owner/demo-repo',
+    webhook_status: 'inactive',
+    hook_id: null,
+    project_review_prompt: null,
+    ...overrides,
+  };
+}
+
+describe('RepositoryConfigCell', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('opens prompt dialog and saves project prompt', async () => {
+    apiMocks.put.mockResolvedValueOnce({
+      data: {
+        success: true,
+        project_review_prompt: 'focus null safety',
+      },
+    });
+
+    const user = userEvent.setup();
+    renderWithQuery(<RepositoryConfigCell repo={makeRepo()} />);
+
+    await user.click(screen.getByRole('button', { name: /配置/i }));
+    
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('配置项目级提示词')).toBeInTheDocument();
+
+    const textarea = screen.getByRole('textbox');
+    await user.type(textarea, '  focus null safety  ');
+    await user.click(screen.getByRole('button', { name: '保存' }));
+
+    await waitFor(() => {
+      expect(apiMocks.put).toHaveBeenCalledWith(
+        '/repositories/demo-owner/demo-repo/project-prompt',
+        { project_review_prompt: 'focus null safety' }
+      );
+    });
+  });
+});

frontend/src/components/__tests__/WebhookToggleCell.test.tsx

@@ -0,0 +1,84 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { WebhookToggleCell } from '../WebhookToggleCell';
+import type { Repository } from '@/services/repositoryService';
+
+const apiMocks = vi.hoisted(() => ({
+  post: vi.fn(),
+  delete: vi.fn(),
+}));
+
+vi.mock('@/lib/api', () => ({
+  default: apiMocks,
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+function renderWithQuery(ui: ReactNode) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+}
+
+function makeRepo(overrides: Partial<Repository> = {}): Repository {
+  return {
+    name: 'demo-owner/demo-repo',
+    webhook_status: 'inactive',
+    hook_id: null,
+    project_review_prompt: null,
+    ...overrides,
+  };
+}
+
+describe('WebhookToggleCell', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('toggles webhook via switch to enable', async () => {
+    apiMocks.post.mockResolvedValueOnce({ data: { success: true } });
+
+    const user = userEvent.setup();
+    renderWithQuery(<WebhookToggleCell repo={makeRepo()} />);
+
+    const switchEl = screen.getByRole('switch');
+    expect(switchEl).toHaveAttribute('aria-checked', 'false');
+    expect(screen.getByText('未启用')).toBeInTheDocument();
+    
+    await user.click(switchEl);
+
+    await waitFor(() => {
+      expect(apiMocks.post).toHaveBeenCalledWith('/repositories/demo-owner/demo-repo/webhook');
+    });
+  });
+
+  it('toggles webhook via switch to disable', async () => {
+    apiMocks.delete.mockResolvedValueOnce({ data: { success: true } });
+
+    const user = userEvent.setup();
+    renderWithQuery(<WebhookToggleCell repo={makeRepo({ webhook_status: 'active', hook_id: 123 })} />);
+
+    const switchEl = screen.getByRole('switch');
+    expect(switchEl).toHaveAttribute('aria-checked', 'true');
+    expect(screen.getByText('已启用')).toBeInTheDocument();
+    
+    await user.click(switchEl);
+
+    await waitFor(() => {
+      expect(apiMocks.delete).toHaveBeenCalledWith('/repositories/demo-owner/demo-repo/webhook/123');
+    });
+  });
+});

frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

frontend/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

frontend/src/services/repositoryService.ts

@@ -4,6 +4,7 @@ export interface Repository {
   name: string;
   webhook_status: 'active' | 'inactive';
   hook_id: number | null;
+  project_review_prompt: string | null;
 }
 
 export interface PaginatedRepositories {
@@ -19,3 +20,13 @@ export const fetchRepositories = async (page: number = 1, query: string = ""): P
   });
   return data;
 };
+
+export const updateRepositoryProjectPrompt = async (
+  repoName: string,
+  projectReviewPrompt: string
+): Promise<{ success: boolean; project_review_prompt: string | null }> => {
+  const { data } = await api.put(`/repositories/${repoName}/project-prompt`, {
+    project_review_prompt: projectReviewPrompt,
+  });
+  return data;
+};

frontend/tests/visual/fixtures/mockApi.ts

@@ -2,8 +2,18 @@ import type { Page, Route } from '@playwright/test';
 
 const repositories = {
   data: [
-    { name: 'demo-repo-1', webhook_status: 'active', hook_id: 101 },
-    { name: 'demo-repo-2', webhook_status: 'inactive', hook_id: null },
+    {
+      name: 'demo-repo-1',
+      webhook_status: 'active',
+      hook_id: 101,
+      project_review_prompt: '重点检查 API 错误处理与鉴权边界。',
+    },
+    {
+      name: 'demo-repo-2',
+      webhook_status: 'inactive',
+      hook_id: null,
+      project_review_prompt: null,
+    },
   ],
   totalCount: 2,
   page: 1,
@@ -296,14 +306,27 @@ export async function installVisualApiMocks(page: Page) {
       return json(route, repositories);
     }
 
-    if (method === 'POST' && /\/admin\/api\/repositories\/[^/]+\/webhook$/.test(path)) {
+    if (method === 'POST' && /\/admin\/api\/repositories\/[^/]+(?:\/[^/]+)?\/webhook$/.test(path)) {
       return json(route, { hook_id: 101, webhook_status: 'active' });
     }
 
-    if (method === 'DELETE' && /\/admin\/api\/repositories\/[^/]+\/webhook\/\d+$/.test(path)) {
+    if (
+      method === 'DELETE' &&
+      /\/admin\/api\/repositories\/[^/]+(?:\/[^/]+)?\/webhook\/\d+$/.test(path)
+    ) {
       return route.fulfill({ status: 204, body: '' });
     }
 
+    if (
+      method === 'PUT' &&
+      /\/admin\/api\/repositories\/[^/]+(?:\/[^/]+)?\/project-prompt$/.test(path)
+    ) {
+      return json(route, {
+        success: true,
+        project_review_prompt: 'updated prompt',
+      });
+    }
+
     if (method === 'GET' && path.endsWith('/admin/api/config')) {
       return json(route, configResponse);
     }