🪛 chore: 封装 Toast

server/components/contents/bili.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { BILI_CDN_SELECT_LIST, BILI_DOWNLOAD_METHOD, BILI_RESOLUTION_LIST } from "../../../constants/constant.js";
 import { readYamlConfig, updateYamlConfig } from '../../utils/yamlHelper';
+import Toast from "../toast.jsx";
 
 export default function Bili() {
     const [config, setConfig] = useState({
@@ -102,11 +103,7 @@ export default function Bili() {
     return (
         <div className="p-6 mx-auto container">
             {/* 成功提示 */}
-            <div id="toast-success" className="toast toast-top toast-end hidden z-[9999]">
+            <Toast id="toast-success" />
-                <div className="alert alert-success">
-                    <span>配置保存成功！</span>
-                </div>
-            </div>
 
             <div className="max-w-5xl mx-auto">
                 <h2 className="text-2xl font-bold mb-6">Bilibili 配置</h2>

server/components/contents/generic.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { readYamlConfig, updateYamlConfig } from '../../utils/yamlHelper';
+import Toast from "../toast.jsx";
 
 export default function Generic() {
     const [config, setConfig] = useState({
@@ -13,6 +14,7 @@ export default function Generic() {
         queueConcurrency: 1,
         videoDownloadConcurrency: 1,
         autoclearTrashtime: '0 0 8 * * ?',
+        xiaohongshuCookie: '',
         deeplApiUrls: ''
     });
 
@@ -34,6 +36,7 @@ export default function Generic() {
                     queueConcurrency: yamlConfig.queueConcurrency || 1,
                     videoDownloadConcurrency: yamlConfig.videoDownloadConcurrency || 1,
                     autoclearTrashtime: yamlConfig.autoclearTrashtime || '0 0 8 * * ?',
+                    xiaohongshuCookie: yamlConfig.xiaohongshuCookie || '',
                     deeplApiUrls: yamlConfig.deeplApiUrls || ''
                 });
             }
@@ -57,6 +60,7 @@ export default function Generic() {
                 queueConcurrency: config.queueConcurrency,
                 videoDownloadConcurrency: config.videoDownloadConcurrency,
                 autoclearTrashtime: config.autoclearTrashtime,
+                xiaohongshuCookie: config.xiaohongshuCookie,
                 deeplApiUrls: config.deeplApiUrls
             });
 
@@ -88,7 +92,8 @@ export default function Generic() {
                 queueConcurrency: yamlConfig.queueConcurrency || 1,
                 videoDownloadConcurrency: yamlConfig.videoDownloadConcurrency || 1,
                 autoclearTrashtime: yamlConfig.autoclearTrashtime || '0 0 8 * * ?',
-                deeplApiUrls: yamlConfig.deeplApiUrls || ''
+                xiaohongshuCookie: yamlConfig.xiaohongshuCookie || '',
+                deeplApiUrls: yamlConfig.deeplApiUrls || '',
             });
         }
     };
@@ -96,11 +101,7 @@ export default function Generic() {
     return (
         <div className="p-6 mx-auto container">
             {/* 成功提示 */}
-            <div id="generic-toast-success" className="toast toast-top toast-end hidden z-[9999]">
+            <Toast id="generic-toast-success" />
-                <div className="alert alert-success">
-                    <span>配置保存成功！</span>
-                </div>
-            </div>
 
             <div className="max-w-5xl mx-auto">
                 <h2 className="text-2xl font-bold mb-6">通用配置</h2>
@@ -132,7 +133,10 @@ export default function Generic() {
                                 <input
                                     type="number"
                                     value={ config.videoSizeLimit }
-                                    onChange={(e) => setConfig({ ...config, videoSizeLimit: parseInt(e.target.value) })}
+                                    onChange={ (e) => setConfig({
+                                        ...config,
+                                        videoSizeLimit: parseInt(e.target.value)
+                                    }) }
                                     className="input input-bordered"
                                 />
                             </div>
@@ -187,7 +191,10 @@ export default function Generic() {
                                 <input
                                     type="number"
                                     value={ config.streamDuration }
-                                    onChange={(e) => setConfig({ ...config, streamDuration: parseInt(e.target.value) })}
+                                    onChange={ (e) => setConfig({
+                                        ...config,
+                                        streamDuration: parseInt(e.target.value)
+                                    }) }
                                     className="input input-bordered"
                                 />
                             </div>
@@ -203,7 +210,10 @@ export default function Generic() {
                                 <input
                                     type="number"
                                     value={ config.queueConcurrency }
-                                    onChange={(e) => setConfig({ ...config, queueConcurrency: parseInt(e.target.value) })}
+                                    onChange={ (e) => setConfig({
+                                        ...config,
+                                        queueConcurrency: parseInt(e.target.value)
+                                    }) }
                                     className="input input-bordered"
                                 />
                             </div>
@@ -214,7 +224,10 @@ export default function Generic() {
                                 <input
                                     type="number"
                                     value={ config.videoDownloadConcurrency }
-                                    onChange={(e) => setConfig({ ...config, videoDownloadConcurrency: parseInt(e.target.value) })}
+                                    onChange={ (e) => setConfig({
+                                        ...config,
+                                        videoDownloadConcurrency: parseInt(e.target.value)
+                                    }) }
                                     className="input input-bordered"
                                 />
                             </div>
@@ -249,6 +262,20 @@ export default function Generic() {
                             </span>
                         </div>
 
+                        {/* 小红书 Cookie */ }
+                        <div className="form-control w-full mt-6">
+                            <label className="label">
+                                <span className="label-text">小红书Cookie</span>
+                            </label>
+                            <input
+                                type="text"
+                                value={ config.xiaohongshuCookie }
+                                onChange={ (e) => setConfig({ ...config, xiaohongshuCookie: e.target.value }) }
+                                placeholder="请输入小红书的Cookie..."
+                                className="input input-bordered"
+                            />
+                        </div>
+
                         {/* 定时清理配置 */ }
                         <div className="form-control w-full mt-6">
                             <label className="label">

server/components/contents/ncm.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { NETEASECLOUD_QUALITY_LIST } from "../../../constants/constant.js";
 import { readYamlConfig, updateYamlConfig } from '../../utils/yamlHelper';
+import Toast from "../toast.jsx";
 
 export default function Ncm() {
     const [config, setConfig] = useState({
@@ -85,11 +86,7 @@ export default function Ncm() {
     return (
         <div className="p-6 mx-auto container">
             {/* 成功提示 */}
-            <div id="ncm-toast-success" className="toast toast-top toast-end hidden z-[9999]">
+            <Toast id="ncm-toast-success" />
-                <div className="alert alert-success">
-                    <span>配置保存成功！</span>
-                </div>
-            </div>
 
             <div className="max-w-5xl mx-auto">
                 <h2 className="text-2xl font-bold mb-6">网易云音乐配置</h2>

server/components/contents/tiktok.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { readYamlConfig, updateYamlConfig } from '../../utils/yamlHelper';
+import Toast from "../toast.jsx";
 
 export default function Tiktok() {
     const [config, setConfig] = useState({
@@ -64,11 +65,7 @@ export default function Tiktok() {
     return (
         <div className="p-6 mx-auto container">
             {/* 成功提示 */}
-            <div id="tiktok-toast-success" className="toast toast-top toast-end hidden z-[9999]">
+            <Toast id="tiktok-toast-success" />
-                <div className="alert alert-success">
-                    <span>配置保存成功！</span>
-                </div>
-            </div>
 
             <div className="max-w-5xl mx-auto">
                 <h2 className="text-2xl font-bold mb-6">抖音配置</h2>

server/components/contents/youtube.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { BILI_CDN_SELECT_LIST, YOUTUBE_GRAPHICS_LIST } from "../../../constants/constant.js";
 import { readYamlConfig, updateYamlConfig } from '../../utils/yamlHelper';
+import Toast from "../toast.jsx";
 
 export default function Youtube() {
     const [config, setConfig] = useState({
@@ -69,11 +70,7 @@ export default function Youtube() {
     return (
         <div className="p-6 mx-auto container">
             {/* 成功提示 */}
-            <div id="youtube-toast-success" className="toast toast-top toast-end hidden z-[9999]">
+            <Toast id="youtube-toast-success" />
-                <div className="alert alert-success">
-                    <span>配置保存成功！</span>
-                </div>
-            </div>
 
             <div className="max-w-5xl mx-auto">
                 <h2 className="text-2xl font-bold mb-6">YouTube 配置</h2>

server/components/toast.jsx

@@ -0,0 +1,9 @@
+export default function Toast({ id }) {
+    return (
+        <div id={ id } className="toast toast-top toast-end hidden z-[9999]">
+            <div className="alert alert-success">
+                <span>配置保存成功！</span>
+            </div>
+        </div>
+    );
+};