diff --git a/app/api/codegen/create/route.ts b/app/api/codegen/create/route.ts
new file mode 100644
index 00000000..a49d3015
--- /dev/null
+++ b/app/api/codegen/create/route.ts
@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from "next/server"
+import { connectToDatabase } from "@/lib/db/mongo"
+import { createCodegen } from "@/lib/db/codegen/mutaitons"
+import { validateSession } from "@/lib/auth/middleware"
+
+export async function POST(req: NextRequest) {
+  try {
+    const authError = await validateSession()
+    if (authError) return authError
+    await connectToDatabase()
+    const body = await req.json()
+    if (!body || typeof body !== "object") {
+      return NextResponse.json({ error: "Invalid body" }, { status: 400 })
+    }
+    await createCodegen(body)
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    return NextResponse.json({ error: (error as Error).message }, { status: 500 })
+  }
+}
+
+export const dynamic = "force-dynamic"
\ No newline at end of file
diff --git a/app/api/codegen/delete/route.ts b/app/api/codegen/delete/route.ts
new file mode 100644
index 00000000..26071784
--- /dev/null
+++ b/app/api/codegen/delete/route.ts
@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from "next/server"
+import { connectToDatabase } from "@/lib/db/mongo"
+import { CodegenModel } from "@/lib/db/codegen/schema"
+import { validateSession } from "@/lib/auth/middleware"
+
+export async function POST(req: NextRequest) {
+  try {
+    const authError = await validateSession()
+    if (authError) return authError
+    await connectToDatabase()
+    const body = await req.json()
+    if (!body || typeof body !== "object" || !body._id) {
+      return NextResponse.json({ error: "Missing _id in body" }, { status: 400 })
+    }
+    await CodegenModel.findByIdAndDelete(body._id)
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    return NextResponse.json({ error: (error as Error).message }, { status: 500 })
+  }
+}
+
+export const dynamic = "force-dynamic"
\ No newline at end of file
diff --git a/app/api/codegen/edit/route.ts b/app/api/codegen/edit/route.ts
new file mode 100644
index 00000000..db49e018
--- /dev/null
+++ b/app/api/codegen/edit/route.ts
@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from "next/server"
+import { connectToDatabase } from "@/lib/db/mongo"
+import { upsertCodegen } from "@/lib/db/codegen/mutaitons"
+import { validateSession } from "@/lib/auth/middleware"
+
+export async function POST(req: NextRequest) {
+  try {
+    const authError = await validateSession()
+    if (authError) return authError
+    await connectToDatabase()
+    const body = await req.json()
+
+    // 验证请求体和_id
+    if (!body || typeof body !== "object") {
+      return NextResponse.json({ error: "无效的请求体" }, { status: 400 })
+    }
+
+    if (!body._id) {
+      return NextResponse.json({ error: "缺少必要的_id字段" }, { status: 400 })
+    }
+
+    // 确保_id是有效的MongoDB ObjectId格式
+    if (!/^[0-9a-fA-F]{24}$/.test(body._id)) {
+      return NextResponse.json({ error: "无效的_id格式" }, { status: 400 })
+    }
+
+    const result = await upsertCodegen(body)
+
+    if (!result) {
+      return NextResponse.json({ error: "更新失败，未找到对应ID的记录" }, { status: 404 })
+    }
+
+    return NextResponse.json({
+      success: true,
+      data: result,
+      message: "Codegen更新成功"
+    })
+  } catch (error) {
+    console.error("编辑Codegen失败:", error)
+    return NextResponse.json({
+      error: (error as Error).message || "服务器内部错误",
+      message: "Codegen更新失败"
+    }, { status: 500 })
+  }
+}
+
+export const dynamic = "force-dynamic"
\ No newline at end of file
diff --git a/app/main/layout.tsx b/app/main/layout.tsx
index cb67806f..7c6f63cf 100644
--- a/app/main/layout.tsx
+++ b/app/main/layout.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useCallback } from "react"
+import React from "react"
 import { Loading } from "@/components/biz/Loading"
 import useRoutes from "@/hooks/use-routes"
 import { useSession, signOut } from "next-auth/react"
@@ -8,7 +8,6 @@ import { redirect } from "next/navigation"
 import { useEffect } from "react"
 import { AppSidebarLayout } from "@/components/biz/AppSidebarLayout"
 import {
-  useProviderModelModal,
   ProviderModelModalProvider,
 } from "@/app/commons/ProviderModelModal"
 import { type NavMainItem } from "@/components/biz/AppSidebarLayout/interface"
@@ -26,29 +25,12 @@ function MainLayoutContent({
   }
 }) {
   const routes = useRoutes()
-  const { openModal } = useProviderModelModal() // now it's safe to call
-
-  // handle nav item click
-  const handleNavItemClick = useCallback(
-    (url: string) => {
-      // if click is settings item
-      if (url === "/main/settings") {
-        openModal() // call method to open modal
-        return true // return true means handled, no need to navigate
-      }
-
-      // return false means not handled, need to navigate normally
-      return false
-    },
-    [openModal],
-  )
 
   return (
     <AppSidebarLayout
       navMain={routes as NavMainItem[]}
       user={user}
       onLogout={signOut}
-      onNavItemClick={handleNavItemClick}
     >
       {children}
     </AppSidebarLayout>
diff --git a/app/main/settings/CodegenTable.tsx b/app/main/settings/CodegenTable.tsx
new file mode 100644
index 00000000..a97ff73a
--- /dev/null
+++ b/app/main/settings/CodegenTable.tsx
@@ -0,0 +1,229 @@
+import { useEffect, useState } from "react"
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from "@/artifacts/shadcn-ui-renderer/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { getCodegenList, getCodegenDetail, createCodegen, editCodegen, deleteCodegen } from "@/app/services/codegen/codegen.service"
+import CodegenEditDialog from "./components/CodegenEditDialog"
+import DeleteConfirmDialog from "./components/DeleteConfirmDialog"
+import { Codegen, CodegenListItem } from "./components/types"
+
+export default function CodegenTable() {
+  const [list, setList] = useState<CodegenListItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [open, setOpen] = useState(false)
+  const [editing, setEditing] = useState<CodegenListItem | null>(null)
+  const [form, setForm] = useState<Partial<Codegen>>({
+    title: "",
+    description: "",
+    fullStack: "React",
+    guides: [],
+    model: "",
+    codeRendererUrl: "",
+    rules: []
+  })
+  const [formLoading, setFormLoading] = useState(false)
+  const [formError, setFormError] = useState<string | null>(null)
+  // 删除确认相关状态
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
+  const [itemToDelete, setItemToDelete] = useState<string | undefined>(undefined)
+  const [deleteLoading, setDeleteLoading] = useState(false)
+
+  // Codegen 列表
+  const load = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      const res = await getCodegenList({ page: 1, pageSize: 100 })
+      // 类型转换以满足TypeScript要求
+      setList(res.data || [])
+    } catch (err) {
+      console.error("加载Codegen列表失败:", err)
+      setError("加载数据失败，请稍后重试")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { load() }, [])
+
+  // 打开弹窗
+  const handleEdit = async (item: CodegenListItem | null) => {
+    if (!item) {
+      // 新增时使用默认值
+      setEditing(null)
+      setForm({
+        title: "",
+        description: "",
+        fullStack: "React",
+        guides: [],
+        model: "",
+        codeRendererUrl: "",
+        rules: []
+      })
+      setOpen(true)
+      return
+    }
+
+    try {
+      // 编辑时通过detail接口获取完整信息
+      setFormLoading(true)
+      setFormError(null)
+      const result = await getCodegenDetail({ id: item._id || "" })
+      if (result && result.data) {
+        const detailData = result.data as Partial<Codegen>
+        setEditing(item)
+        setForm({
+          ...detailData,
+          guides: detailData.guides || [],
+          model: detailData.model || "",
+          rules: detailData.rules || []
+        })
+      } else {
+        throw new Error("获取详情失败")
+      }
+    } catch (error) {
+      console.error("获取Codegen详情失败:", error)
+      setFormError("获取详情失败，请重试")
+      // 降级使用列表数据
+      setEditing(item)
+      setForm({
+        ...item,
+        guides: item.guides || [],
+        model: "",
+        rules: item.rules || []
+      })
+    } finally {
+      setFormLoading(false)
+      setOpen(true)
+    }
+  }
+
+  // 提交
+  const handleSubmit = async () => {
+    try {
+      // 确保所有必需字段都有值
+      if (!form.title || !form.description || !form.model || !form.codeRendererUrl) {
+        setFormError("请填写所有必填字段：标题、描述、模型和渲染器URL")
+        return
+      }
+
+      // 准备提交数据，确保guides和rules字段是数组
+      const submitData = {
+        ...form,
+        guides: Array.isArray(form.guides) ? form.guides : [],
+        rules: Array.isArray(form.rules) ? form.rules : []
+      }
+
+      if (editing && editing._id) {
+        await editCodegen({ ...submitData, _id: editing._id })
+      } else {
+        await createCodegen(submitData)
+      }
+      setOpen(false)
+      load()
+    } catch (err) {
+      console.error("保存Codegen失败:", err)
+      setFormError((err as Error).message || "保存失败，请重试")
+    }
+  }
+
+  // 打开删除确认对话框
+  const openDeleteConfirm = (item?: CodegenListItem) => {
+    if (!item || !item._id) {
+      console.error("删除失败: 缺少ID或项目信息")
+      return
+    }
+    setItemToDelete(item._id)
+    setDeleteConfirmOpen(true)
+  }
+
+  // 执行删除操作
+  const confirmDelete = async () => {
+    if (!itemToDelete) return
+
+    try {
+      setDeleteLoading(true)
+      await deleteCodegen(itemToDelete)
+      setDeleteConfirmOpen(false)
+      setItemToDelete(undefined)
+      await load() // 重新加载列表
+    } catch (err) {
+      console.error("删除Codegen失败:", err)
+      // 这里可以添加错误提示UI
+    } finally {
+      setDeleteLoading(false)
+    }
+  }
+
+  if (loading) {
+    return <div className="p-4 text-center">加载中...</div>
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 text-center text-red-500">
+        {error}
+        <Button onClick={load} className="ml-2" size="sm">重试</Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4">
+      <div className="my-4 flex justify-end">
+        <Button onClick={() => handleEdit(null)}>新增</Button>
+      </div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>标题</TableHead>
+            <TableHead>描述</TableHead>
+            <TableHead>类型</TableHead>
+            <TableHead>操作</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {list.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={6} className="text-center py-4">暂无数据</TableCell>
+            </TableRow>
+          ) : (
+            list.map(item => (
+              <TableRow key={item._id}>
+                <TableCell>{item.title}</TableCell>
+                <TableCell>{item.description}</TableCell>
+                <TableCell>{item.fullStack}</TableCell>
+                <TableCell>
+                  <Button size="sm" onClick={() => handleEdit(item)} className="mr-2">编辑</Button>
+                  <Button size="sm" variant="destructive" onClick={() => openDeleteConfirm(item)}>删除</Button>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+
+      {/* 使用抽离的编辑对话框组件 */}
+      <CodegenEditDialog
+        open={open}
+        onOpenChange={setOpen}
+        editing={editing}
+        formData={form}
+        formLoading={formLoading}
+        formError={formError}
+        onFormChange={setForm}
+        onSubmit={handleSubmit}
+        onRetry={() => handleEdit(editing)}
+      />
+
+      {/* 使用抽离的删除确认对话框组件 */}
+      <DeleteConfirmDialog
+        open={deleteConfirmOpen}
+        onOpenChange={setDeleteConfirmOpen}
+        isDeleting={deleteLoading}
+        onConfirm={confirmDelete}
+        itemName={list.find(item => item._id === itemToDelete)?.title}
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/main/settings/components/CodegenEditDialog.tsx b/app/main/settings/components/CodegenEditDialog.tsx
new file mode 100644
index 00000000..75b4b2a2
--- /dev/null
+++ b/app/main/settings/components/CodegenEditDialog.tsx
@@ -0,0 +1,237 @@
+import React from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import GuidesConfig from "./GuidesConfig"
+import RulesConfig from "./RulesConfig"
+import { Codegen, CodegenListItem } from "./types"
+import { Loader2 } from "lucide-react"
+
+interface CodegenEditDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  editing: CodegenListItem | null
+  formData: Partial<Codegen>
+  formLoading: boolean
+  formError: string | null
+  onFormChange: (form: Partial<Codegen>) => void
+  onSubmit: () => Promise<void>
+  onRetry: () => void
+}
+
+export default function CodegenEditDialog({
+  open,
+  onOpenChange,
+  editing,
+  formData,
+  formLoading,
+  formError,
+  onFormChange,
+  onSubmit,
+  onRetry
+}: CodegenEditDialogProps) {
+  // 选项卡状态
+  const [activeTab, setActiveTab] = React.useState("basic")
+
+  // 表单字段更新处理函数
+  const handleInputChange = (field: string, value: any) => {
+    onFormChange({ ...formData, [field]: value })
+  }
+
+  // 表单验证
+  const isFormValid = () => {
+    return !!(
+      formData.title &&
+      formData.description &&
+      formData.codeRendererUrl
+    )
+  }
+
+  // 关闭时重置选项卡
+  React.useEffect(() => {
+    if (!open) {
+      // 延迟重置，确保动画结束后再重置
+      const timer = setTimeout(() => {
+        setActiveTab("basic")
+      }, 300)
+      return () => clearTimeout(timer)
+    }
+  }, [open])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl h-[90vh] overflow-hidden flex flex-col p-0">
+        {/* 固定头部 */}
+        <DialogHeader className="flex flex-row items-center justify-between pb-2 border-b p-6">
+          <div>
+            <DialogTitle className="text-xl">
+              {editing ? "编辑" : "新增"} Codegen
+            </DialogTitle>
+            <DialogDescription className="mt-1.5">
+              {editing ? "修改现有的Codegen配置" : "添加新的Codegen配置并设置相关参数"}
+            </DialogDescription>
+          </div>
+        </DialogHeader>
+
+        {/* 可滚动的内容区域 */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {formLoading ? (
+            <div className="py-12 text-center flex flex-col items-center justify-center space-y-4">
+              <Loader2 className="h-10 w-10 text-primary animate-spin" />
+              <p className="text-muted-foreground">正在加载详情...</p>
+            </div>
+          ) : formError ? (
+            <div className="py-12 text-center flex flex-col items-center justify-center">
+              <div className="bg-red-50 dark:bg-red-950/50 text-red-600 dark:text-red-400 rounded-lg p-4 mb-4 max-w-md">
+                <p className="font-medium">{formError}</p>
+                <p className="text-sm mt-1 text-red-500 dark:text-red-300">请重试或检查网络连接</p>
+              </div>
+              <Button
+                onClick={onRetry}
+                variant="outline"
+                className="mt-2"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                  <path d="M3 3v5h5" />
+                  <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+                  <path d="M16 21h5v-5" />
+                </svg>
+                重新获取详情
+              </Button>
+            </div>
+          ) : (
+            <div className="pt-2">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <TabsList className="grid w-full grid-cols-3 mb-6">
+                  <TabsTrigger value="basic" className="h-10">基本信息</TabsTrigger>
+                  <TabsTrigger value="guides" className="h-10">指南配置</TabsTrigger>
+                  <TabsTrigger value="rules" className="h-10">规则配置</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="basic" className="space-y-4 pt-2">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <p className="text-sm font-medium mb-1.5">标题 <span className="text-red-500">*</span></p>
+                      <Input
+                        placeholder="输入标题"
+                        value={formData.title || ""}
+                        onChange={e => handleInputChange("title", e.target.value)}
+                      />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium mb-1.5">框架类型 <span className="text-red-500">*</span></p>
+                      <Select
+                        value={formData.fullStack || "React"}
+                        onValueChange={value => handleInputChange("fullStack", value)}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="选择框架" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="React">React</SelectItem>
+                          <SelectItem value="Vue">Vue</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <div>
+                    <p className="text-sm font-medium mb-1.5">描述 <span className="text-red-500">*</span></p>
+                    <Textarea
+                      placeholder="描述该Codegen的用途和功能"
+                      value={formData.description || ""}
+                      onChange={e => handleInputChange("description", e.target.value)}
+                      className="min-h-[100px]"
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <p className="text-sm font-medium mb-1.5">推荐模型</p>
+                      <Input
+                        placeholder="例如: gpt-4-turbo"
+                        value={formData.model || ""}
+                        onChange={e => handleInputChange("model", e.target.value)}
+                      />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium mb-1.5">渲染器URL <span className="text-red-500">*</span></p>
+                      <Input
+                        placeholder="渲染器URL地址"
+                        value={formData.codeRendererUrl || ""}
+                        onChange={e => handleInputChange("codeRendererUrl", e.target.value)}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="text-xs text-muted-foreground mt-2">
+                    <span className="text-red-500">*</span> 表示必填字段
+                  </div>
+                </TabsContent>
+
+                <TabsContent value="guides" className="pt-2">
+                  <p className="text-sm text-muted-foreground mb-4">
+                    配置指南将会辅助AI更好地理解开发需求和规范
+                  </p>
+                  <GuidesConfig
+                    guides={formData.guides || []}
+                    onChange={(guides) => handleInputChange("guides", guides)}
+                  />
+                </TabsContent>
+
+                <TabsContent value="rules" className="pt-2">
+                  <p className="text-sm text-muted-foreground mb-4">
+                    配置规则将决定AI在生成代码时应遵循的约束和标准
+                  </p>
+                  <RulesConfig
+                    rules={formData.rules || []}
+                    onChange={(rules) => handleInputChange("rules", rules)}
+                  />
+                </TabsContent>
+              </Tabs>
+            </div>
+          )}
+        </div>
+
+        {/* 固定底部 */}
+        <DialogFooter className="flex-shrink-0 px-6 py-4 border-t bg-background flex items-center justify-between">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            取消
+          </Button>
+          <div className="flex gap-2">
+            {activeTab !== "basic" && (
+              <Button
+                variant="outline"
+                onClick={() => setActiveTab(activeTab === "rules" ? "guides" : "basic")}
+              >
+                上一步
+              </Button>
+            )}
+            {activeTab !== "rules" && (
+              <Button
+                variant="outline"
+                onClick={() => setActiveTab(activeTab === "basic" ? "guides" : "rules")}
+              >
+                下一步
+              </Button>
+            )}
+          </div>
+          <Button
+            onClick={onSubmit}
+            disabled={!isFormValid()}
+            className="ml-auto"
+          >
+            {editing ? "保存更改" : "创建"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/app/main/settings/components/DeleteConfirmDialog.tsx b/app/main/settings/components/DeleteConfirmDialog.tsx
new file mode 100644
index 00000000..606aca15
--- /dev/null
+++ b/app/main/settings/components/DeleteConfirmDialog.tsx
@@ -0,0 +1,70 @@
+import React from "react"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Loader2 } from "lucide-react"
+
+interface DeleteConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  isDeleting: boolean
+  onConfirm: () => Promise<void>
+  title?: string
+  description?: string
+  itemName?: string
+}
+
+export default function DeleteConfirmDialog({
+  open,
+  onOpenChange,
+  isDeleting,
+  onConfirm,
+  title = "确认删除",
+  itemName
+}: DeleteConfirmDialogProps) {
+  // 在确认删除后防止多次点击
+  const handleConfirm = React.useCallback(async () => {
+    if (isDeleting) return
+    await onConfirm()
+  }, [isDeleting, onConfirm])
+
+  return (
+    <Dialog open={open} onOpenChange={isDeleting ? undefined : onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>
+            {itemName ? (
+              <>
+                您确定要删除 <span className="font-medium">&ldquo;{itemName}&rdquo;</span> 吗？
+                此操作无法撤销。
+              </>
+            ) : (
+              <>确定要删除此配置吗？此操作无法撤销。</>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="mt-4">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isDeleting}
+          >
+            取消
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleConfirm}
+            disabled={isDeleting}
+          >
+            {isDeleting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                删除中...
+              </span>
+            ) : "删除"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/app/main/settings/components/GuidesConfig.tsx b/app/main/settings/components/GuidesConfig.tsx
new file mode 100644
index 00000000..4df7bdd8
--- /dev/null
+++ b/app/main/settings/components/GuidesConfig.tsx
@@ -0,0 +1,206 @@
+import React, { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { PlusCircle, Trash2, ArrowUp, ArrowDown, ExternalLink } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Textarea } from "@/components/ui/textarea"
+
+interface GuidesConfigProps {
+  guides: string[]
+  onChange: (guides: string[]) => void
+}
+
+export default function GuidesConfig({ guides = [], onChange }: GuidesConfigProps) {
+  const [inputValue, setInputValue] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  // 添加指南
+  const addGuide = () => {
+    if (!inputValue.trim()) {
+      setError("指南内容不能为空")
+      return
+    }
+
+    // 检查重复
+    if (guides.includes(inputValue.trim())) {
+      setError("该指南已存在")
+      return
+    }
+
+    onChange([...guides, inputValue.trim()])
+    setInputValue("")
+    setError(null)
+  }
+
+  // 删除指南
+  const removeGuide = (index: number) => {
+    onChange(guides.filter((_, i) => i !== index))
+  }
+
+  // 上移指南
+  const moveUp = (index: number) => {
+    if (index <= 0) return
+    const newGuides = [...guides]
+    const temp = newGuides[index]
+    newGuides[index] = newGuides[index - 1]
+    newGuides[index - 1] = temp
+    onChange(newGuides)
+  }
+
+  // 下移指南
+  const moveDown = (index: number) => {
+    if (index >= guides.length - 1) return
+    const newGuides = [...guides]
+    const temp = newGuides[index]
+    newGuides[index] = newGuides[index + 1]
+    newGuides[index + 1] = temp
+    onChange(newGuides)
+  }
+
+  // 判断链接类型并获取格式化显示
+  const getGuideDisplay = (guide: string) => {
+    const isUrl = guide.startsWith('http://') || guide.startsWith('https://')
+
+    if (isUrl) {
+      // 截取域名部分显示
+      try {
+        const url = new URL(guide)
+        return (
+          <div className="flex items-center gap-1">
+            <ExternalLink className="h-3 w-3" />
+            <span className="truncate max-w-[200px]" title={guide}>
+              {url.hostname}{url.pathname === '/' ? '' : url.pathname}
+            </span>
+          </div>
+        )
+      } catch {
+        return guide
+      }
+    }
+
+    return guide
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-col space-y-2">
+        <div className="flex flex-col gap-2">
+          <Textarea
+            placeholder="添加指南文本"
+            value={inputValue}
+            onChange={(e) => {
+              setInputValue(e.target.value)
+              if (error) setError(null)
+            }}
+            onKeyDown={(e) => {
+              // Ctrl+Enter 或 Cmd+Enter 提交
+              if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+                e.preventDefault()
+                addGuide()
+              }
+            }}
+            className={`min-h-[80px] ${error ? "border-red-500" : ""}`}
+          />
+          <div className="flex justify-between items-center">
+            {error && (
+              <p className="text-red-500 text-xs">{error}</p>
+            )}
+            <div className={`${error ? 'flex-1 text-right' : 'w-full'}`}>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={addGuide}
+                className="ml-auto"
+              >
+                <PlusCircle className="h-4 w-4 mr-1" />
+                添加指南
+              </Button>
+            </div>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            提示：可以输入URL链接或指南文本，按 Ctrl+Enter 快速添加
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {guides.map((guide, i) => (
+          <div
+            key={i}
+            className="bg-primary/5 border border-primary/20 text-primary rounded-md flex items-center justify-between overflow-hidden group"
+          >
+            <div className="flex-1 px-3 py-2 truncate">
+              {getGuideDisplay(guide)}
+            </div>
+            <div className="flex items-center pr-1">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      className="h-7 w-7 p-0 opacity-70 hover:opacity-100"
+                      onClick={() => moveUp(i)}
+                      disabled={i === 0}
+                    >
+                      <ArrowUp className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>上移</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      className="h-7 w-7 p-0 opacity-70 hover:opacity-100"
+                      onClick={() => moveDown(i)}
+                      disabled={i === guides.length - 1}
+                    >
+                      <ArrowDown className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>下移</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      className="h-7 w-7 p-0 text-red-500 opacity-70 hover:opacity-100"
+                      onClick={() => removeGuide(i)}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>删除</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+          </div>
+        ))}
+
+        {guides.length === 0 && (
+          <div className="text-center py-6 text-muted-foreground border border-dashed rounded-md">
+            暂无指南配置
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/main/settings/components/PrivateComponentsConfig.tsx b/app/main/settings/components/PrivateComponentsConfig.tsx
new file mode 100644
index 00000000..48f2c62a
--- /dev/null
+++ b/app/main/settings/components/PrivateComponentsConfig.tsx
@@ -0,0 +1,529 @@
+import React, { useState, useRef, useEffect } from "react"
+import { AlertCircle } from "lucide-react"
+import { Rule } from "./types"
+import {
+  LibrarySelector,
+  ComponentList,
+  AddLibraryDialog,
+  DocsEditor,
+  ImportExportDialog,
+  PreviewDialog
+} from "./private-components"
+
+interface PrivateComponentsConfigProps {
+  rule: Rule
+  index: number
+  updateRule: (index: number, field: string, value: any) => void
+}
+
+export default function PrivateComponentsConfig({ rule, index, updateRule }: PrivateComponentsConfigProps) {
+  // 组件库列表状态
+  const [libraries, setLibraries] = useState<string[]>(() => {
+    if (!rule.docs) return [];
+    return Object.keys(rule.docs).length > 0 ? Object.keys(rule.docs) : [];
+  });
+
+  // 当前选中的组件库
+  const [selectedLibrary, setSelectedLibrary] = useState<string>(libraries[0] || "");
+
+  // 组件添加相关状态
+  const [componentInput, setComponentInput] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  // 新组件库添加状态
+  const [showAddLibrary, setShowAddLibrary] = useState(false)
+  const [newLibraryName, setNewLibraryName] = useState("")
+  const [libraryError, setLibraryError] = useState<string | null>(null)
+
+  // 文档编辑相关状态
+  const [showDocsEditor, setShowDocsEditor] = useState<{componentName: string, libraryName: string} | null>(null)
+  const [componentDocs, setComponentDocs] = useState<{description: string, api: string}>({
+    description: '',
+    api: ''
+  })
+
+  // 文档预览状态
+  const [previewDocs, setPreviewDocs] = useState<{isOpen: boolean, componentName: string, libraryName: string, docs: {description: string, api: string}} | null>(null)
+
+  // 其他状态
+  const [copiedDocName, setCopiedDocName] = useState<string | null>(null)
+  const [showImportJson, setShowImportJson] = useState(false)
+  const [jsonInput, setJsonInput] = useState("")
+  const [jsonError, setJsonError] = useState<string | null>(null)
+  const [importedComponents, setImportedComponents] = useState<{name: string, library: string}[]>([])
+
+  // 创建一个ref对象的Map，用于存储每个组件的引用
+  const componentRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+
+  // 在组件导入后，清除高亮效果
+  useEffect(() => {
+    if (importedComponents.length > 0) {
+      const timer = setTimeout(() => {
+        setImportedComponents([])
+      }, 5000) // 5秒后清除高亮
+      return () => clearTimeout(timer)
+    }
+  }, [importedComponents])
+
+  // 添加新的组件库
+  const addNewLibrary = () => {
+    if (!newLibraryName.trim()) {
+      setLibraryError("组件库名称不能为空")
+      return
+    }
+
+    if (libraries.includes(newLibraryName.trim())) {
+      setLibraryError("该组件库已存在")
+      return
+    }
+
+    // 更新组件库列表
+    const updatedLibraries = [...libraries, newLibraryName.trim()]
+    setLibraries(updatedLibraries)
+
+    // 添加新的组件库到docs中
+    const updatedDocs = { ...(rule.docs || {}) }
+    updatedDocs[newLibraryName.trim()] = {}
+    updateRule(index, "docs", updatedDocs)
+
+    // 选择新添加的组件库
+    setSelectedLibrary(newLibraryName.trim())
+
+    // 重置状态
+    setNewLibraryName("")
+    setShowAddLibrary(false)
+    setLibraryError(null)
+  }
+
+  // 删除组件库
+  const deleteLibrary = (libraryName: string) => {
+    if (!rule.docs || !rule.docs[libraryName]) return
+
+    // 在删除前询问确认
+    if (!window.confirm(`确定要删除组件库 "${libraryName}" 及其所有组件吗？`)) {
+      return
+    }
+
+    // 更新组件库列表
+    const updatedLibraries = libraries.filter(lib => lib !== libraryName)
+    setLibraries(updatedLibraries)
+
+    // 从docs中删除组件库
+    const updatedDocs = { ...rule.docs }
+    delete updatedDocs[libraryName]
+    updateRule(index, "docs", updatedDocs)
+
+    // 如果删除的是当前选中的组件库，则选择第一个组件库
+    if (selectedLibrary === libraryName) {
+      setSelectedLibrary(updatedLibraries[0] || "")
+    }
+
+    // 从dataSet中删除该组件库的所有组件
+    const componentsInLibrary = getComponentsInLibrary(libraryName)
+    if (componentsInLibrary.length > 0 && rule.dataSet) {
+      const updatedDataSet = rule.dataSet.filter(comp => !componentsInLibrary.includes(comp))
+      updateRule(index, "dataSet", updatedDataSet)
+    }
+  }
+
+  // 获取指定组件库中的所有组件
+  const getComponentsInLibrary = (libraryName: string): string[] => {
+    if (!rule.docs || !rule.docs[libraryName]) return []
+
+    return Object.keys(rule.docs[libraryName])
+  }
+
+  // 获取组件所属的库
+  const getComponentLibrary = (componentName: string): string | undefined => {
+    if (!rule.docs) return undefined
+
+    // 遍历所有库，查找组件
+    for (const libraryName in rule.docs) {
+      if (rule.docs[libraryName]?.[componentName]) {
+        return libraryName
+      }
+    }
+
+    return undefined
+  }
+
+  // 添加组件到 dataSet 和当前选中的组件库
+  const addComponentToDataSet = (component: string) => {
+    if (!component.trim()) {
+      setError("组件名不能为空")
+      return
+    }
+
+    const dataSet = rule.dataSet || []
+    if (dataSet.includes(component.trim())) {
+      setError("该组件已存在")
+      return
+    }
+
+    // 添加到dataSet
+    updateRule(index, "dataSet", [...dataSet, component.trim()])
+
+    // 创建组件的空文档结构到选中的组件库
+    if (!rule.docs) {
+      updateRule(index, "docs", { [selectedLibrary]: { [component.trim()]: { description: '', api: '' } } })
+    } else if (!rule.docs[selectedLibrary]) {
+      const updatedDocs = { ...rule.docs, [selectedLibrary]: { [component.trim()]: { description: '', api: '' } } }
+      updateRule(index, "docs", updatedDocs)
+    } else {
+      const updatedDocs = {
+        ...rule.docs,
+        [selectedLibrary]: {
+          ...rule.docs[selectedLibrary],
+          [component.trim()]: { description: '', api: '' }
+        }
+      }
+      updateRule(index, "docs", updatedDocs)
+    }
+
+    // 高亮新添加的组件
+    setImportedComponents([{ name: component.trim(), library: selectedLibrary }])
+
+    setComponentInput("")
+    setError(null)
+  }
+
+  // 导入JSON文档
+  const importFromJson = () => {
+    try {
+      const data = JSON.parse(jsonInput)
+
+      // 验证格式
+      if (typeof data !== 'object' || data === null) {
+        setJsonError("JSON格式不正确")
+        return
+      }
+
+      // 合并docs
+      const currentDocs = rule.docs || {}
+      const updatedDocs = { ...currentDocs }
+      const addedComponents: {name: string, library: string}[] = []
+
+      let addedCount = 0
+
+      // 如果数据是一个组件库的格式
+      if (Object.values(data).some(value =>
+        typeof value === 'object' && value &&
+        ('description' in value || 'api' in value))) {
+
+        // 单个组件库的情况
+        const libraryName = selectedLibrary
+        updatedDocs[libraryName] = updatedDocs[libraryName] || {}
+
+        Object.keys(data).forEach(componentName => {
+          const component = data[componentName]
+
+          // 确保组件值是对象且有必要的字段
+          if (typeof component === 'object' && component &&
+              (component.description !== undefined || component.api !== undefined)) {
+
+            updatedDocs[libraryName][componentName] = {
+              description: typeof component.description === 'string' ? component.description : '',
+              api: typeof component.api === 'string' ? component.api : ''
+            }
+
+            // 如果组件不在数据集中，添加它
+            const dataSet = rule.dataSet || []
+            if (!dataSet.includes(componentName)) {
+              updateRule(index, "dataSet", [...dataSet, componentName])
+            }
+
+            addedComponents.push({name: componentName, library: libraryName})
+            addedCount++
+          }
+        })
+      } else {
+        // 多个组件库的情况
+        Object.keys(data).forEach(libraryName => {
+          const library = data[libraryName]
+
+          if (typeof library === 'object' && library) {
+            // 确保库存在于列表中
+            if (!libraries.includes(libraryName)) {
+              setLibraries([...libraries, libraryName])
+            }
+
+            updatedDocs[libraryName] = updatedDocs[libraryName] || {}
+
+            Object.keys(library).forEach(componentName => {
+              const component = library[componentName]
+
+              if (typeof component === 'object' && component &&
+                  (component.description !== undefined || component.api !== undefined)) {
+
+                updatedDocs[libraryName][componentName] = {
+                  description: typeof component.description === 'string' ? component.description : '',
+                  api: typeof component.api === 'string' ? component.api : ''
+                }
+
+                // 如果组件不在数据集中，添加它
+                const dataSet = rule.dataSet || []
+                if (!dataSet.includes(componentName)) {
+                  updateRule(index, "dataSet", [...dataSet, componentName])
+                }
+
+                addedComponents.push({name: componentName, library: libraryName})
+                addedCount++
+              }
+            })
+          }
+        })
+      }
+
+      if (addedCount === 0) {
+        setJsonError("未发现有效的组件文档")
+        return
+      }
+
+      updateRule(index, "docs", updatedDocs)
+
+      // 设置导入的组件列表，用于高亮显示
+      setImportedComponents(addedComponents)
+
+      // 关闭导入对话框
+      setShowImportJson(false)
+      setJsonInput("")
+      setJsonError(null)
+
+      // 等待组件渲染完成后滚动到第一个导入的组件
+      setTimeout(() => {
+        if (addedComponents.length > 0) {
+          const firstComponent = addedComponents[0].name
+          const ref = componentRefs.current.get(firstComponent)
+          if (ref) {
+            ref.scrollIntoView({ behavior: 'smooth', block: 'center' })
+          }
+        }
+      }, 300)
+    } catch (e) {
+      setJsonError("JSON解析错误: " + (e as Error).message)
+    }
+  }
+
+  // 为私有组件添加文档
+  const addDocsToPrivateComponent = () => {
+    if (!showDocsEditor) return
+
+    // 如果docs不存在，创建一个空对象
+    const docs = rule.docs || {}
+    const updatedDocs = {
+      ...docs,
+      [showDocsEditor.libraryName]: {
+        ...(docs[showDocsEditor.libraryName] || {}),
+        [showDocsEditor.componentName]: componentDocs
+      }
+    }
+
+    updateRule(index, "docs", updatedDocs)
+    setShowDocsEditor(null)
+    setComponentDocs({description: '', api: ''})
+  }
+
+  // 编辑私有组件文档
+  const editPrivateComponentDocs = (componentName: string) => {
+    const libraryName = getComponentLibrary(componentName) || selectedLibrary
+    const compDocs = rule.docs?.[libraryName]?.[componentName] || {description: '', api: ''}
+
+    setComponentDocs({
+      description: typeof compDocs.description === 'string' ? compDocs.description : '',
+      api: typeof compDocs.api === 'string' ? compDocs.api : ''
+    })
+
+    setShowDocsEditor({componentName, libraryName})
+  }
+
+  // 从 docs 删除组件文档
+  const removePrivateComponentDocs = (componentName: string, libraryName: string) => {
+    if (!rule.docs || !rule.docs[libraryName] || !rule.docs[libraryName][componentName]) return
+
+    const updatedDocs = { ...rule.docs }
+    const updatedLibraryDocs = { ...updatedDocs[libraryName] }
+    delete updatedLibraryDocs[componentName]
+
+    // 如果该库下没有组件了，删除整个库
+    if (Object.keys(updatedLibraryDocs).length === 0) {
+      delete updatedDocs[libraryName]
+    } else {
+      updatedDocs[libraryName] = updatedLibraryDocs
+    }
+
+    updateRule(index, "docs", updatedDocs)
+  }
+
+  // 打开预览对话框
+  const openPreview = (componentName: string) => {
+    const libraryName = getComponentLibrary(componentName)
+    if (!libraryName || !rule.docs || !rule.docs[libraryName]?.[componentName]) return
+
+    setPreviewDocs({
+      isOpen: true,
+      componentName,
+      libraryName,
+      docs: {
+        description: typeof rule.docs[libraryName][componentName].description === 'string'
+          ? rule.docs[libraryName][componentName].description
+          : '',
+        api: typeof rule.docs[libraryName][componentName].api === 'string'
+          ? rule.docs[libraryName][componentName].api
+          : ''
+      }
+    })
+  }
+
+  // 关闭预览对话框
+  const closePreview = () => {
+    if (previewDocs) {
+      setPreviewDocs({...previewDocs, isOpen: false})
+      setTimeout(() => setPreviewDocs(null), 300) // 等待动画结束
+    }
+  }
+
+  // 复制文档到另一个组件
+  const copyDocsToComponent = (sourceComponentName: string) => {
+    // 查找没有文档的组件
+    const componentsWithoutDocs = getComponentsInLibrary(selectedLibrary)
+      .filter(name => name !== sourceComponentName && !rule.docs?.[selectedLibrary]?.[name])
+
+    if (componentsWithoutDocs.length === 0) return
+
+    const targetComponentName = componentsWithoutDocs[0]
+    const sourceLibrary = selectedLibrary
+
+    if (!rule.docs || !rule.docs[sourceLibrary]?.[sourceComponentName] || sourceComponentName === targetComponentName) return
+
+    const updatedDocs = { ...rule.docs }
+
+    // 使用当前选中的组件库
+    updatedDocs[sourceLibrary] = {
+      ...(updatedDocs[sourceLibrary] || {}),
+      [targetComponentName]: { ...rule.docs[sourceLibrary][sourceComponentName] }
+    }
+
+    updateRule(index, "docs", updatedDocs)
+    setCopiedDocName(targetComponentName)
+
+    // 3秒后清除复制状态
+    setTimeout(() => {
+      if (setCopiedDocName && copiedDocName === targetComponentName) {
+        setCopiedDocName(null)
+      }
+    }, 3000)
+  }
+
+  // 导出所有文档为JSON
+  const getExportJson = () => {
+    if (!rule.docs) return "{}"
+    return JSON.stringify(rule.docs, null, 2)
+  }
+
+  // 设置组件引用的回调函数
+  const setComponentRef = (element: HTMLDivElement | null, componentName: string) => {
+    if (element) {
+      componentRefs.current.set(componentName, element)
+    } else {
+      componentRefs.current.delete(componentName)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* 组件库选择器 */}
+      <LibrarySelector
+        libraries={libraries}
+        selectedLibrary={selectedLibrary}
+        onSelectLibrary={setSelectedLibrary}
+        onAddLibrary={() => setShowAddLibrary(true)}
+        onDeleteLibrary={deleteLibrary}
+      />
+
+      {/* 组件列表 */}
+      <ComponentList
+        rule={rule}
+        selectedLibrary={selectedLibrary}
+        componentInput={componentInput}
+        error={error}
+        copiedDocName={copiedDocName}
+        importedComponents={importedComponents}
+        setComponentInput={setComponentInput}
+        addComponent={addComponentToDataSet}
+        clearError={() => setError(null)}
+        onShowImport={() => setShowImportJson(true)}
+        onEditDocs={editPrivateComponentDocs}
+        onCopyDocs={copyDocsToComponent}
+        onDeleteDocs={removePrivateComponentDocs}
+        onPreviewDocs={openPreview}
+        setComponentRef={setComponentRef}
+      />
+
+      {/* 组件库说明信息 */}
+      <div className="text-xs bg-blue-50 p-3 rounded-md border border-blue-100 mt-4">
+        <div className="flex">
+          <AlertCircle className="h-4 w-4 text-blue-500 mt-0.5 mr-2 flex-shrink-0" />
+          <div className="text-blue-700">
+            <p className="font-medium mb-1">私有组件配置说明</p>
+            <p>私有组件库配置提供以下功能：</p>
+            <ul className="list-disc ml-4 mt-1">
+              <li>管理多个组件库，便于组织不同类型的组件</li>
+              <li>为每个组件添加详细的描述和API文档</li>
+              <li>支持批量导入/导出组件文档</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {/* 添加组件库对话框 */}
+      <AddLibraryDialog
+        open={showAddLibrary}
+        onOpenChange={setShowAddLibrary}
+        libraryName={newLibraryName}
+        error={libraryError}
+        onChange={setNewLibraryName}
+        onSubmit={addNewLibrary}
+        clearError={() => setLibraryError(null)}
+      />
+
+      {/* 组件文档编辑器 */}
+      {showDocsEditor && (
+        <DocsEditor
+          open={!!showDocsEditor}
+          onOpenChange={(open) => {
+            if (!open) setShowDocsEditor(null);
+          }}
+          componentName={showDocsEditor.componentName}
+          libraryName={showDocsEditor.libraryName}
+          docs={componentDocs}
+          onChange={setComponentDocs}
+          onSave={addDocsToPrivateComponent}
+        />
+      )}
+
+      {/* JSON导入对话框 */}
+      <ImportExportDialog
+        open={showImportJson}
+        onOpenChange={setShowImportJson}
+        selectedLibrary={selectedLibrary}
+        jsonInput={jsonInput}
+        jsonError={jsonError}
+        onJsonInputChange={setJsonInput}
+        onImport={importFromJson}
+        onClearError={() => setJsonError(null)}
+        exportJson={getExportJson()}
+      />
+
+      {/* 文档预览对话框 */}
+      {previewDocs && (
+        <PreviewDialog
+          open={previewDocs.isOpen}
+          onOpenChange={closePreview}
+          componentName={previewDocs.componentName}
+          libraryName={previewDocs.libraryName}
+          docs={previewDocs.docs}
+        />
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/main/settings/components/RulesConfig.tsx b/app/main/settings/components/RulesConfig.tsx
new file mode 100644
index 00000000..f5ccdae0
--- /dev/null
+++ b/app/main/settings/components/RulesConfig.tsx
@@ -0,0 +1,232 @@
+import React, { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { PlusCircle, Trash2 } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Rule } from "./types"
+import PrivateComponentsConfig from "./PrivateComponentsConfig"
+
+interface RulesConfigProps {
+  rules: Rule[]
+  onChange: (rules: Rule[]) => void
+}
+
+export default function RulesConfig({ rules = [], onChange }: RulesConfigProps) {
+  const [error, setError] = useState<string | null>(null)
+  const [componentInput, setComponentInput] = useState("")
+
+  // 添加新规则
+  const addRule = () => {
+    onChange([
+      ...rules,
+      {
+        type: "public-components",
+        description: "",
+        dataSet: []
+      }
+    ])
+  }
+
+  // 更新规则
+  const updateRule = (index: number, field: string, value: any) => {
+    const updatedRules = [...rules]
+    if (!updatedRules[index]) {
+      updatedRules[index] = { type: "public-components", description: "" }
+    }
+    updatedRules[index] = {
+      ...updatedRules[index],
+      [field]: value
+    }
+    onChange(updatedRules)
+  }
+
+  // 删除规则
+  const deleteRule = (index: number) => {
+    onChange(rules.filter((_, i) => i !== index))
+  }
+
+  // 添加组件到 dataSet
+  const addComponentToDataSet = (index: number, component: string) => {
+    if (!component.trim()) {
+      setError("组件名不能为空")
+      return
+    }
+
+    const rule = rules[index]
+    if (!rule) return
+
+    const dataSet = rule.dataSet || []
+    if (dataSet.includes(component.trim())) {
+      setError("该组件已存在")
+      return
+    }
+
+    updateRule(index, "dataSet", [...dataSet, component.trim()])
+    setComponentInput("")
+    setError(null)
+  }
+
+  // 从 dataSet 删除组件
+  const removeComponentFromDataSet = (ruleIndex: number, componentIndex: number) => {
+    const rule = rules[ruleIndex]
+    if (!rule || !rule.dataSet) return
+
+    const newDataSet = rule.dataSet.filter((_, i) => i !== componentIndex)
+    updateRule(ruleIndex, "dataSet", newDataSet)
+  }
+
+  // 动态渲染规则表单字段
+  const renderRuleFields = (rule: Rule, index: number) => {
+    if (!rule) return null
+
+    return (
+      <div className="space-y-3">
+        <Select
+          value={rule.type}
+          onValueChange={(value: any) => updateRule(index, "type", value)}
+          defaultValue="public-components"
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="选择规则类型" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="public-components">公共组件</SelectItem>
+            <SelectItem value="styles">样式</SelectItem>
+            <SelectItem value="private-components">私有组件</SelectItem>
+            <SelectItem value="file-structure">文件结构</SelectItem>
+            <SelectItem value="attention-rules">注意事项</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Input
+          placeholder="描述"
+          value={rule.description || ""}
+          onChange={e => updateRule(index, "description", e.target.value)}
+        />
+
+        {(rule.type === "styles" || rule.type === "file-structure" || rule.type === "attention-rules") ? (
+          <Textarea
+            placeholder="提示词内容"
+            value={rule.prompt || ""}
+            onChange={e => updateRule(index, "prompt", e.target.value)}
+            className="min-h-[100px]"
+          />
+        ) : rule.type === "public-components" ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Input
+                placeholder="添加组件库名称，例如：antd / element-plus"
+                value={componentInput}
+                onChange={e => {
+                  setComponentInput(e.target.value)
+                  if (error) setError(null)
+                }}
+                onKeyDown={e => {
+                  if (e.key === "Enter") {
+                    e.preventDefault()
+                    addComponentToDataSet(index, componentInput)
+                  }
+                }}
+                className={error ? "border-red-500" : ""}
+              />
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={() => addComponentToDataSet(index, componentInput)}
+              >
+                <PlusCircle className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {error && (
+              <p className="text-red-500 text-xs">{error}</p>
+            )}
+
+            <div className="flex flex-wrap gap-1 mt-1">
+              {(rule.dataSet || []).length > 0 ? (
+                (rule.dataSet || []).map((item, i) => (
+                  <div key={i} className="bg-primary/10 text-primary text-xs px-2 py-1 rounded-md flex items-center gap-1">
+                    {item}
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      className="h-4 w-4 p-0"
+                      onClick={() => removeComponentFromDataSet(index, i)}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))
+              ) : (
+                <div className="text-sm text-muted-foreground">
+                  未添加任何组件
+                </div>
+              )}
+            </div>
+          </div>
+        ) : rule.type === "private-components" ? (
+          <PrivateComponentsConfig
+            rule={rule}
+            index={index}
+            updateRule={updateRule}
+          />
+        ) : null}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        {rules.map((rule, index) => (
+          <Card key={index}>
+            <CardHeader className="py-2 px-4">
+              <div className="flex justify-between items-center">
+                <CardTitle className="text-sm">规则 {index + 1}</CardTitle>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="ghost"
+                        className="h-8 w-8 p-0 text-red-500 hover:bg-red-50"
+                        onClick={() => deleteRule(index)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>删除规则</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            </CardHeader>
+            <CardContent className="py-2 px-4">
+              {renderRuleFields(rule, index)}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {rules.length === 0 && (
+        <div className="text-center py-6 text-muted-foreground border border-dashed rounded-md">
+          暂无规则配置
+        </div>
+      )}
+
+      <div className="mt-3 flex justify-center">
+        <Button type="button" onClick={addRule} size="sm" variant="outline">
+          <PlusCircle className="h-4 w-4 mr-1" />
+          添加规则
+        </Button>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/main/settings/components/private-components/AddLibraryDialog.tsx b/app/main/settings/components/private-components/AddLibraryDialog.tsx
new file mode 100644
index 00000000..39a76b33
--- /dev/null
+++ b/app/main/settings/components/private-components/AddLibraryDialog.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface AddLibraryDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  libraryName: string;
+  error: string | null;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  clearError: () => void;
+}
+
+export function AddLibraryDialog({
+  open,
+  onOpenChange,
+  libraryName,
+  error,
+  onChange,
+  onSubmit,
+  clearError
+}: AddLibraryDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>添加新组件库</DialogTitle>
+          <DialogDescription>
+            输入新组件库的名称，推荐使用 @scope/name 格式
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <Input
+            placeholder="例如: @private-ui/basic"
+            value={libraryName}
+            onChange={(e) => {
+              onChange(e.target.value);
+              if (error) clearError();
+            }}
+            className={error ? "border-red-500" : ""}
+          />
+          {error && <p className="text-red-500 text-xs">{error}</p>}
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button onClick={onSubmit}>
+            添加
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/app/main/settings/components/private-components/ComponentItem.tsx b/app/main/settings/components/private-components/ComponentItem.tsx
new file mode 100644
index 00000000..8f668c99
--- /dev/null
+++ b/app/main/settings/components/private-components/ComponentItem.tsx
@@ -0,0 +1,150 @@
+import React from "react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { FileText, Code, Eye, Copy, CheckCircle2, X } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Rule } from "../types"
+
+interface ComponentItemProps {
+  componentName: string
+  libraryName: string
+  rule: Rule
+  isCopied: boolean
+  isImported: boolean
+  onEditDocs: (componentName: string) => void
+  onCopyDocs: (componentName: string) => void
+  onDeleteDocs: (componentName: string, libraryName: string) => void
+  onPreviewDocs: (componentName: string) => void
+  componentRef: (element: HTMLDivElement | null) => void
+}
+
+export function ComponentItem({
+  componentName,
+  libraryName,
+  rule,
+  isCopied,
+  isImported,
+  onEditDocs,
+  onCopyDocs,
+  onDeleteDocs,
+  onPreviewDocs,
+  componentRef
+}: ComponentItemProps) {
+  const hasDocumentation = rule.docs && rule.docs[libraryName]?.[componentName];
+
+  return (
+    <div
+      ref={componentRef}
+      className={`border rounded-md p-3 transition-all duration-500
+        ${isCopied ? 'border-green-500 bg-green-50' : ''}
+        ${isImported ? 'border-blue-500 bg-blue-50 animate-pulse' : ''}`}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <div className="font-medium flex items-center">
+          {componentName}
+          <Badge variant="outline" className="ml-2 text-xs">{libraryName}</Badge>
+          {isCopied && <CheckCircle2 className="h-4 w-4 text-green-500 ml-2" />}
+          {isImported && (
+            <Badge variant="outline" className="ml-2 bg-blue-100 text-blue-800 border-blue-200">
+              新导入
+            </Badge>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  className="h-7 w-7 p-0"
+                  onClick={() => onEditDocs(componentName)}
+                >
+                  <FileText className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{hasDocumentation ? '编辑文档' : '添加文档'}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          {hasDocumentation && (
+            <>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      className="h-7 w-7 p-0 text-blue-500"
+                      onClick={() => onCopyDocs(componentName)}
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>复制文档到下一个未配置的组件</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      className="h-7 w-7 p-0 text-yellow-500"
+                      onClick={() => onDeleteDocs(componentName, libraryName)}
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>删除文档</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      className="h-7 w-7 p-0 text-blue-500"
+                      onClick={() => onPreviewDocs(componentName)}
+                    >
+                      <Eye className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>预览文档</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </>
+          )}
+        </div>
+      </div>
+
+      {hasDocumentation && (
+        <div className="text-xs text-muted-foreground flex items-center mt-1">
+          <div className="mr-2 flex items-center">
+            <Code className="h-3 w-3 mr-1" />
+            <span>API文档</span>
+          </div>
+          <div className="flex items-center ml-2 cursor-pointer text-blue-500" onClick={() => onPreviewDocs(componentName)}>
+            <Eye className="h-3 w-3 mr-1" />
+            <span>预览文档</span>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/main/settings/components/private-components/ComponentList.tsx b/app/main/settings/components/private-components/ComponentList.tsx
new file mode 100644
index 00000000..058baeb6
--- /dev/null
+++ b/app/main/settings/components/private-components/ComponentList.tsx
@@ -0,0 +1,135 @@
+import React from "react"
+import { ComponentItem } from "./ComponentItem"
+import { Rule } from "../types"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { PlusCircle, FileText } from "lucide-react"
+
+interface ComponentListProps {
+  rule: Rule
+  selectedLibrary: string
+  componentInput: string
+  error: string | null
+  copiedDocName: string | null
+  importedComponents: {name: string, library: string}[]
+  setComponentInput: (value: string) => void
+  addComponent: (value: string) => void
+  clearError: () => void
+  onShowImport: () => void
+  onEditDocs: (componentName: string) => void
+  onCopyDocs: (componentName: string) => void
+  onDeleteDocs: (componentName: string, libraryName: string) => void
+  onPreviewDocs: (componentName: string) => void
+  setComponentRef: (element: HTMLDivElement | null, componentName: string) => void
+}
+
+export function ComponentList({
+  rule,
+  selectedLibrary,
+  componentInput,
+  error,
+  copiedDocName,
+  importedComponents,
+  setComponentInput,
+  addComponent,
+  clearError,
+  onShowImport,
+  onEditDocs,
+  onCopyDocs,
+  onDeleteDocs,
+  onPreviewDocs,
+  setComponentRef
+}: ComponentListProps) {
+  // 获取当前选中库中的组件
+  const getComponentsForSelectedLibrary = () => {
+    if (!rule.docs || !rule.docs[selectedLibrary]) return []
+    return Object.keys(rule.docs[selectedLibrary])
+  }
+
+  // 查找没有文档的组件
+  const findComponentsWithoutDocs = (currentName: string) => {
+    return getComponentsForSelectedLibrary()
+      .filter(name => name !== currentName && !rule.docs?.[selectedLibrary]?.[name]);
+  }
+
+  return (
+    <div className="border-t pt-4">
+      <div className="flex items-center justify-between mb-3">
+        <div className="text-sm font-medium">
+          <span className="mr-2">组件管理</span>
+          <Badge variant="outline">{selectedLibrary}</Badge>
+        </div>
+        <div className="space-y-2 flex-1 mx-2">
+          <div className="flex items-center gap-2">
+            <Input
+              placeholder="添加组件名称，例如：Button、Card"
+              value={componentInput}
+              onChange={e => {
+                setComponentInput(e.target.value)
+                if (error) clearError()
+              }}
+              onKeyDown={e => {
+                if (e.key === "Enter") {
+                  e.preventDefault()
+                  addComponent(componentInput)
+                }
+              }}
+              className={error ? "border-red-500" : ""}
+            />
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => addComponent(componentInput)}
+            >
+              <PlusCircle className="h-4 w-4" />
+            </Button>
+          </div>
+          {error && <p className="text-red-500 text-xs">{error}</p>}
+        </div>
+
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          onClick={onShowImport}
+          className="whitespace-nowrap"
+        >
+          <FileText className="h-4 w-4 mr-1" />
+          导入文档
+        </Button>
+      </div>
+
+      {/* 组件列表区域 */}
+      <div className="space-y-2 mt-4">
+        {getComponentsForSelectedLibrary().length > 0 ? (
+          getComponentsForSelectedLibrary().map((componentName, i) => (
+            <ComponentItem
+              key={i}
+              componentName={componentName}
+              libraryName={selectedLibrary}
+              rule={rule}
+              isCopied={copiedDocName === componentName}
+              isImported={importedComponents.some(comp => comp.name === componentName)}
+              onEditDocs={onEditDocs}
+              onCopyDocs={(name) => {
+                const componentsWithoutDocs = findComponentsWithoutDocs(name);
+                if (componentsWithoutDocs.length > 0) {
+                  onCopyDocs(name);
+                }
+              }}
+              onDeleteDocs={onDeleteDocs}
+              onPreviewDocs={onPreviewDocs}
+              componentRef={(el) => setComponentRef(el, componentName)}
+            />
+          ))
+        ) : (
+          <div className="text-sm text-muted-foreground text-center py-4 border border-dashed rounded-md">
+            该组件库未添加任何组件
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/main/settings/components/private-components/DocsEditor.tsx b/app/main/settings/components/private-components/DocsEditor.tsx
new file mode 100644
index 00000000..4f716c59
--- /dev/null
+++ b/app/main/settings/components/private-components/DocsEditor.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+
+interface DocsEditorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  componentName: string;
+  libraryName: string;
+  docs: {description: string, api: string};
+  onChange: (docs: {description: string, api: string}) => void;
+  onSave: () => void;
+}
+
+export function DocsEditor({
+  open,
+  onOpenChange,
+  componentName,
+  libraryName,
+  docs,
+  onChange,
+  onSave
+}: DocsEditorProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            <span>编辑组件文档</span>
+            <span className="text-primary ml-2">{componentName}</span>
+            <Badge variant="outline" className="ml-2 text-xs">{libraryName}</Badge>
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div>
+            <p className="text-sm font-medium mb-2">组件描述</p>
+            <Textarea
+              placeholder="请输入组件的详细描述..."
+              value={docs.description}
+              onChange={e => onChange({...docs, description: e.target.value})}
+              className="min-h-[120px] text-sm"
+            />
+          </div>
+          <div>
+            <p className="text-sm font-medium mb-2">API 文档</p>
+            <Textarea
+              placeholder="请输入组件的API文档，支持Markdown格式..."
+              value={docs.api}
+              onChange={e => onChange({...docs, api: e.target.value})}
+              className="min-h-[200px] text-sm font-mono"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            取消
+          </Button>
+          <Button
+            type="button"
+            onClick={() => {
+              onSave();
+              onOpenChange(false);
+            }}
+          >
+            保存文档
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/app/main/settings/components/private-components/ImportExportDialog.tsx b/app/main/settings/components/private-components/ImportExportDialog.tsx
new file mode 100644
index 00000000..0a4d9396
--- /dev/null
+++ b/app/main/settings/components/private-components/ImportExportDialog.tsx
@@ -0,0 +1,131 @@
+import React from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+import { Copy } from "lucide-react";
+
+interface ImportExportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedLibrary: string;
+  jsonInput: string;
+  jsonError: string | null;
+  onJsonInputChange: (value: string) => void;
+  onImport: () => void;
+  onClearError: () => void;
+  exportJson: string;
+}
+
+export function ImportExportDialog({
+  open,
+  onOpenChange,
+  selectedLibrary,
+  jsonInput,
+  jsonError,
+  onJsonInputChange,
+  onImport,
+  onClearError,
+  exportJson
+}: ImportExportDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>导入/导出组件文档</DialogTitle>
+          <DialogDescription>
+            通过JSON格式批量导入或导出组件文档
+          </DialogDescription>
+        </DialogHeader>
+
+        <Tabs defaultValue="import">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="import">导入文档</TabsTrigger>
+            <TabsTrigger value="export">导出文档</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="import" className="pt-2">
+            <div className="space-y-4">
+              <p className="text-xs text-muted-foreground">
+                请粘贴JSON格式的组件文档，支持两种格式，将导入到当前选中的组件库 <Badge variant="outline">{selectedLibrary}</Badge>：
+              </p>
+              <div className="text-xs text-muted-foreground bg-gray-50 p-3 rounded-md">
+                <p className="font-medium mb-1">单库格式</p>
+                <pre className="overflow-x-auto my-1">{`{
+  "Button": { "description": "按钮组件", "api": "API内容" },
+  "Card": { "description": "卡片组件", "api": "API内容" }
+}`}</pre>
+                <p className="font-medium mb-1 mt-2">多库格式</p>
+                <pre className="overflow-x-auto my-1">{`{
+  "@private-basic-components": {
+    "Button": { "description": "按钮组件", "api": "API内容" },
+    "Card": { "description": "卡片组件", "api": "API内容" }
+  },
+  "@other-library": {
+    "OtherComponent": { "description": "其他组件", "api": "API内容" }
+  }
+}`}</pre>
+              </div>
+
+              <Textarea
+                placeholder={`{\n  "Button": {\n    "description": "按钮组件",\n    "api": "## API\\n| 属性 | 说明 | 类型 | 默认值 |"\n  }\n}`}
+                value={jsonInput}
+                onChange={e => {
+                  onJsonInputChange(e.target.value);
+                  if (jsonError) onClearError();
+                }}
+                className="min-h-[300px] font-mono text-sm"
+              />
+
+              {jsonError && <p className="text-red-500 text-xs">{jsonError}</p>}
+
+              <div className="flex justify-end space-x-2">
+                <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
+                <Button type="button" onClick={onImport}>导入</Button>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="export" className="pt-2">
+            <div className="space-y-4">
+              <p className="text-xs text-muted-foreground">
+                以下是当前配置的组件文档，你可以复制并保存以备后用
+              </p>
+
+              <div className="relative">
+                <Textarea
+                  value={exportJson}
+                  readOnly
+                  className="min-h-[300px] font-mono text-sm"
+                />
+
+                <Button
+                  type="button"
+                  size="sm"
+                  className="absolute top-2 right-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(exportJson)
+                      .then(() => {
+                        alert('已复制到剪贴板')
+                      })
+                      .catch(err => {
+                        console.error('复制失败:', err)
+                      })
+                  }}
+                >
+                  <Copy className="h-4 w-4 mr-1" />
+                  复制
+                </Button>
+              </div>
+
+              <div className="flex justify-end">
+                <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>关闭</Button>
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/app/main/settings/components/private-components/LibrarySelector.tsx b/app/main/settings/components/private-components/LibrarySelector.tsx
new file mode 100644
index 00000000..a0f9fd7f
--- /dev/null
+++ b/app/main/settings/components/private-components/LibrarySelector.tsx
@@ -0,0 +1,63 @@
+import React from "react"
+import { Button } from "@/components/ui/button"
+import { Trash2, PlusCircle } from "lucide-react"
+
+interface LibrarySelectorProps {
+  libraries: string[]
+  selectedLibrary: string
+  onSelectLibrary: (library: string) => void
+  onAddLibrary: () => void
+  onDeleteLibrary: (library: string) => void
+}
+
+export function LibrarySelector({
+  libraries,
+  selectedLibrary,
+  onSelectLibrary,
+  onAddLibrary,
+  onDeleteLibrary
+}: LibrarySelectorProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <div className="text-sm font-medium">组件库管理</div>
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          onClick={onAddLibrary}
+        >
+          <PlusCircle className="h-4 w-4 mr-1" />
+          添加组件库
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {libraries.map((lib) => (
+          <div
+            key={lib}
+            className={`border rounded-md p-2 flex items-center gap-2 cursor-pointer
+              ${selectedLibrary === lib ? 'bg-primary/10 border-primary' : 'bg-background hover:bg-muted/50'}`}
+            onClick={() => onSelectLibrary(lib)}
+          >
+            <span className="text-sm">{lib}</span>
+            {lib !== libraries[0] && (
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                className="h-6 w-6 p-0 text-red-500 hover:bg-red-50"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDeleteLibrary(lib);
+                }}
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/main/settings/components/private-components/PreviewDialog.tsx b/app/main/settings/components/private-components/PreviewDialog.tsx
new file mode 100644
index 00000000..72f462af
--- /dev/null
+++ b/app/main/settings/components/private-components/PreviewDialog.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+
+interface PreviewDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  componentName: string;
+  libraryName: string;
+  docs: {
+    description: string;
+    api: string;
+  };
+}
+
+export function PreviewDialog({
+  open,
+  onOpenChange,
+  componentName,
+  libraryName,
+  docs
+}: PreviewDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-xl flex items-center">
+            <span className="text-primary">{componentName}</span>
+            <Badge variant="outline" className="ml-2 text-sm">{libraryName}</Badge>
+            <span className="text-sm ml-2 text-muted-foreground">组件文档</span>
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="mt-4 space-y-6">
+          <div>
+            <h3 className="text-md font-medium border-b pb-2">组件描述</h3>
+            <div className="mt-2 whitespace-pre-wrap text-sm">{docs.description}</div>
+          </div>
+
+          <div>
+            <h3 className="text-md font-medium border-b pb-2">API 文档</h3>
+            <div className="mt-2 whitespace-pre-wrap text-sm font-mono bg-muted p-4 rounded-md overflow-x-auto">
+              {docs.api}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/app/main/settings/components/private-components/index.ts b/app/main/settings/components/private-components/index.ts
new file mode 100644
index 00000000..922ea2bf
--- /dev/null
+++ b/app/main/settings/components/private-components/index.ts
@@ -0,0 +1,7 @@
+export * from './LibrarySelector';
+export * from './ComponentItem';
+export * from './ComponentList';
+export * from './AddLibraryDialog';
+export * from './DocsEditor';
+export * from './ImportExportDialog';
+export * from './PreviewDialog';
\ No newline at end of file
diff --git a/app/main/settings/components/types.ts b/app/main/settings/components/types.ts
new file mode 100644
index 00000000..521b3d72
--- /dev/null
+++ b/app/main/settings/components/types.ts
@@ -0,0 +1,37 @@
+// 规则类型定义
+export interface Rule {
+  type: "public-components" | "styles" | "private-components" | "file-structure" | "attention-rules"
+  description: string
+  prompt?: string
+  dataSet?: string[]
+  docs?: {
+    [libraryName: string]: {
+      [componentName: string]: {
+        description: string;
+        api: string
+      }
+    }
+  }
+}
+
+// Codegen类型
+export interface Codegen {
+  _id?: string
+  title: string
+  description: string
+  fullStack: "React" | "Vue"
+  guides: string[]
+  model: string
+  codeRendererUrl: string
+  rules: Rule[]
+}
+
+// CodegenListItem类型（列表项，与API返回的数据结构保持一致）
+export interface CodegenListItem {
+  _id?: string  // API可能返回undefined，需要匹配API类型
+  title: string
+  description: string
+  fullStack: "React" | "Vue"
+  guides?: string[]
+  rules?: Rule[]
+}
\ No newline at end of file
diff --git a/app/main/settings/page.tsx b/app/main/settings/page.tsx
index 23efd98d..bc58c091 100644
--- a/app/main/settings/page.tsx
+++ b/app/main/settings/page.tsx
@@ -1,3 +1,34 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { ProviderModelViewer } from "@/components/biz/ProviderModelViewer"
+import { AppHeader } from "@/components/biz/AppHeader/AppHeader"
+import CodegenTable from "./CodegenTable"
+
 export default function Settings() {
-  return <div>Settings</div>
+  const [tab, setTab] = useState("provider")
+  const [providers, setProviders] = useState({})
+  useEffect(() => {
+    fetch("/api/config").then(res => res.json()).then(data => setProviders(data.providers || {}))
+  }, [])
+  return (
+    <div>
+      <AppHeader breadcrumbs={[{ label: "Settings" }]} />
+      <Tabs value={tab} onValueChange={setTab} className="mt-4">
+        <TabsList>
+          <TabsTrigger value="provider">AI Provider 配置</TabsTrigger>
+          <TabsTrigger value="codegen">Codegen 配置管理</TabsTrigger>
+        </TabsList>
+        <TabsContent value="provider">
+          <div className="p-4">
+            <ProviderModelViewer initialData={providers} showSensitiveInfo={false} />
+          </div>
+        </TabsContent>
+        <TabsContent value="codegen">
+          <CodegenTable />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
 }
diff --git a/app/services/codegen/codegen.service.ts b/app/services/codegen/codegen.service.ts
index b608d4c5..7b8e3b2c 100644
--- a/app/services/codegen/codegen.service.ts
+++ b/app/services/codegen/codegen.service.ts
@@ -35,3 +35,30 @@ export const getCodegenDetail = async (
     throw error
   }
 }
+
+export const createCodegen = async (data: any) => {
+  const response = await request("/codegen/create", {
+    method: "POST",
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+  })
+  return response.json()
+}
+
+export const editCodegen = async (data: any) => {
+  const response = await request("/codegen/edit", {
+    method: "POST",
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+  })
+  return response.json()
+}
+
+export const deleteCodegen = async (_id: string) => {
+  const response = await request("/codegen/delete", {
+    method: "POST",
+    body: JSON.stringify({ _id }),
+    headers: { "Content-Type": "application/json" },
+  })
+  return response.json()
+}
diff --git a/components/biz/AppHeader/AppHeader.tsx b/components/biz/AppHeader/AppHeader.tsx
index a6dbdf9e..3e3146df 100644
--- a/components/biz/AppHeader/AppHeader.tsx
+++ b/components/biz/AppHeader/AppHeader.tsx
@@ -11,24 +11,30 @@ import {
 import type { AppHeaderProps } from "./interface"
 import React from "react"
 import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Brain } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { useProviderModelModal } from "@/app/commons/ProviderModelModal"
 
 export function AppHeader({
   className,
   breadcrumbs,
   showSidebarTrigger = true,
 }: AppHeaderProps) {
+  const { openModal } = useProviderModelModal() // now it's safe to call
+
   return (
     <header
       className={`flex h-16 shrink-0 items-center gap-2 ${className || ""}`}
     >
-      <div className="flex items-center gap-2 px-4">
+      <div className="w-full flex items-center gap-2 px-4">
         {showSidebarTrigger && (
           <>
             <SidebarTrigger className="-ml-1" />
             <Separator orientation="vertical" className="mr-2 h-4" />
           </>
         )}
-        <Breadcrumb>
+        <Breadcrumb className="flex-1">
           <BreadcrumbList>
             {breadcrumbs?.map((item, index) => (
               <React.Fragment key={item.label}>
@@ -52,6 +58,20 @@ export function AppHeader({
             ))}
           </BreadcrumbList>
         </Breadcrumb>
+        <div className="flex items-center gap-2">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="icon" onClick={openModal}>
+                  <Brain />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>AI Provider Settings</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
       </div>
     </header>
   )
diff --git a/lib/db/codegen/mutaitons.ts b/lib/db/codegen/mutaitons.ts
index f2998175..63ac9596 100644
--- a/lib/db/codegen/mutaitons.ts
+++ b/lib/db/codegen/mutaitons.ts
@@ -6,12 +6,21 @@ export async function createCodegen(codegen: Codegen | Codegen[]) {
 }
 
 export async function upsertCodegen(codegen: Codegen) {
-  const result = await CodegenModel.findOneAndUpdate(
-    { title: codegen.title },
-    codegen,
-    { upsert: true, new: true },
-  )
-  return result
+  if (codegen._id) {
+    const result = await CodegenModel.findByIdAndUpdate(
+      codegen._id,
+      codegen,
+      { new: true },
+    )
+    return result
+  } else {
+    const result = await CodegenModel.findOneAndUpdate(
+      { title: codegen.title },
+      codegen,
+      { upsert: true, new: true },
+    )
+    return result
+  }
 }
 
 export async function upsertCodegens(codegens: Codegen[]) {
diff --git a/lib/db/codegen/selectors.ts b/lib/db/codegen/selectors.ts
index 881ea36d..b2c5850f 100644
--- a/lib/db/codegen/selectors.ts
+++ b/lib/db/codegen/selectors.ts
@@ -37,7 +37,7 @@ export async function findCodegens(params: CodegenApi.ListRequest) {
 
 export async function findCodegenById(id: string) {
   const codegen = await CodegenModel.findById(id)
-    .select("_id title description fullStack guides codeRendererUrl rules")
+    .select("_id title description fullStack guides codeRendererUrl rules model")
     .lean<
       Pick<
         Codegen,
@@ -47,6 +47,7 @@ export async function findCodegenById(id: string) {
         | "guides"
         | "codeRendererUrl"
         | "rules"
+        | "model"
       > & {
         _id: string
       }
diff --git a/lib/db/codegen/types.ts b/lib/db/codegen/types.ts
index 40f96d61..53dc1390 100644
--- a/lib/db/codegen/types.ts
+++ b/lib/db/codegen/types.ts
@@ -20,6 +20,7 @@ export interface CodegenRule {
 }
 
 export interface Codegen {
+  _id?: string  // MongoDB 文档ID，编辑时必需
   title: string
   description: string
   fullStack: "React" | "Vue"