From e0600f5d5012cf0eadf74b42d298f07e2d52d692 Mon Sep 17 00:00:00 2001
From: yuantao <yuantao@flyh5.cn>
Date: Tue, 16 Sep 2025 13:05:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20=E6=95=B4=E4=BD=93?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E7=BB=9F=E4=B8=80=E5=8C=96=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                       | 12 +++++++-----
 src/components/Header.tsx         |  4 ++--
 src/components/HistoryPanel.tsx   | 24 ++++++++++++------------
 src/components/ImageCanvas.tsx    | 16 ++++++++--------
 src/components/PromptComposer.tsx | 20 ++++++++++----------
 src/index.css                     | 15 +++++++++++++++
 tailwind.config.js                |  9 +++++++++
 7 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c8b97b1..4b1064d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,21 +54,23 @@ function AppContent() {
 
   return (
     <div className="h-screen bg-gray-50 text-gray-900 flex flex-col font-sans">
-      <div className="shadow-sm">
+      <div className="card card-lg rounded-none">
         <Header />
       </div>
       
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden p-4 gap-4">
         <div className={cn("flex-shrink-0 transition-all duration-300", !showPromptPanel && "w-8")}>
-          <div className="h-full shadow-lg">
+          <div className="h-full card card-lg">
             <PromptComposer />
           </div>
         </div>
         <div className="flex-1 min-w-0">
-          <ImageCanvas />
+          <div className="h-full card card-lg">
+            <ImageCanvas />
+          </div>
         </div>
         <div className="flex-shrink-0">
-          <div className="h-full shadow-lg">
+          <div className="h-full card card-lg">
             <HistoryPanel />
           </div>
         </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 25f6624..2cceb8e 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -8,7 +8,7 @@ export const Header: React.FC = () => {
 
   return (
     <>
-      <header className="h-12 bg-white border-b border-gray-100 flex items-center justify-between px-3 shadow-sm">
+      <header className="h-12 bg-white flex items-center justify-between px-3 rounded-t-xl">
         <div className="flex items-center space-x-2">
           <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-50">
             <div className="text-lg">🍌</div>
@@ -23,7 +23,7 @@ export const Header: React.FC = () => {
             variant="ghost" 
             size="icon"
             onClick={() => setShowInfoModal(true)}
-            className="h-7 w-7 text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+            className="h-7 w-7 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full card"
           >
             <HelpCircle className="h-4 w-4" />
           </Button>
diff --git a/src/components/HistoryPanel.tsx b/src/components/HistoryPanel.tsx
index b954d55..0ff77a6 100644
--- a/src/components/HistoryPanel.tsx
+++ b/src/components/HistoryPanel.tsx
@@ -93,7 +93,7 @@ export const HistoryPanel: React.FC = () => {
             variant="ghost"
             size="icon"
             onClick={() => setShowHistory(!showHistory)}
-            className="h-6 w-6"
+            className="h-6 w-6 rounded-full card"
             title="隐藏历史面板"
           >
             ×
@@ -104,7 +104,7 @@ export const HistoryPanel: React.FC = () => {
           <Button 
             variant="outline" 
             size="sm" 
-            className="mt-2"
+            className="mt-2 card"
             onClick={refresh}
           >
             重新加载
@@ -194,10 +194,10 @@ export const HistoryPanel: React.FC = () => {
 
   if (!showHistory) {
     return (
-      <div className="w-8 bg-white border-l border-gray-200 flex flex-col items-center justify-center">
+      <div className="w-8 bg-white flex flex-col items-center justify-center rounded-r-xl">
         <button
           onClick={() => setShowHistory(true)}
-          className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-l-lg border border-r-0 border-gray-300 flex items-center justify-center transition-colors group"
+          className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-l-lg flex items-center justify-center transition-colors group"
           title="显示历史面板"
         >
           <div className="flex flex-col space-y-1">
@@ -211,7 +211,7 @@ export const HistoryPanel: React.FC = () => {
   }
 
   return (
-    <div className="w-72 bg-white border-l border-gray-200 p-4 flex flex-col h-full shadow-lg">
+    <div className="w-72 bg-white p-4 flex flex-col h-full">
       {/* 头部 */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center space-x-2">
@@ -223,7 +223,7 @@ export const HistoryPanel: React.FC = () => {
             variant="ghost"
             size="icon"
             onClick={refresh}
-            className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
+            className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
             title="刷新历史记录"
           >
             ⟳
@@ -232,7 +232,7 @@ export const HistoryPanel: React.FC = () => {
             variant="ghost"
             size="icon"
             onClick={() => setShowHistory(!showHistory)}
-            className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
+            className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
             title="隐藏历史面板"
           >
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -250,14 +250,14 @@ export const HistoryPanel: React.FC = () => {
             type="date"
             value={startDate}
             onChange={(e) => setStartDate(e.target.value)}
-            className="flex-1 text-xs p-1.5 border border-gray-200 rounded text-gray-600 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400"
+            className="flex-1 text-xs p-1.5 border border-gray-200 rounded-lg text-gray-600 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400 card"
             placeholder="开始日期"
           />
           <input
             type="date"
             value={endDate}
             onChange={(e) => setEndDate(e.target.value)}
-            className="flex-1 text-xs p-1.5 border border-gray-200 rounded text-gray-600 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400"
+            className="flex-1 text-xs p-1.5 border border-gray-200 rounded-lg text-gray-600 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400 card"
             placeholder="结束日期"
           />
         </div>
@@ -266,13 +266,13 @@ export const HistoryPanel: React.FC = () => {
             type="text"
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="flex-1 text-xs p-1.5 border border-gray-200 rounded-l bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400"
+            className="flex-1 text-xs p-1.5 border border-gray-200 rounded-l-lg bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400 card"
             placeholder="搜索提示词..."
           />
           <Button
             variant="outline"
             size="sm"
-            className="text-xs p-1.5 rounded-l-none h-7 border-gray-200 text-gray-600 hover:bg-gray-100"
+            className="text-xs p-1.5 rounded-l-none h-7 border-gray-200 text-gray-600 hover:bg-gray-100 card"
             onClick={() => {
               setStartDate('');
               setEndDate('');
@@ -720,7 +720,7 @@ export const HistoryPanel: React.FC = () => {
         <Button 
           variant="outline" 
           size="sm" 
-          className="w-full h-9 text-sm"
+          className="w-full h-9 text-sm card"
           onClick={() => {
             // 查找当前显示的图像（生成记录或编辑记录）
             let imageUrl: string | null = null;
diff --git a/src/components/ImageCanvas.tsx b/src/components/ImageCanvas.tsx
index aa5f0df..41c62ca 100644
--- a/src/components/ImageCanvas.tsx
+++ b/src/components/ImageCanvas.tsx
@@ -211,7 +211,7 @@ export const ImageCanvas: React.FC = () => {
       {/* 画布区域 */}
       <div 
         id="canvas-container" 
-        className="flex-1 relative overflow-hidden bg-gray-100"
+        className="flex-1 relative overflow-hidden bg-gray-100 rounded-lg"
       >
         {!image && !isGenerating && (
           <div className="absolute inset-0 flex items-center justify-center z-0">
@@ -231,8 +231,8 @@ export const ImageCanvas: React.FC = () => {
         )}
 
         {isGenerating && (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-900/40 z-50 backdrop-blur-sm">
-            <div className="text-center bg-white/90 rounded-xl p-6 shadow-2xl backdrop-blur-sm border border-gray-200/50">
+          <div className="absolute inset-0 flex items-center justify-center bg-gray-900/40 z-50 backdrop-blur-sm rounded-lg">
+            <div className="text-center bg-white/90 rounded-xl p-6 card-lg backdrop-blur-sm">
               <div className="animate-spin rounded-full h-10 w-10 border-2 border-yellow-400 border-t-transparent mx-auto mb-3" />
               <p className="text-gray-700 text-sm font-medium">正在创建图像...</p>
             </div>
@@ -308,12 +308,12 @@ export const ImageCanvas: React.FC = () => {
 
         {/* 悬浮操作按钮 */}
         {image && !isGenerating && (
-          <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white/80 backdrop-blur-sm rounded-full shadow-lg border border-gray-200 px-3 py-2 flex items-center space-x-2">
+          <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white/80 backdrop-blur-sm rounded-full card border border-gray-200 px-3 py-2 flex items-center space-x-2">
             <Button 
               variant="ghost" 
               size="sm" 
               onClick={() => handleZoom(-0.1)} 
-              className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+              className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full card"
             >
               <ZoomOut className="h-4 w-4" />
             </Button>
@@ -324,7 +324,7 @@ export const ImageCanvas: React.FC = () => {
               variant="ghost" 
               size="sm" 
               onClick={() => handleZoom(0.1)} 
-              className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+              className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full card"
             >
               <ZoomIn className="h-4 w-4" />
             </Button>
@@ -332,7 +332,7 @@ export const ImageCanvas: React.FC = () => {
               variant="ghost" 
               size="sm" 
               onClick={handleReset} 
-              className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+              className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full card"
             >
               <RotateCcw className="h-4 w-4" />
             </Button>
@@ -341,7 +341,7 @@ export const ImageCanvas: React.FC = () => {
               variant="ghost" 
               size="sm" 
               onClick={handleDownload} 
-              className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+              className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full card"
             >
               <Download className="h-4 w-4" />
             </Button>
diff --git a/src/components/PromptComposer.tsx b/src/components/PromptComposer.tsx
index be89a82..fcfe8c6 100644
--- a/src/components/PromptComposer.tsx
+++ b/src/components/PromptComposer.tsx
@@ -138,10 +138,10 @@ export const PromptComposer: React.FC = () => {
 
   if (!showPromptPanel) {
     return (
-      <div className="w-8 bg-white border-r border-gray-200 flex flex-col items-center justify-center">
+      <div className="w-8 bg-white flex flex-col items-center justify-center rounded-l-xl">
         <button
           onClick={() => setShowPromptPanel(true)}
-          className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-r-lg border border-l-0 border-gray-300 flex items-center justify-center transition-colors group"
+          className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-r-lg flex items-center justify-center transition-colors group"
           title="显示提示面板"
         >
           <div className="flex flex-col space-y-1">
@@ -156,7 +156,7 @@ export const PromptComposer: React.FC = () => {
 
   return (
     <>
-    <div className="w-72 h-full bg-white border-r border-gray-200 p-4 flex flex-col space-y-5 overflow-y-auto shadow-lg">
+    <div className="w-72 h-full bg-white p-4 flex flex-col space-y-5 overflow-y-auto">
       <div>
         <div className="flex items-center justify-between mb-2">
           <h3 className="text-xs font-medium text-gray-500 uppercase tracking-wide">模式</h3>
@@ -165,7 +165,7 @@ export const PromptComposer: React.FC = () => {
               variant="ghost"
               size="icon"
               onClick={() => setShowHintsModal(true)}
-              className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
+              className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
             >
               <HelpCircle className="h-3.5 w-3.5" />
             </Button>
@@ -173,7 +173,7 @@ export const PromptComposer: React.FC = () => {
               variant="ghost"
               size="icon"
               onClick={() => setShowPromptPanel(false)}
-              className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
+              className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
               title="隐藏面板"
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -255,7 +255,7 @@ export const PromptComposer: React.FC = () => {
                 variant="outline"
                 size="sm"
                 onClick={() => fileInputRef.current?.click()}
-                className="mt-1"
+                className="mt-1 card"
                 disabled={
                   (selectedTool === 'generate' && uploadedImages.length >= 2) ||
                   (selectedTool === 'edit' && editReferenceImages.length >= 2)
@@ -335,7 +335,7 @@ export const PromptComposer: React.FC = () => {
         <div className="flex gap-2">
           <Button
             onClick={() => selectedTool === 'generate' ? cancelGeneration() : cancelEdit()}
-            className="flex-1 h-12 text-sm font-medium bg-red-500 hover:bg-red-600 rounded-lg"
+            className="flex-1 h-12 text-sm font-medium bg-red-500 hover:bg-red-600 rounded-lg card"
           >
             <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
             中断
@@ -345,7 +345,7 @@ export const PromptComposer: React.FC = () => {
         <Button
           onClick={handleGenerate}
           disabled={!currentPrompt.trim()}
-          className="w-full h-12 text-sm font-medium rounded-lg shadow-sm hover:shadow-md transition-shadow"
+          className="w-full h-12 text-sm font-medium rounded-lg shadow-sm hover:shadow-md transition-shadow card"
         >
           <Wand2 className="h-4 w-4 mr-2" />
           {selectedTool === 'generate' ? '生成图像' : '应用编辑'}
@@ -415,7 +415,7 @@ export const PromptComposer: React.FC = () => {
                 variant="destructive"
                 size="sm"
                 onClick={handleClearSession}
-                className="flex-1 h-8 text-xs"
+                className="flex-1 h-8 text-xs card"
               >
                 确认
               </Button>
@@ -423,7 +423,7 @@ export const PromptComposer: React.FC = () => {
                 variant="outline"
                 size="sm"
                 onClick={() => setShowClearConfirm(false)}
-                className="flex-1 h-8 text-xs border-gray-200"
+                className="flex-1 h-8 text-xs border-gray-200 card"
               >
                 取消
               </Button>
diff --git a/src/index.css b/src/index.css
index 7c05186..4f59f89 100644
--- a/src/index.css
+++ b/src/index.css
@@ -97,4 +97,19 @@ body {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Card styles */
+.card {
+  @apply bg-white rounded-xl shadow-card border border-gray-100 overflow-hidden;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.card-hover {
+  @apply shadow-card-hover;
+}
+
+.card-lg {
+  @apply shadow-card-lg;
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index ebcf6ec..e2210ee 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,6 +50,15 @@ export default {
         '100': '25rem',
         '112': '28rem',
       },
+      boxShadow: {
+        'card': '0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05)',
+        'card-hover': '0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)',
+        'card-lg': '0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05)',
+        'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+      },
+      backdropBlur: {
+        'xs': '2px',
+      }
     },
   },
   plugins: [],