From 577b48285be585169b00207bd977e21d27a6f984 Mon Sep 17 00:00:00 2001
From: xiamuceer <xiamuceer@gmail.com>
Date: Mon, 16 Mar 2026 16:50:15 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E4=B9=A6=E6=9C=AC?=
 =?UTF-8?q?=E5=B0=81=E9=9D=A2=E6=98=BE=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/BookshelfPage.tsx | 651 ++++++++++++++++++---------
 1 file changed, 450 insertions(+), 201 deletions(-)

diff --git a/frontend/src/pages/BookshelfPage.tsx b/frontend/src/pages/BookshelfPage.tsx
index 0bdc9dd..5ef4925 100644
--- a/frontend/src/pages/BookshelfPage.tsx
+++ b/frontend/src/pages/BookshelfPage.tsx
@@ -60,8 +60,8 @@ export default function BookshelfPage({
   const alphaColor = (color: string, alpha: number) => `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;
   const [flippedProjectIds, setFlippedProjectIds] = useState<Record<string, boolean>>({});
   const [coverGeneratingIds, setCoverGeneratingIds] = useState<Record<string, boolean>>({});
-  const mobileBookHeight = 460;
-  const desktopBookHeight = 430;
+  const mobileBookHeight = 520;
+  const desktopBookHeight = 520;
   const mobileSpineWidth = 32;
 
   const serialBookPalettes = [
@@ -365,13 +365,14 @@ export default function BookshelfPage({
             const coverReady = project.cover_status === 'ready' && !!project.cover_image_url;
             const coverGenerating = project.cover_status === 'generating' || coverActionLoading;
             const coverFailed = project.cover_status === 'failed' && !coverActionLoading;
+            const showCoverFace = coverReady && !isFlipped;
 
             return (
-              <div key={project.id} style={{ position: 'relative', width: '100%', minWidth: 0, minHeight: isMobile ? mobileBookHeight : desktopBookHeight }}>
+              <div key={project.id} style={{ position: 'relative', width: '100%', minWidth: 0, height: isMobile ? mobileBookHeight : desktopBookHeight }}>
                 <Card
                   hoverable
-                  style={{ ...bookshelfCardStyles.projectCard, minHeight: isMobile ? mobileBookHeight : desktopBookHeight }}
-                  styles={{ body: { padding: 0, flex: 1, display: 'flex', flexDirection: 'column' } }}
+                  style={{ ...bookshelfCardStyles.projectCard, height: isMobile ? mobileBookHeight : desktopBookHeight }}
+                  styles={{ body: { padding: 0, height: '100%', flex: 1, display: 'flex', flexDirection: 'column' } }}
                   {...bookshelfCardHoverHandlers}
                   onClick={() => !isFlipped && onEnterProject(project)}
                   data-card-style="bookshelf-book"
@@ -414,110 +415,89 @@ export default function BookshelfPage({
                     zIndex: 2,
                     display: 'flex',
                     flexDirection: 'column',
-                    minHeight: isMobile ? mobileBookHeight : desktopBookHeight,
-                    padding: isMobile ? '18px 16px 14px 38px' : '26px 24px 18px 42px',
+                    flex: 1,
+                    height: '100%',
+                    padding: isMobile ? '16px 16px 14px 38px' : '20px 20px 18px 42px',
+                    overflow: 'hidden',
+                    width: '100%',
+                    boxSizing: 'border-box',
                   }}>
-                    <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: 8 }}>
+                    {showCoverFace && (
+                      <>
+                        <div style={{
+                          position: 'absolute',
+                          inset: 0,
+                          backgroundImage: `url(${project.cover_image_url})`,
+                          backgroundSize: 'cover',
+                          backgroundPosition: 'center',
+                          backgroundRepeat: 'no-repeat',
+                        }} />
+                        <div style={{
+                          position: 'absolute',
+                          inset: 0,
+                          background: isDark
+                            ? 'linear-gradient(180deg, rgba(7,10,18,0.18) 0%, rgba(7,10,18,0.38) 24%, rgba(7,10,18,0.72) 62%, rgba(7,10,18,0.88) 100%)'
+                            : 'linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(16,24,40,0.22) 24%, rgba(16,24,40,0.62) 62%, rgba(16,24,40,0.82) 100%)',
+                        }} />
+                      </>
+                    )}
+
+                    <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: 8, position: 'relative', zIndex: 2 }}>
                       <Button
                         type="text"
                         size="small"
-                        icon={isFlipped ? <BookOutlined /> : <SwapOutlined />}
+                        icon={showCoverFace ? <BookOutlined /> : <SwapOutlined />}
                         onClick={(e) => {
                           e.stopPropagation();
                           toggleProjectFace(project.id);
                         }}
+                        style={showCoverFace ? {
+                          color: token.colorWhite,
+                          borderRadius: 999,
+                          background: 'rgba(255,255,255,0.18)',
+                          backdropFilter: 'blur(10px)',
+                          border: '1px solid rgba(255,255,255,0.22)',
+                        } : undefined}
                       >
-                        {isFlipped ? '返回书本' : '查看封面'}
+                        {showCoverFace ? '切换回详情' : (coverReady ? '查看封面' : '封面操作')}
                       </Button>
                     </div>
-                    {isFlipped ? (
-                      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'center' }}>
-                        {coverReady ? (
-                          <>
-                            <div style={{ flex: 1, minHeight: 240, borderRadius: 12, overflow: 'hidden', background: alphaColor(token.colorText, 0.06), border: `1px solid ${alphaColor(token.colorText, 0.08)}` }}>
-                              <img src={project.cover_image_url} alt={`${project.title} cover`} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
-                            </div>
-                            <Space wrap>
-                              <Button icon={<DownloadOutlined />} onClick={(e) => { e.stopPropagation(); onDownloadCover(project); }} disabled={coverActionLoading}>下载封面</Button>
-                              <Button
-                                icon={<ReloadOutlined />}
-                                loading={coverActionLoading}
-                                onClick={(e) => void handleGenerateCoverClick(e, project, true)}
-                              >
-                                {coverActionLoading ? '重新生成中...' : '重新生成'}
-                              </Button>
-                            </Space>
-                          </>
-                        ) : coverGenerating ? (
-                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
-                            <LoadingOutlined spin style={{ fontSize: 28, color: token.colorPrimary }} />
-                            <div style={{ color: token.colorTextSecondary }}>封面生成中，请稍候...</div>
-                          </div>
-                        ) : (
-                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, textAlign: 'center' }}>
-                            <PictureOutlined style={{ fontSize: 36, color: token.colorTextTertiary }} />
-                            {coverFailed ? (
-                              <>
-                                <div style={{ color: token.colorError }}>封面生成失败</div>
-                                <div style={{ color: token.colorTextSecondary, fontSize: 12 }}>{project.cover_error || '请稍后重试'}</div>
-                                <Button
-                                  type="primary"
-                                  icon={<ReloadOutlined />}
-                                  loading={coverActionLoading}
-                                  onClick={(e) => void handleGenerateCoverClick(e, project, true)}
-                                >
-                                  {coverActionLoading ? '重新生成中...' : '重新生成'}
-                                </Button>
-                              </>
-                            ) : (
-                              <Button
-                                type="primary"
-                                icon={<PictureOutlined />}
-                                loading={coverActionLoading}
-                                onClick={(e) => void handleGenerateCoverClick(e, project, true)}
-                              >
-                                {coverActionLoading ? '生成中...' : '生成封面'}
-                              </Button>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    ) : (
-                      <>
-                        <div style={{ marginBottom: isMobile ? 10 : 12, paddingRight: isMobile ? 18 : 30 }}>
-                          <div style={{
-                            display: 'flex',
-                            alignItems: 'flex-start',
-                            gap: 8,
-                            marginBottom: isMobile ? 8 : 10,
-                            minHeight: isMobile ? 50 : 58,
-                          }}>
-                            <BookOutlined style={{
-                              fontSize: isMobile ? 14 : 16,
-                              color: alphaColor(token.colorText, 0.4),
-                              marginTop: 2,
-                              flexShrink: 0,
-                            }} />
-                            <div style={{
-                              fontSize: isMobile ? 18 : 22,
-                              fontWeight: 700,
-                              color: token.colorText,
-                              lineHeight: 1.3,
-                              display: '-webkit-box',
-                              WebkitLineClamp: 2,
-                              WebkitBoxOrient: 'vertical',
-                              overflow: 'hidden',
-                              wordBreak: 'break-word',
-                              fontFamily: 'Georgia, "Times New Roman", "Noto Serif SC", serif',
-                            }}>
-                              {project.title}
-                            </div>
-                          </div>
 
+                    {showCoverFace ? (
+                      <div style={{
+                        position: 'relative',
+                        zIndex: 2,
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        minHeight: 0,
+                        width: '100%',
+                      }}>
+                        <div style={{
+                          minHeight: isMobile ? 82 : 90,
+                          width: '100%',
+                          marginBottom: isMobile ? 10 : 12,
+                        }}>
+                          <div style={{
+                            fontSize: isMobile ? 18 : 22,
+                            fontWeight: 700,
+                            color: token.colorWhite,
+                            lineHeight: 1.3,
+                            display: '-webkit-box',
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: 'vertical',
+                            overflow: 'hidden',
+                            wordBreak: 'break-word',
+                            fontFamily: 'Georgia, "Times New Roman", "Noto Serif SC", serif',
+                            textShadow: '0 2px 12px rgba(0,0,0,0.35)',
+                          }}>
+                            {project.title}
+                          </div>
                           <div style={{
                             display: 'flex',
                             flexWrap: 'wrap',
                             gap: 6,
+                            marginTop: 10,
                             minHeight: isMobile ? 20 : 22,
                             alignItems: 'flex-start',
                           }}>
@@ -525,13 +505,14 @@ export default function BookshelfPage({
                               <Tag key={idx} style={{
                                 margin: 0,
                                 padding: isMobile ? '0 7px' : '0 8px',
-                                borderRadius: 4,
-                                border: `1px solid ${alphaColor(token.colorSuccess, 0.18)}`,
-                                background: alphaColor(token.colorSuccess, 0.08),
-                                color: token.colorSuccess,
+                                borderRadius: 999,
+                                border: '1px solid rgba(255,255,255,0.24)',
+                                background: 'rgba(255,255,255,0.14)',
+                                color: token.colorWhite,
                                 fontSize: isMobile ? 10 : 11,
                                 lineHeight: isMobile ? '18px' : '20px',
                                 fontWeight: 500,
+                                backdropFilter: 'blur(8px)',
                               }}>
                                 {tag}
                               </Tag>
@@ -539,13 +520,14 @@ export default function BookshelfPage({
                               <Tag style={{
                                 margin: 0,
                                 padding: isMobile ? '0 7px' : '0 8px',
-                                borderRadius: 4,
-                                border: `1px solid ${alphaColor(token.colorSuccess, 0.18)}`,
-                                background: alphaColor(token.colorSuccess, 0.08),
-                                color: token.colorSuccess,
+                                borderRadius: 999,
+                                border: '1px solid rgba(255,255,255,0.24)',
+                                background: 'rgba(255,255,255,0.14)',
+                                color: token.colorWhite,
                                 fontSize: isMobile ? 10 : 11,
                                 lineHeight: isMobile ? '18px' : '20px',
                                 fontWeight: 500,
+                                backdropFilter: 'blur(8px)',
                               }}>
                                 未分类
                               </Tag>
@@ -553,130 +535,397 @@ export default function BookshelfPage({
                           </div>
                         </div>
 
-                        <Paragraph
-                          ellipsis={{ rows: isMobile ? 3 : 3 }}
-                          style={{
-                            fontSize: isMobile ? 12 : 13,
-                            color: token.colorTextSecondary,
-                            marginBottom: isMobile ? 12 : 16,
-                            lineHeight: 1.7,
-                            flexGrow: 1,
-                          }}
-                        >
-                          {project.description || '暂无描述...'}
-                        </Paragraph>
+                        <div style={{ flex: 1, minHeight: isMobile ? 54 : 72 }} />
+
+                        <div style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          gap: 10,
+                          width: '100%',
+                        }}>
+                          <div style={{
+                            padding: isMobile ? '12px 10px' : '14px 12px',
+                            borderRadius: 10,
+                            background: 'rgba(10,18,32,0.34)',
+                            border: '1px solid rgba(255,255,255,0.16)',
+                            boxShadow: '0 8px 24px rgba(0,0,0,0.18)',
+                            backdropFilter: 'blur(12px)',
+                            minHeight: isMobile ? 74 : 82,
+                          }}>
+                            <div style={{
+                              display: 'flex',
+                              justifyContent: 'space-between',
+                              alignItems: 'center',
+                              marginBottom: 6,
+                              fontSize: isMobile ? 11 : 12,
+                              color: 'rgba(255,255,255,0.82)',
+                            }}>
+                              <span>完成进度</span>
+                              <span style={{ color: token.colorWhite, fontWeight: 700 }}>{progress}%</span>
+                            </div>
+                            <div style={{
+                              height: 6,
+                              width: '100%',
+                              borderRadius: 999,
+                              overflow: 'hidden',
+                              background: 'rgba(255,255,255,0.18)',
+                              marginBottom: 12,
+                            }}>
+                              <div style={{
+                                width: `${progress}%`,
+                                height: '100%',
+                                borderRadius: 999,
+                                background: progressColor,
+                                transition: 'width 0.3s ease',
+                              }} />
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'stretch', textAlign: 'center' }}>
+                              <div style={{ flex: 1 }}>
+                                <div style={{
+                                  fontSize: isMobile ? 22 : 26,
+                                  fontWeight: 700,
+                                  color: token.colorWhite,
+                                  lineHeight: 1.1,
+                                  fontFamily: 'Georgia, "Times New Roman", serif',
+                                }}>
+                                  {formatWordCount(project.current_words || 0)}
+                                </div>
+                                <div style={{
+                                  fontSize: isMobile ? 10 : 11,
+                                  color: 'rgba(255,255,255,0.72)',
+                                  marginTop: 4,
+                                }}>
+                                  已写字数
+                                </div>
+                              </div>
+                              <div style={{
+                                width: 1,
+                                margin: '0 12px',
+                                background: 'rgba(255,255,255,0.16)',
+                              }} />
+                              <div style={{ flex: 1 }}>
+                                <div style={{
+                                  fontSize: isMobile ? 22 : 26,
+                                  fontWeight: 700,
+                                  color: progress >= 100 ? '#7CFFB2' : token.colorWhite,
+                                  lineHeight: 1.1,
+                                  fontFamily: 'Georgia, "Times New Roman", serif',
+                                }}>
+                                  {formatWordCount(project.target_words || 0)}
+                                </div>
+                                <div style={{
+                                  fontSize: isMobile ? 10 : 11,
+                                  color: 'rgba(255,255,255,0.72)',
+                                  marginTop: 4,
+                                }}>
+                                  目标字数
+                                </div>
+                              </div>
+                            </div>
+                          </div>
 
-                        <div style={{ marginBottom: isMobile ? 14 : 18 }}>
                           <div style={{
                             display: 'flex',
                             justifyContent: 'space-between',
                             alignItems: 'center',
-                            marginBottom: 6,
-                            fontSize: isMobile ? 11 : 12,
+                            gap: 10,
+                            flexWrap: 'wrap',
+                            paddingTop: isMobile ? 10 : 12,
+                            borderTop: '1px solid rgba(255,255,255,0.18)',
+                            minHeight: isMobile ? 42 : 46,
                           }}>
-                            <span style={{ color: token.colorTextTertiary }}>完成进度</span>
-                            <span style={{ color: progressColor, fontWeight: 700 }}>{progress}%</span>
-                          </div>
-                          <div style={{
-                            height: 6,
-                            width: '100%',
-                            borderRadius: 999,
-                            overflow: 'hidden',
-                            background: alphaColor(token.colorText, 0.06),
-                          }}>
-                            <div style={{
-                              width: `${progress}%`,
-                              height: '100%',
-                              borderRadius: 999,
-                              background: progressColor,
-                              transition: 'width 0.3s ease',
-                            }} />
+                            <Space size={4} style={{ fontSize: isMobile ? 11 : 12, color: 'rgba(255,255,255,0.76)' }}>
+                              <CalendarOutlined style={{ fontSize: isMobile ? 10 : 12 }} />
+                              {formatDate(project.updated_at)}
+                            </Space>
+
+                            <Space wrap>
+                              <Button
+                                size="small"
+                                icon={<DownloadOutlined />}
+                                onClick={(e) => { e.stopPropagation(); onDownloadCover(project); }}
+                                disabled={coverActionLoading}
+                                style={{
+                                  color: token.colorWhite,
+                                  background: 'rgba(255,255,255,0.14)',
+                                  borderColor: 'rgba(255,255,255,0.22)',
+                                  backdropFilter: 'blur(8px)',
+                                }}
+                              >
+                                下载封面
+                              </Button>
+                              <Button
+                                size="small"
+                                icon={<ReloadOutlined />}
+                                loading={coverActionLoading}
+                                onClick={(e) => void handleGenerateCoverClick(e, project, true)}
+                                style={{
+                                  color: token.colorWhite,
+                                  background: 'rgba(255,255,255,0.14)',
+                                  borderColor: 'rgba(255,255,255,0.22)',
+                                  backdropFilter: 'blur(8px)',
+                                }}
+                              >
+                                {coverActionLoading ? '重新生成中...' : '重新生成'}
+                              </Button>
+                            </Space>
                           </div>
                         </div>
-
-                        <div style={{
-                          marginBottom: isMobile ? 12 : 16,
-                          padding: isMobile ? '12px 10px' : '14px 12px',
-                          background: `linear-gradient(180deg, ${alphaColor(token.colorBgContainer, 0.94)} 0%, ${alphaColor(token.colorFillSecondary, 0.78)} 100%)`,
-                          borderRadius: 10,
-                          border: `1px solid ${alphaColor(token.colorText, 0.06)}`,
-                          boxShadow: `inset 0 1px 2px ${alphaColor(token.colorText, 0.08)}`,
-                        }}>
-                          <div style={{ display: 'flex', alignItems: 'stretch', textAlign: 'center' }}>
-                            <div style={{ flex: 1 }}>
+                      </div>
+                    ) : (
+                      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'space-between', minHeight: 0, width: '100%' }}>
+                        {isFlipped && coverGenerating ? (
+                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, minHeight: 0, width: '100%' }}>
+                            <LoadingOutlined spin style={{ fontSize: 28, color: token.colorPrimary }} />
+                            <div style={{ color: token.colorTextSecondary }}>封面生成中，请稍候...</div>
+                          </div>
+                        ) : isFlipped && coverFailed ? (
+                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, textAlign: 'center', minHeight: 0 }}>
+                            <PictureOutlined style={{ fontSize: 36, color: token.colorTextTertiary }} />
+                            <div style={{ color: token.colorError }}>封面生成失败</div>
+                            <div style={{ color: token.colorTextSecondary, fontSize: 12 }}>{project.cover_error || '请稍后重试'}</div>
+                            <Button
+                              type="primary"
+                              icon={<ReloadOutlined />}
+                              loading={coverActionLoading}
+                              onClick={(e) => void handleGenerateCoverClick(e, project, true)}
+                            >
+                              {coverActionLoading ? '重新生成中...' : '重新生成'}
+                            </Button>
+                          </div>
+                        ) : isFlipped && !coverReady ? (
+                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, textAlign: 'center', minHeight: 0 }}>
+                            <PictureOutlined style={{ fontSize: 36, color: token.colorTextTertiary }} />
+                            <div style={{ color: token.colorTextSecondary }}>当前暂无可用封面</div>
+                            <Button
+                              type="primary"
+                              icon={<PictureOutlined />}
+                              loading={coverActionLoading}
+                              onClick={(e) => void handleGenerateCoverClick(e, project, true)}
+                            >
+                              {coverActionLoading ? '生成中...' : '生成封面'}
+                            </Button>
+                          </div>
+                        ) : (
+                          <>
+                            <div style={{ marginBottom: isMobile ? 10 : 12, paddingRight: isMobile ? 18 : 30 }}>
                               <div style={{
-                                fontSize: isMobile ? 22 : 26,
-                                fontWeight: 700,
-                                color: token.colorText,
-                                lineHeight: 1.1,
-                                fontFamily: 'Georgia, "Times New Roman", serif',
+                                display: 'flex',
+                                alignItems: 'flex-start',
+                                gap: 8,
+                                marginBottom: isMobile ? 8 : 10,
+                                minHeight: isMobile ? 50 : 58,
                               }}>
-                                {formatWordCount(project.current_words || 0)}
+                                <BookOutlined style={{
+                                  fontSize: isMobile ? 14 : 16,
+                                  color: alphaColor(token.colorText, 0.4),
+                                  marginTop: 2,
+                                  flexShrink: 0,
+                                }} />
+                                <div style={{
+                                  fontSize: isMobile ? 18 : 22,
+                                  fontWeight: 700,
+                                  color: token.colorText,
+                                  lineHeight: 1.3,
+                                  display: '-webkit-box',
+                                  WebkitLineClamp: 2,
+                                  WebkitBoxOrient: 'vertical',
+                                  overflow: 'hidden',
+                                  wordBreak: 'break-word',
+                                  fontFamily: 'Georgia, "Times New Roman", "Noto Serif SC", serif',
+                                }}>
+                                  {project.title}
+                                </div>
                               </div>
+
                               <div style={{
-                                fontSize: isMobile ? 10 : 11,
-                                color: token.colorTextTertiary,
-                                marginTop: 4,
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                gap: 6,
+                                minHeight: isMobile ? 20 : 22,
+                                alignItems: 'flex-start',
                               }}>
-                                已写字数
+                                {tags.length > 0 ? tags.slice(0, 3).map((tag: string, idx: number) => (
+                                  <Tag key={idx} style={{
+                                    margin: 0,
+                                    padding: isMobile ? '0 7px' : '0 8px',
+                                    borderRadius: 4,
+                                    border: `1px solid ${alphaColor(token.colorSuccess, 0.18)}`,
+                                    background: alphaColor(token.colorSuccess, 0.08),
+                                    color: token.colorSuccess,
+                                    fontSize: isMobile ? 10 : 11,
+                                    lineHeight: isMobile ? '18px' : '20px',
+                                    fontWeight: 500,
+                                  }}>
+                                    {tag}
+                                  </Tag>
+                                )) : (
+                                  <Tag style={{
+                                    margin: 0,
+                                    padding: isMobile ? '0 7px' : '0 8px',
+                                    borderRadius: 4,
+                                    border: `1px solid ${alphaColor(token.colorSuccess, 0.18)}`,
+                                    background: alphaColor(token.colorSuccess, 0.08),
+                                    color: token.colorSuccess,
+                                    fontSize: isMobile ? 10 : 11,
+                                    lineHeight: isMobile ? '18px' : '20px',
+                                    fontWeight: 500,
+                                  }}>
+                                    未分类
+                                  </Tag>
+                                )}
                               </div>
                             </div>
-                            <div style={{
-                              width: 1,
-                              margin: '0 12px',
-                              background: alphaColor(token.colorText, 0.1),
-                            }} />
-                            <div style={{ flex: 1 }}>
+
+                            <Paragraph
+                              ellipsis={{ rows: isMobile ? 3 : 3 }}
+                              style={{
+                                fontSize: isMobile ? 12 : 13,
+                                color: token.colorTextSecondary,
+                                marginBottom: isMobile ? 12 : 16,
+                                lineHeight: 1.7,
+                                flexGrow: 1,
+                              }}
+                            >
+                              {project.description || '暂无描述...'}
+                            </Paragraph>
+
+                            <div style={{ marginBottom: isMobile ? 14 : 18 }}>
                               <div style={{
-                                fontSize: isMobile ? 22 : 26,
-                                fontWeight: 700,
-                                color: progress >= 100 ? token.colorSuccess : progressColor,
-                                lineHeight: 1.1,
-                                fontFamily: 'Georgia, "Times New Roman", serif',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginBottom: 6,
+                                fontSize: isMobile ? 11 : 12,
                               }}>
-                                {formatWordCount(project.target_words || 0)}
+                                <span style={{ color: token.colorTextTertiary }}>完成进度</span>
+                                <span style={{ color: progressColor, fontWeight: 700 }}>{progress}%</span>
                               </div>
                               <div style={{
-                                fontSize: isMobile ? 10 : 11,
-                                color: token.colorTextTertiary,
-                                marginTop: 4,
+                                height: 6,
+                                width: '100%',
+                                borderRadius: 999,
+                                overflow: 'hidden',
+                                background: alphaColor(token.colorText, 0.06),
                               }}>
-                                目标字数
+                                <div style={{
+                                  width: `${progress}%`,
+                                  height: '100%',
+                                  borderRadius: 999,
+                                  background: progressColor,
+                                  transition: 'width 0.3s ease',
+                                }} />
                               </div>
                             </div>
-                          </div>
-                        </div>
 
-                        <div style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                          paddingTop: isMobile ? 10 : 12,
-                          borderTop: `1px solid ${alphaColor(token.colorText, 0.06)}`,
-                          color: token.colorTextTertiary,
-                          marginTop: 'auto',
-                        }}>
-                          <Space size={4} style={{ fontSize: isMobile ? 11 : 12, color: token.colorTextTertiary }}>
-                            <CalendarOutlined style={{ fontSize: isMobile ? 10 : 12 }} />
-                            {formatDate(project.updated_at)}
-                          </Space>
+                            <div style={{
+                              marginBottom: isMobile ? 12 : 16,
+                              padding: isMobile ? '12px 10px' : '14px 12px',
+                              background: `linear-gradient(180deg, ${alphaColor(token.colorBgContainer, 0.94)} 0%, ${alphaColor(token.colorFillSecondary, 0.78)} 100%)`,
+                              borderRadius: 10,
+                              border: `1px solid ${alphaColor(token.colorText, 0.06)}`,
+                              boxShadow: `inset 0 1px 2px ${alphaColor(token.colorText, 0.08)}`,
+                            }}>
+                              <div style={{ display: 'flex', alignItems: 'stretch', textAlign: 'center' }}>
+                                <div style={{ flex: 1 }}>
+                                  <div style={{
+                                    fontSize: isMobile ? 22 : 26,
+                                    fontWeight: 700,
+                                    color: token.colorText,
+                                    lineHeight: 1.1,
+                                    fontFamily: 'Georgia, "Times New Roman", serif',
+                                  }}>
+                                    {formatWordCount(project.current_words || 0)}
+                                  </div>
+                                  <div style={{
+                                    fontSize: isMobile ? 10 : 11,
+                                    color: token.colorTextTertiary,
+                                    marginTop: 4,
+                                  }}>
+                                    已写字数
+                                  </div>
+                                </div>
+                                <div style={{
+                                  width: 1,
+                                  margin: '0 12px',
+                                  background: alphaColor(token.colorText, 0.1),
+                                }} />
+                                <div style={{ flex: 1 }}>
+                                  <div style={{
+                                    fontSize: isMobile ? 22 : 26,
+                                    fontWeight: 700,
+                                    color: progress >= 100 ? token.colorSuccess : progressColor,
+                                    lineHeight: 1.1,
+                                    fontFamily: 'Georgia, "Times New Roman", serif',
+                                  }}>
+                                    {formatWordCount(project.target_words || 0)}
+                                  </div>
+                                  <div style={{
+                                    fontSize: isMobile ? 10 : 11,
+                                    color: token.colorTextTertiary,
+                                    marginTop: 4,
+                                  }}>
+                                    目标字数
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
 
-                          <Button
-                            type="text"
-                            size="small"
-                            danger
-                            icon={<DeleteOutlined style={{ fontSize: isMobile ? 12 : 14 }} />}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              onDeleteProject(project.id);
-                            }}
-                            style={{
-                              padding: isMobile ? '2px 4px' : '4px 8px',
-                              borderRadius: 8,
-                            }}
-                          />
-                        </div>
-                      </>
+                            <div style={{
+                              display: 'grid',
+                              gridTemplateColumns: '1fr auto 1fr',
+                              alignItems: 'center',
+                              gap: 10,
+                              paddingTop: isMobile ? 10 : 12,
+                              borderTop: `1px solid ${alphaColor(token.colorText, 0.06)}`,
+                              color: token.colorTextTertiary,
+                              marginTop: 'auto',
+                            }}>
+                              <Space size={4} style={{ fontSize: isMobile ? 11 : 12, color: token.colorTextTertiary, justifySelf: 'start' }}>
+                                <CalendarOutlined style={{ fontSize: isMobile ? 10 : 12 }} />
+                                {formatDate(project.updated_at)}
+                              </Space>
+
+                              <div style={{ justifySelf: 'center' }}>
+                                {!coverReady && (
+                                  <Button
+                                    size="small"
+                                    icon={<PictureOutlined />}
+                                    loading={coverActionLoading}
+                                    onClick={(e) => void handleGenerateCoverClick(e, project, true)}
+                                    style={{
+                                      color: token.colorWhite,
+                                      background: 'rgba(255,255,255,0.14)',
+                                      borderColor: 'rgba(255,255,255,0.22)',
+                                      backdropFilter: 'blur(8px)',
+                                      minWidth: isMobile ? 112 : 124,
+                                    }}
+                                  >
+                                    {coverActionLoading ? '生成中...' : '生成封面'}
+                                  </Button>
+                                )}
+                              </div>
+
+                              <div style={{ justifySelf: 'end' }}>
+                                <Button
+                                  type="text"
+                                  size="small"
+                                  danger
+                                  icon={<DeleteOutlined style={{ fontSize: isMobile ? 12 : 14 }} />}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onDeleteProject(project.id);
+                                  }}
+                                  style={{
+                                    padding: isMobile ? '2px 4px' : '4px 8px',
+                                    borderRadius: 8,
+                                  }}
+                                />
+                              </div>
+                            </div>
+                          </>
+                        )}
+                      </div>
                     )}
                   </div>
                 </Card>