From 33d8e528027106ffd257a57ca0aa7efd2cd5de5a Mon Sep 17 00:00:00 2001
From: Kevin Wong <lamnickdavid@gmail.com>
Date: Tue, 3 Feb 2026 17:42:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/page.tsx         | 137 +++++++++++++++++++++---------
 frontend/src/app/publish/page.tsx | 124 +++++++++++++++------------
 2 files changed, 171 insertions(+), 90 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 2027880..2480ff2 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -9,6 +9,26 @@ import { useTask } from "@/contexts/TaskContext";
 import AccountSettingsDropdown from "@/components/AccountSettingsDropdown";
 import VideoPreviewModal from "@/components/VideoPreviewModal";
 import ScriptExtractionModal from "@/components/ScriptExtractionModal";
+import {
+  Upload,
+  RefreshCw,
+  Eye,
+  Trash2,
+  FileText,
+  Sparkles,
+  Loader2,
+  Volume2,
+  Mic,
+  Play,
+  Pause,
+  Pencil,
+  Check,
+  X,
+  Square,
+  Rocket,
+  Download,
+  Send,
+} from "lucide-react";
 
 const API_BASE = typeof window === 'undefined'
   ? (process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8006')
@@ -1143,18 +1163,20 @@ export default function Home() {
                   />
                   <label
                     htmlFor="video-upload"
-                    className={`px-2 py-1 text-xs rounded cursor-pointer transition-all whitespace-nowrap ${isUploading
+                    className={`px-2 py-1 text-xs rounded cursor-pointer transition-all whitespace-nowrap flex items-center gap-1 ${isUploading
                       ? "bg-gray-600 cursor-not-allowed text-gray-400"
                       : "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
                       }`}
                   >
-                    📤 上传
+                    <Upload className="h-3.5 w-3.5" />
+                    上传
                   </label>
                   <button
                     onClick={fetchMaterials}
-                    className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 whitespace-nowrap"
+                    className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 whitespace-nowrap flex items-center gap-1"
                   >
-                    🔄 刷新
+                    <RefreshCw className="h-3.5 w-3.5" />
+                    刷新
                   </button>
                 </div>
               </div>
@@ -1183,7 +1205,7 @@ export default function Home() {
                     onClick={() => setUploadError(null)}
                     className="text-red-300 hover:text-white"
                   >
-                    ✕
+                    <X className="h-3.5 w-3.5" />
                   </button>
                 </div>
               )}
@@ -1237,7 +1259,7 @@ export default function Home() {
                           className="p-1 text-gray-500 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
                           title="预览视频"
                         >
-                          👁️
+                          <Eye className="h-4 w-4" />
                         </button>
                         <button
                           onClick={(e) => {
@@ -1247,7 +1269,7 @@ export default function Home() {
                           className="p-1 text-gray-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
                           title="删除素材"
                         >
-                          🗑️
+                          <Trash2 className="h-4 w-4" />
                         </button>
                       </div>
                     </div>
@@ -1267,7 +1289,8 @@ export default function Home() {
                     onClick={() => setExtractModalOpen(true)}
                     className="px-2 py-1 text-xs rounded transition-all whitespace-nowrap bg-purple-600 hover:bg-purple-700 text-white flex items-center gap-1"
                   >
-                    <span>📜</span> 文案提取助手
+                    <FileText className="h-3.5 w-3.5" />
+                    文案提取助手
                   </button>
                   <button
                     onClick={handleGenerateMeta}
@@ -1277,7 +1300,17 @@ export default function Home() {
                       : "bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white"
                       }`}
                   >
-                    {isGeneratingMeta ? "⏳ 生成中..." : "🤖 AI生成标题标签"}
+                    {isGeneratingMeta ? (
+                      <span className="flex items-center gap-1">
+                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        生成中...
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-1">
+                        <Sparkles className="h-3.5 w-3.5" />
+                        AI生成标题标签
+                      </span>
+                    )}
                   </button>
                 </div>
               </div>
@@ -1301,9 +1334,10 @@ export default function Home() {
                 </h2>
                 <button
                   onClick={() => setShowStylePreview((prev) => !prev)}
-                  className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300"
+                  className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 flex items-center gap-1"
                 >
-                  {showStylePreview ? "收起预览" : "👁️ 预览样式"}
+                  <Eye className="h-3.5 w-3.5" />
+                  {showStylePreview ? "收起预览" : "预览样式"}
                 </button>
               </div>
 
@@ -1490,21 +1524,23 @@ export default function Home() {
               <div className="flex gap-2 mb-4">
                 <button
                   onClick={() => setTtsMode('edgetts')}
-                  className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all ${ttsMode === 'edgetts'
+                  className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all flex items-center justify-center gap-2 ${ttsMode === 'edgetts'
                     ? 'bg-purple-600 text-white'
                     : 'bg-white/10 text-gray-300 hover:bg-white/20'
                     }`}
                 >
-                  🔊 选择声音
+                  <Volume2 className="h-4 w-4" />
+                  选择声音
                 </button>
                 <button
                   onClick={() => setTtsMode('voiceclone')}
-                  className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all ${ttsMode === 'voiceclone'
+                  className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all flex items-center justify-center gap-2 ${ttsMode === 'voiceclone'
                     ? 'bg-purple-600 text-white'
                     : 'bg-white/10 text-gray-300 hover:bg-white/20'
                     }`}
                 >
-                  🎤 克隆声音
+                  <Mic className="h-4 w-4" />
+                  克隆声音
                 </button>
               </div>
 
@@ -1549,18 +1585,20 @@ export default function Home() {
                         />
                         <label
                           htmlFor="ref-audio-upload"
-                          className={`px-2 py-1 text-xs rounded cursor-pointer transition-all ${isUploadingRef
+                          className={`px-2 py-1 text-xs rounded cursor-pointer transition-all flex items-center gap-1 ${isUploadingRef
                             ? "bg-gray-600 cursor-not-allowed text-gray-400"
                             : "bg-purple-600 hover:bg-purple-700 text-white"
                             }`}
                         >
-                          📤 上传
+                          <Upload className="h-3.5 w-3.5" />
+                          上传
                         </label>
                         <button
                           onClick={fetchRefAudios}
-                          className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300"
+                          className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 flex items-center gap-1"
                         >
-                          🔄 刷新
+                          <RefreshCw className="h-3.5 w-3.5" />
+                          刷新
                         </button>
                       </div>
                     </div>
@@ -1574,7 +1612,9 @@ export default function Home() {
                     {uploadRefError && (
                       <div className="mb-2 p-2 bg-red-500/20 text-red-200 rounded text-xs flex justify-between">
                         <span>❌ {uploadRefError}</span>
-                        <button onClick={() => setUploadRefError(null)} className="text-red-300 hover:text-white">✕</button>
+                        <button onClick={() => setUploadRefError(null)} className="text-red-300 hover:text-white">
+                          <X className="h-3.5 w-3.5" />
+                        </button>
                       </div>
                     )}
 
@@ -1612,8 +1652,12 @@ export default function Home() {
                                     if (e.key === 'Escape') cancelEditing(e as any);
                                   }}
                                 />
-                                <button onClick={e => saveEditing(audio.id, e)} className="text-green-400 hover:text-green-300 text-xs">✔</button>
-                                <button onClick={e => cancelEditing(e)} className="text-gray-400 hover:text-gray-300 text-xs">✕</button>
+                                <button onClick={e => saveEditing(audio.id, e)} className="text-green-400 hover:text-green-300 text-xs">
+                                  <Check className="h-3 w-3" />
+                                </button>
+                                <button onClick={e => cancelEditing(e)} className="text-gray-400 hover:text-gray-300 text-xs">
+                                  <X className="h-3 w-3" />
+                                </button>
                               </div>
                             ) : (
                               <>
@@ -1625,14 +1669,18 @@ export default function Home() {
                                       className="text-gray-400 hover:text-purple-400 text-xs"
                                       title="试听"
                                     >
-                                      {playingAudioId === audio.id ? '⏸️' : '▶️'}
+                                      {playingAudioId === audio.id ? (
+                                        <Pause className="h-3.5 w-3.5" />
+                                      ) : (
+                                        <Play className="h-3.5 w-3.5" />
+                                      )}
                                     </button>
                                     <button
                                       onClick={(e) => startEditing(audio, e)}
                                       className="text-gray-400 hover:text-blue-400 text-xs"
                                       title="重命名"
                                     >
-                                      ✏️
+                                      <Pencil className="h-3.5 w-3.5" />
                                     </button>
                                     <button
                                       onClick={(e) => {
@@ -1642,7 +1690,7 @@ export default function Home() {
                                       className="text-gray-400 hover:text-red-400 text-xs"
                                       title="删除"
                                     >
-                                      🗑️
+                                      <Trash2 className="h-3.5 w-3.5" />
                                     </button>
                                   </div>
                                 </div>
@@ -1662,16 +1710,18 @@ export default function Home() {
                       {!isRecording ? (
                         <button
                           onClick={startRecording}
-                          className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors"
+                          className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
                         >
-                          ⏺️ 开始录音
+                          <Mic className="h-4 w-4" />
+                          开始录音
                         </button>
                       ) : (
                         <button
                           onClick={stopRecording}
-                          className="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg text-sm font-medium transition-colors"
+                          className="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
                         >
-                          ⏹️ 停止
+                          <Square className="h-4 w-4" />
+                          停止
                         </button>
                       )}
                       {isRecording && (
@@ -1727,9 +1777,10 @@ export default function Home() {
                 <div className="flex items-center gap-2">
                   <button
                     onClick={fetchBgmList}
-                    className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300"
+                    className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 flex items-center gap-1"
                   >
-                    🔄 刷新
+                    <RefreshCw className="h-3.5 w-3.5" />
+                    刷新
                   </button>
                   <label className="relative inline-flex items-center cursor-pointer">
                     <input
@@ -1794,7 +1845,11 @@ export default function Home() {
                           className="p-1 text-gray-500 hover:text-purple-400 transition-colors"
                           title="试听"
                         >
-                          {playingBgmId === bgm.id ? '⏸️' : '▶️'}
+                          {playingBgmId === bgm.id ? (
+                            <Pause className="h-4 w-4" />
+                          ) : (
+                            <Play className="h-4 w-4" />
+                          )}
                         </button>
                         {selectedBgmId === bgm.id && (
                           <span className="text-xs text-purple-300">已选</span>
@@ -1856,7 +1911,10 @@ export default function Home() {
                   生成中... {currentTask?.progress || 0}%
                 </span>
               ) : (
-                "🚀 生成视频"
+                <span className="flex items-center justify-center gap-2">
+                  <Rocket className="h-5 w-5" />
+                  生成视频
+                </span>
               )}
             </button>
           </div>
@@ -1908,13 +1966,15 @@ export default function Home() {
                     download
                     className="mt-4 w-full py-3 rounded-xl bg-green-600 hover:bg-green-700 text-white font-medium flex items-center justify-center gap-2 transition-colors"
                   >
-                    ⬇️ 下载视频
+                    <Download className="h-4 w-4" />
+                    下载视频
                   </a>
                   <Link
                     href="/publish"
                     className="mt-3 w-full py-3 rounded-xl bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-medium flex items-center justify-center gap-2 transition-colors"
                   >
-                    📤 发布到社交平台
+                    <Send className="h-4 w-4" />
+                    发布到社交平台
                   </Link>
                 </>
               )}
@@ -1928,9 +1988,10 @@ export default function Home() {
                 </h2>
                 <button
                   onClick={() => fetchGeneratedVideos()}
-                  className="px-3 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300"
+                  className="px-3 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 flex items-center gap-1"
                 >
-                  🔄 刷新
+                  <RefreshCw className="h-3.5 w-3.5" />
+                  刷新
                 </button>
               </div>
               {generatedVideos.length === 0 ? (
@@ -1972,7 +2033,7 @@ export default function Home() {
                         className="p-1 text-gray-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
                         title="删除视频"
                       >
-                        🗑️
+                        <Trash2 className="h-4 w-4" />
                       </button>
                     </div>
                   ))}
diff --git a/frontend/src/app/publish/page.tsx b/frontend/src/app/publish/page.tsx
index 1a5b7ec..27e0dc0 100644
--- a/frontend/src/app/publish/page.tsx
+++ b/frontend/src/app/publish/page.tsx
@@ -1,11 +1,19 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import useSWR from 'swr';
-import Link from "next/link";
+import { useState, useEffect } from "react";
+import useSWR from 'swr';
+import Link from "next/link";
 import api from "@/lib/axios";
 import { useAuth } from "@/contexts/AuthContext";
 import AccountSettingsDropdown from "@/components/AccountSettingsDropdown";
+import {
+    ArrowLeft,
+    RotateCcw,
+    LogOut,
+    QrCode,
+    Rocket,
+    Clock,
+} from "lucide-react";
 
 // SWR fetcher 使用 axios（自动处理 401/403）
 const fetcher = (url: string) => api.get(url).then((res) => res.data);
@@ -312,12 +320,13 @@ export default function PublishPage() {
                         IPAgent
                     </Link>
                     <div className="flex items-center gap-1 sm:gap-4">
-                        <Link
-                            href="/"
-                            className="px-2 sm:px-4 py-1 sm:py-2 text-sm sm:text-base bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors"
-                        >
-                            返回创作
-                        </Link>
+                        <Link
+                            href="/"
+                            className="px-2 sm:px-4 py-1 sm:py-2 text-sm sm:text-base bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors flex items-center gap-1"
+                        >
+                            <ArrowLeft className="h-4 w-4" />
+                            返回创作
+                        </Link>
                         <span className="px-2 sm:px-4 py-1 sm:py-2 text-sm sm:text-base bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg font-semibold">
                             发布管理
                         </span>
@@ -362,26 +371,29 @@ export default function PublishPage() {
                                         <div className="flex gap-2">
                                             {account.logged_in ? (
                                                 <>
-                                                    <button
-                                                        onClick={() => handleLogin(account.platform)}
-                                                        className="px-3 py-1 bg-white/10 hover:bg-white/20 text-white text-sm rounded-lg transition-colors"
-                                                    >
-                                                        ↻ 重新登录
-                                                    </button>
-                                                    <button
-                                                        onClick={() => handleLogout(account.platform)}
-                                                        className="px-3 py-1 bg-red-500/80 hover:bg-red-600 text-white text-sm rounded-lg transition-colors"
-                                                    >
-                                                        注销
-                                                    </button>
+                                                    <button
+                                                        onClick={() => handleLogin(account.platform)}
+                                                        className="px-3 py-1 bg-white/10 hover:bg-white/20 text-white text-sm rounded-lg transition-colors flex items-center gap-1"
+                                                    >
+                                                        <RotateCcw className="h-3.5 w-3.5" />
+                                                        重新登录
+                                                    </button>
+                                                    <button
+                                                        onClick={() => handleLogout(account.platform)}
+                                                        className="px-3 py-1 bg-red-500/80 hover:bg-red-600 text-white text-sm rounded-lg transition-colors flex items-center gap-1"
+                                                    >
+                                                        <LogOut className="h-3.5 w-3.5" />
+                                                        注销
+                                                    </button>
                                                 </>
                                             ) : (
-                                                <button
-                                                    onClick={() => handleLogin(account.platform)}
-                                                    className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded-lg transition-colors"
-                                                >
-                                                    🔐 扫码登录
-                                                </button>
+                                                <button
+                                                    onClick={() => handleLogin(account.platform)}
+                                                    className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded-lg transition-colors flex items-center gap-1"
+                                                >
+                                                    <QrCode className="h-3.5 w-3.5" />
+                                                    扫码登录
+                                                </button>
                                             )}
                                         </div>
                                     </div>
@@ -487,32 +499,40 @@ export default function PublishPage() {
                         <div className="space-y-3">
                             <div className="flex gap-3">
                                 {/* 立即发布 - 占 3/4 */}
-                                <button
-                                    onClick={() => {
-                                        setScheduleMode("now");
-                                        handlePublish();
-                                    }}
-                                    disabled={isPublishing || selectedPlatforms.length === 0}
-                                    className={`flex-[3] py-4 rounded-xl font-bold text-lg transition-all ${isPublishing || selectedPlatforms.length === 0
-                                        ? "bg-gray-600 cursor-not-allowed text-gray-400"
-                                        : "bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-white"
-                                        }`}
-                                >
-                                    {isPublishing && scheduleMode === "now" ? "发布中..." : "🚀 立即发布"}
-                                </button>
+                                <button
+                                    onClick={() => {
+                                        setScheduleMode("now");
+                                        handlePublish();
+                                    }}
+                                    disabled={isPublishing || selectedPlatforms.length === 0}
+                                    className={`flex-[3] py-4 rounded-xl font-bold text-lg transition-all flex items-center justify-center gap-2 ${isPublishing || selectedPlatforms.length === 0
+                                        ? "bg-gray-600 cursor-not-allowed text-gray-400"
+                                        : "bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-white"
+                                        }`}
+                                >
+                                    {isPublishing && scheduleMode === "now" ? (
+                                        "发布中..."
+                                    ) : (
+                                        <>
+                                            <Rocket className="h-5 w-5" />
+                                            立即发布
+                                        </>
+                                    )}
+                                </button>
                                 {/* 定时发布 - 占 1/4 */}
-                                <button
-                                    onClick={() => setScheduleMode(scheduleMode === "scheduled" ? "now" : "scheduled")}
-                                    disabled={isPublishing || selectedPlatforms.length === 0}
-                                    className={`flex-1 py-4 rounded-xl font-bold text-base transition-all ${isPublishing || selectedPlatforms.length === 0
-                                        ? "bg-gray-600 cursor-not-allowed text-gray-400"
-                                        : scheduleMode === "scheduled"
-                                            ? "bg-purple-600 text-white"
-                                            : "bg-white/10 hover:bg-white/20 text-white"
-                                        }`}
-                                >
-                                    ⏰ 定时
-                                </button>
+                                <button
+                                    onClick={() => setScheduleMode(scheduleMode === "scheduled" ? "now" : "scheduled")}
+                                    disabled={isPublishing || selectedPlatforms.length === 0}
+                                    className={`flex-1 py-4 rounded-xl font-bold text-base transition-all flex items-center justify-center gap-2 ${isPublishing || selectedPlatforms.length === 0
+                                        ? "bg-gray-600 cursor-not-allowed text-gray-400"
+                                        : scheduleMode === "scheduled"
+                                            ? "bg-purple-600 text-white"
+                                            : "bg-white/10 hover:bg-white/20 text-white"
+                                        }`}
+                                >
+                                    <Clock className="h-5 w-5" />
+                                    定时
+                                </button>
                             </div>
 
                             {/* 定时发布时间选择器 */}