Feat: 新增评论组件，细化通知组件样式，引入环境变量，替换图标组件

app/components/ui/notice/index.tsx

@@ -66,21 +66,27 @@ function Notice() {
     <div className="fixed top-24 right-0 z-2 mx-4 flex max-w-[30em] flex-col items-end">
       {items.map((item) => {
         const showProgress = !!item.duration && item.duration > 0;
+        const theme = {
+          default: { bg: "bg-pink-100", text: "text-pink-700", bar: "bg-pink-500" },
+          success: { bg: "bg-cyan-100", text: "text-cyan-700", bar: "bg-cyan-500" },
+          error: { bg: "bg-pink-100", text: "text-pink-700", bar: "bg-pink-500" },
+          warning: { bg: "bg-yellow-100", text: "text-yellow-700", bar: "bg-yellow-500" },
+        }[item.type || "default"];
 
         return (
-          <div key={item.key} className="relative overflow-hidden px-5 py-4 pr-14 mb-4 min-w-[20em] rounded-xl bg-pink-100 animate-fade-in-left">
+          <div key={item.key} className={clsn("relative overflow-hidden px-5 py-4 pr-14 mb-4 min-w-[20em] rounded-xl animate-fade-in-left", theme.bg, theme.text)}>
             <button
-              className="absolute text-xl font-semibold right-6 text-pink-700 cursor-pointer"
+              className={clsn("absolute text-xl font-semibold right-6 cursor-pointer", theme.text)}
               onClick={() => onCloseWithKey(item.key as string)}
             >
               ×
             </button>
-            <h4 className="text-lg font-semibold text-pink-700">{item.title}</h4>
+            <h4 className={clsn("text-lg font-semibold", theme.text)}>{item.title}</h4>
             <p className="text-sm mt-4">
               {item.content}
             </p>
             {showProgress && (
-              <div className={clsn("absolute h-1 left-0 right-0 bottom-0 bg-pink-500", styles.progress)} style={{ animationDuration: `${(item.duration || 5000) / 1000}s` }}></div>
+              <div className={clsn("absolute h-1 left-0 right-0 bottom-0", styles.progress, theme.bar)} style={{ animationDuration: `${(item.duration || 5000) / 1000}s` }}></div>
             )}
           </div>
         );