From 925d1c23aec53d145222e62607ff9fd8ca37223f Mon Sep 17 00:00:00 2001
From: JOYCEQL <1449239013@qq.com>
Date: Fri, 3 Jan 2025 14:09:40 +0800
Subject: [PATCH] fix: ai polish theme

---
 .../components/shared/ai/AIPolishDialog.tsx   | 86 ++++++++++++++++---
 1 file changed, 73 insertions(+), 13 deletions(-)

diff --git a/apps/fronted/src/components/shared/ai/AIPolishDialog.tsx b/apps/fronted/src/components/shared/ai/AIPolishDialog.tsx
index f57cab7..e6abdb3 100644
--- a/apps/fronted/src/components/shared/ai/AIPolishDialog.tsx
+++ b/apps/fronted/src/components/shared/ai/AIPolishDialog.tsx
@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { useAIConfigStore } from "@/store/useAIConfigStore";
+import { cn } from "@/lib/utils";
 
 interface AIPolishDialogProps {
   open: boolean;
@@ -128,7 +129,12 @@ export default function AIPolishDialog({
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent
-        className="sm:max-w-[1000px] bg-[#1a1d21] border-gray-800"
+        className={cn(
+          "sm:max-w-[1000px]",
+          "bg-white dark:bg-neutral-900",
+          "border-neutral-200 dark:border-neutral-800",
+          "rounded-2xl shadow-2xl dark:shadow-none"
+        )}
         onPointerDownOutside={(e) => {
           e.preventDefault();
         }}
@@ -140,11 +146,26 @@ export default function AIPolishDialog({
         }}
       >
         <DialogHeader className="pb-6">
-          <DialogTitle className="flex items-center gap-2 text-2xl text-white">
-            <Sparkles className="h-6 w-6 text-primary animate-pulse" />
+          <DialogTitle
+            className={cn(
+              "flex items-center gap-2 text-2xl",
+              "text-neutral-800 dark:text-neutral-100"
+            )}
+          >
+            <Sparkles
+              className={cn(
+                "h-6 w-6 text-primary animate-pulse",
+                "dark:text-primary-400"
+              )}
+            />
             AI 润色
           </DialogTitle>
-          <DialogDescription className="text-base text-gray-400">
+          <DialogDescription
+            className={cn(
+              "text-base",
+              "text-neutral-600 dark:text-neutral-400"
+            )}
+          >
             {isPolishing
               ? "正在为您润色内容..."
               : "已经为您优化了内容，请查看效果"}
@@ -154,14 +175,34 @@ export default function AIPolishDialog({
         <div className="grid grid-cols-2 gap-6">
           <div className="space-y-2">
             <div className="flex items-center gap-2 px-3">
-              <div className="w-1.5 h-1.5 rounded-full bg-gray-500"></div>
-              <span className="text-sm font-medium text-gray-400">
+              <div
+                className={cn(
+                  "w-1.5 h-1.5 rounded-full",
+                  "bg-neutral-500 dark:bg-neutral-600"
+                )}
+              ></div>
+              <span
+                className={cn(
+                  "text-sm font-medium",
+                  "text-neutral-600 dark:text-neutral-400"
+                )}
+              >
                 原始内容
               </span>
             </div>
-            <div className="relative rounded-xl border border-gray-800 bg-[#24282c] p-6 h-[400px] overflow-auto shadow-sm">
+            <div
+              className={cn(
+                "relative rounded-xl border",
+                "bg-neutral-50 dark:bg-neutral-800/50",
+                "border-neutral-200 dark:border-neutral-800",
+                "p-6 h-[400px] overflow-auto shadow-sm"
+              )}
+            >
               <div
-                className="prose prose-invert max-w-none text-gray-300"
+                className={cn(
+                  "prose dark:prose-invert max-w-none",
+                  "text-neutral-700 dark:text-neutral-300"
+                )}
                 dangerouslySetInnerHTML={{ __html: content }}
               />
             </div>
@@ -169,17 +210,35 @@ export default function AIPolishDialog({
 
           <div className="space-y-2">
             <div className="flex items-center gap-2 px-3">
-              <div className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></div>
-              <span className="text-sm font-medium text-primary">
+              <div
+                className={cn(
+                  "w-1.5 h-1.5 rounded-full",
+                  "bg-primary animate-pulse"
+                )}
+              ></div>
+              <span
+                className={cn(
+                  "text-sm font-medium",
+                  "text-primary dark:text-primary-400"
+                )}
+              >
                 润色后的内容
               </span>
             </div>
             <div
               ref={polishedContentRef}
-              className="relative rounded-xl border border-primary/20 bg-primary/[0.03] p-6 h-[400px] overflow-auto shadow-sm scroll-smooth"
+              className={cn(
+                "relative rounded-xl border",
+                "bg-primary/[0.03] dark:bg-primary/[0.1]",
+                "border-primary/20 dark:border-primary/30",
+                "p-6 h-[400px] overflow-auto shadow-sm scroll-smooth"
+              )}
             >
               <div
-                className="prose prose-invert max-w-none text-white"
+                className={cn(
+                  "prose dark:prose-invert max-w-none",
+                  "text-neutral-800 dark:text-neutral-200"
+                )}
                 dangerouslySetInnerHTML={{ __html: polishedContent }}
               />
             </div>
@@ -201,9 +260,10 @@ export default function AIPolishDialog({
               "重新生成"
             )}
           </Button>
+
           <Button
             onClick={handleApply}
-            disabled={isPolishing || !polishedContent}
+            disabled={!polishedContent || isPolishing}
             className="flex-1 bg-primary hover:bg-primary/90 text-white h-11 shadow-lg shadow-primary/20"
           >
             应用内容